web_workshop

commit 54580e97eb8401dbc1a188e8572df59689117e86
parent 6a23402f63991ca71a2b53b8bf1bf09c00718083
Author: Hunter
Date:   Wed, 23 Jul 2025 18:52:23 -0400

snake: improve control pad layout/responsiveness

Diffstat:
M
pages/snake/index.html
 | 
19
++++++++++++++-----

1 file changed, 14 insertions(+), 5 deletions(-)
diff --git a/pages/snake/index.html b/pages/snake/index.html
@@ -113,6 +113,10 @@
 			visibility: visible;
 		}
 		
+		#centerBtn {
+			z-index: 10;
+		}
+		
 		#mobileGameOver, #mobileStartHint {
 			font-size: 20px;
 			color: red;
@@ -483,19 +487,24 @@
 		});
 		
 		// Mobile controls
-		document.getElementById('upBtn').addEventListener('click', () => {
+		document.getElementById('upBtn').addEventListener('touchstart', (e) => {
+			e.preventDefault();
 			if (gameRunning) setDirection({x: 0, y: -1});
 		});
-		document.getElementById('downBtn').addEventListener('click', () => {
+		document.getElementById('downBtn').addEventListener('touchstart', (e) => {
+			e.preventDefault();
 			if (gameRunning) setDirection({x: 0, y: 1});
 		});
-		document.getElementById('leftBtn').addEventListener('click', () => {
+		document.getElementById('leftBtn').addEventListener('touchstart', (e) => {
+			e.preventDefault();
 			if (gameRunning) setDirection({x: -1, y: 0});
 		});
-		document.getElementById('rightBtn').addEventListener('click', () => {
+		document.getElementById('rightBtn').addEventListener('touchstart', (e) => {
+			e.preventDefault();
 			if (gameRunning) setDirection({x: 1, y: 0});
 		});
-		document.getElementById('centerBtn').addEventListener('click', () => {
+		document.getElementById('centerBtn').addEventListener('touchstart', (e) => {
+			e.preventDefault();
 			if (!gameRunning) {
 				startGame();
 			}