Fix: Updated game controls

hoangsonww · Feb 23, 2024 · 4447d84 · 4447d84
1 parent 500d301
commit 4447d84
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -8,15 +8,25 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 </head>
 <body>
-<header>
-    <h1>The Maze Game</h1>
-    <p>A thrilling adventure through dynamic mazes</p>
-</header>
-<div class="game-container">
-    <canvas id="mazeCanvas"></canvas>
-    <button id="regenerateMaze" title="Feeling lost? Click to regenerate the maze">Regenerate Maze</button>
-</div>
-<script src="src/js/game.js"></script>
+    <header>
+        <h1>The Maze Game</h1>
+        <p>You can use the arrow keys or the buttons below to help the player navigate through the maze.</p>
+    </header>
+
+    <div class="game-container">
+        <canvas id="mazeCanvas"></canvas>
+        <div class="controls">
+            <button id="moveUp" style="font: inherit; cursor: pointer">Up</button>
+            <div class="horizontal-controls">
+                <button id="moveLeft" style="font: inherit; cursor: pointer">Left</button>
+                <button id="moveDown" style="font: inherit; cursor: pointer">Down</button>
+                <button id="moveRight" style="font: inherit; cursor: pointer">Right</button>
+            </div>
+        </div>
+        <button id="regenerateMaze" style="margin-top: 25px">Regenerate Maze</button>
+    </div>
+
+    <script src="src/js/game.js"></script>
 </body>
 
 </html>
diff --git a/src/css/style.css b/src/css/style.css
@@ -17,6 +17,20 @@ body, html {
     text-align: center;
 }
 
+.controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px; /* Space between buttons */
+    margin-top: 10px;
+}
+
+.horizontal-controls {
+    display: flex;
+    justify-content: center;
+    gap: 10px; /* Space between horizontal buttons */
+}
+
 header {
     margin: 20px 0;
 }

diff --git a/src/js/game.js b/src/js/game.js
@@ -121,40 +121,8 @@ window.addEventListener('keydown', (e) => {
     checkWin();
 });
 
-let touchStartX = 0;
-let touchStartY = 0;
-let touchEndX = 0;
-let touchEndY = 0;
-
-canvas.addEventListener('touchstart', (e) => {
-    touchStartX = e.changedTouches[0].screenX;
-    touchStartY = e.changedTouches[0].screenY;
-}, false);
-
-canvas.addEventListener('touchend', (e) => {
-    touchEndX = e.changedTouches[0].screenX;
-    touchEndY = e.changedTouches[0].screenY;
-    handleTouchMove();
-}, false);
-
-function handleTouchMove() {
-    const dx = touchEndX - touchStartX;
-    const dy = touchEndY - touchStartY;
-    if (Math.abs(dx) > Math.abs(dy)) {
-        if (dx > 0) {
-            movePlayer(1, 0);
-        }
-        else {
-            movePlayer(-1, 0);
-        }
-    }
-    else {
-        if (dy > 0) {
-            movePlayer(0, 1);
-        }
-        else {
-            movePlayer(0, -1);
-        }
-    }
-    checkWin();
-}
+document.getElementById('moveUp').addEventListener('click', () => movePlayer(0, -1));
+document.getElementById('moveDown').addEventListener('click', () => movePlayer(0, 1));
+document.getElementById('moveLeft').addEventListener('click', () => movePlayer(-1, 0));
+document.getElementById('moveRight').addEventListener('click', () => movePlayer(1, 0));
+