🔧 chore(index.css): remove unnecessary styles from body element to im…

…prove code readability and maintainability 🔧 chore(index.css): refactor control section styles to improve code readability and maintainability 🔧 chore(index.html): restructure HTML markup to improve semantics and readability 🔧 chore(background.js): fix import statement to match the correct file name ✨ feat(dom-manager.js): add DomManager class to manage DOM elements for easy access and manipulation ✨ feat(event-handler.js): update event listeners to use DomManager for better code organization and readability ✨ feat(game.js): update import statement to match the correct file name ✨ feat(index.js): update import statement to match the correct file name ✨ feat(mario.js): update import statement to match the correct file name ✨ feat(obstacle.js): update import statement to match the correct file name
romantech · Jan 21, 2024 · a399499 · a399499
1 parent 909be84
commit a399499
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 20 deletions.
diff --git a/index.css b/index.css
@@ -1,8 +1,3 @@
-body {
-  margin: 0;
-  padding: 2rem;
-}
-
 .game {
   width: 100%;
   min-height: 440px;
@@ -38,9 +33,10 @@ body {
 }
 
 .control {
+  background-color: #6990f6;
   display: flex;
   align-items: center;
-  padding: 0px 20px;
+  padding: 0 1rem;
 }
 
 .score-heading {

diff --git a/index.html b/index.html
@@ -11,19 +11,20 @@
     <title>Super Mario</title>
   </head>
   <body>
-    <h2>Super Mario</h2>
-    <main class="game">
+    <main>
+      <h2>Super Mario</h2>
       <section class="control">
-        <div class="button-group">
+        <nav class="button-group">
           <button class="start-button" type="button">Start</button>
           <button class="stop-button" type="button">Stop</button>
-        </div>
+        </nav>
         <h3 class="score-heading">Score <span class="score">0</span></h3>
       </section>
+      <section class="game"></section>
+      <aside class="guide">
+        <p>Press <kbd>space</kbd> or <kbd>touch</kbd> to jump</p>
+      </aside>
     </main>
-    <span class="guide"
-      >Press <kbd>space</kbd> or <kbd>touch</kbd> to jump</span
-    >
     <script src="./main.js" type="module"></script>
   </body>
 </html>
diff --git a/src/background.js b/src/background.js
@@ -1,4 +1,4 @@
-import DomManager from './domManager.js';
+import DomManager from './dom-manager.js';
 
 class Background {
   constructor({ speed }) {

diff --git a/src/domManager.js → src/dom-manager.js b/src/domManager.js → src/dom-manager.js
diff --git a/src/event-handler.js b/src/event-handler.js
@@ -1,3 +1,5 @@
+import DomManager from './dom-manager.js';
+
 export default class EventHandler {
   constructor(action) {
     this.action = action;
@@ -8,12 +10,14 @@ export default class EventHandler {
 
   setupEventListeners() {
     document.addEventListener('keydown', this.handleKeyDown);
-    document.addEventListener('touchstart', this.handleTouch);
+    DomManager.gameArea.addEventListener('touchstart', this.handleTouch, {
+      passive: false, // event.preventDefault() 호출할 것이라고 브라우저에게 알림
+    });
   }
 
   removeEventListeners() {
     document.removeEventListener('keydown', this.handleKeyDown);
-    document.removeEventListener('touchstart', this.handleTouch);
+    DomManager.gameArea.removeEventListener('touchstart', this.handleTouch);
   }
 
   handleKeyDown(e) {

diff --git a/src/game.js b/src/game.js
@@ -2,7 +2,7 @@ import Mario from './mario.js';
 import Background from './background.js';
 import ObstacleManager from './obstacle.js';
 import EventHandler from './event-handler.js';
-import DomManager from './domManager.js';
+import DomManager from './dom-manager.js';
 
 const generateRandomNumber = (min, max) => {
   return Math.floor(Math.random() * (max - min + 1)) + min;

diff --git a/src/index.js b/src/index.js
@@ -2,4 +2,4 @@ export { default as Mario } from './mario.js';
 export { default as Game } from './game.js';
 export { default as Background } from './background.js';
 export { default as ObstacleManager } from './obstacle.js';
-export { default as DomManager } from './domManager.js';
+export { default as DomManager } from './dom-manager.js';
diff --git a/src/mario.js b/src/mario.js
@@ -1,4 +1,4 @@
-import DomManager from './domManager.js';
+import DomManager from './dom-manager.js';
 
 class Mario {
   static jumpHeight = 18;

diff --git a/src/obstacle.js b/src/obstacle.js
@@ -1,4 +1,4 @@
-import DomManager from './domManager.js';
+import DomManager from './dom-manager.js';
 
 class ObstacleManager {
   constructor() {