From 4447d847c60239a3f7e1387b9c75b378fa438833 Mon Sep 17 00:00:00 2001 From: Son Nguyen Hoang Date: Fri, 23 Feb 2024 16:33:12 -0500 Subject: [PATCH] Fix: Updated game controls --- index.html | 28 +++++++++++++++++++--------- src/css/style.css | 14 ++++++++++++++ src/js/game.js | 42 +++++------------------------------------- 3 files changed, 38 insertions(+), 46 deletions(-) diff --git a/index.html b/index.html index 6d23d69..9b8cc98 100644 --- a/index.html +++ b/index.html @@ -8,15 +8,25 @@ -
-

The Maze Game

-

A thrilling adventure through dynamic mazes

-
-
- - -
- +
+

The Maze Game

+

You can use the arrow keys or the buttons below to help the player navigate through the maze.

+
+ +
+ +
+ +
+ + + +
+
+ +
+ + \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css index d8216d8..a0c8c1d 100644 --- 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 index 342cbc7..91b53cd 100644 --- 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)); +