diff --git a/pacman.html b/pacman.html index 7ffb51f..7d6530e 100644 --- a/pacman.html +++ b/pacman.html @@ -11,6 +11,23 @@ #score, #lives { font-size: 20px; margin: 10px 0; color: #ff0; } #gameOver, #startScreen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #ff0; text-align: center; } .controls { margin-top: 20px; text-align: center; color: #0ff; } + .mobile-controls { display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; } + .mobile-controls.active { display: block; } + .dpad { position: relative; width: 150px; height: 150px; } + .dpad-btn { position: absolute; background: rgba(255, 255, 0, 0.3); border: 2px solid #ff0; border-radius: 10px; color: #ff0; font-size: 20px; font-weight: bold; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; -webkit-user-select: none; } + .dpad-btn:active { background: rgba(255, 255, 0, 0.6); } + .dpad-up { width: 50px; height: 50px; top: 0; left: 50px; } + .dpad-down { width: 50px; height: 50px; bottom: 0; left: 50px; } + .dpad-left { width: 50px; height: 50px; top: 50px; left: 0; } + .dpad-right { width: 50px; height: 50px; top: 50px; right: 0; } + .dpad-center { width: 50px; height: 50px; top: 50px; left: 50px; background: rgba(255, 255, 0, 0.1); } + .mobile-space-btn { position: fixed; bottom: 180px; left: 50%; transform: translateX(-50%); background: rgba(0, 255, 255, 0.3); border: 2px solid #0ff; border-radius: 10px; color: #0ff; font-size: 16px; font-weight: bold; padding: 10px 20px; cursor: pointer; user-select: none; -webkit-user-select: none; z-index: 1000; } + .mobile-space-btn:active { background: rgba(0, 255, 255, 0.6); } + @media (max-width: 768px) { + body { padding: 10px; } + #gameCanvas { max-width: 100%; height: auto; } + .desktop-controls { display: none; } + } @@ -28,10 +45,24 @@
PRESS SPACE TO RESTART
-
+
↑ ↓ ← → : MOVE PAC-MAN
SPACE : START/RESTART GAME
+ + +
+
+
↑
+
↓
+
←
+
→
+
+
+
+ + +