added mobile controls debugging and fixes

pacman.html

@@ -23,6 +23,7 @@
         .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); }
+        .debug-info { position: fixed; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.8); color: #0ff; font-size: 12px; padding: 5px; border: 1px solid #0ff; z-index: 1001; }
         @media (max-width: 768px) {
             body { padding: 10px; }
             #gameCanvas { max-width: 100%; height: auto; }
@@ -64,6 +65,13 @@
     <!-- Mobile Space Button -->
     <button id="mobileSpaceBtn" class="mobile-space-btn" style="display: none;">SPACE</button>
     
+    <!-- Debug Info -->
+    <div id="debugInfo" class="debug-info">
+        <div>Mobile: <span id="isMobileStatus">No</span></div>
+        <div>State: <span id="gameStateStatus">START</span></div>
+        <div>Controls: <span id="controlsStatus">Hidden</span></div>
+    </div>
+
     <script>
         const canvas = document.getElementById('gameCanvas');
         const ctx = canvas.getContext('2d');
@@ -73,11 +81,25 @@
         const startScreenElement = document.getElementById('startScreen');
         const mobileControlsElement = document.getElementById('mobileControls');
         const mobileSpaceBtnElement = document.getElementById('mobileSpaceBtn');
+        const debugInfoElement = document.getElementById('debugInfo');
+        const isMobileStatusElement = document.getElementById('isMobileStatus');
+        const gameStateStatusElement = document.getElementById('gameStateStatus');
+        const controlsStatusElement = document.getElementById('controlsStatus');
 
         // Mobile detection
         const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
                        (window.innerWidth <= 768 && 'ontouchstart' in window);
         
+        // Update debug info
+        function updateDebugInfo() {
+            if (isMobileStatusElement) isMobileStatusElement.textContent = isMobile ? 'Yes' : 'No';
+            if (gameStateStatusElement) gameStateStatusElement.textContent = gameState;
+            if (controlsStatusElement) {
+                const isVisible = mobileControlsElement.classList.contains('active');
+                controlsStatusElement.textContent = isVisible ? 'Visible' : 'Hidden';
+            }
+        }
+        
         // Show mobile controls if on mobile device
         if (isMobile) {
             mobileControlsElement.classList.add('active');
@@ -86,7 +108,15 @@
             const scale = Math.min(window.innerWidth / 500, 1);
             canvas.style.width = (448 * scale) + 'px';
             canvas.style.height = (560 * scale) + 'px';
+        } else {
+            // Also show mobile controls on desktop for testing and smaller screens
+            if (window.innerWidth <= 768) {
+                mobileControlsElement.classList.add('active');
+                mobileSpaceBtnElement.style.display = 'block';
             }
+        }
+        
+        updateDebugInfo();
 
         const CELL_SIZE = 14;
         const MAZE_WIDTH = 32;
@@ -613,6 +643,7 @@
                 checkCollisions();
                 
                 animationFrame++;
+                updateDebugInfo();
                 
                 // Auto-start game after attract mode timeout
                 if (attractModeTimer > 600) { // 10 seconds at 60fps
@@ -625,6 +656,7 @@
                 ctx.clearRect(0, 0, canvas.width, canvas.height);
                 drawTitleScreen();
                 animationFrame++;
+                updateDebugInfo();
                 
             } else if (gameState === 'READY') {
                 ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -639,6 +671,7 @@
                     soundSystem.play('ready');
                 }
                 animationFrame++;
+                updateDebugInfo();
                 
             } else if (gameState === 'INTERMISSION') {
                 ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -652,6 +685,7 @@
                     readyTimer = 180;
                 }
                 animationFrame++;
+                updateDebugInfo();
                 
             } else if (gameState === 'PLAYING') {
                 ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -678,6 +712,7 @@
                 }
                 
                 animationFrame++;
+                updateDebugInfo();
                 
                 // Auto-switch to attract mode after inactivity
                 if (animationFrame % 3600 === 0) { // 1 minute of inactivity
@@ -731,25 +766,32 @@
 
         // Mobile touch controls
         function setupMobileControls() {
+            console.log('Setting up mobile controls...');
             const dpadButtons = document.querySelectorAll('.dpad-btn');
             
             dpadButtons.forEach(button => {
                 const direction = button.dataset.direction;
                 if (!direction) return; // Skip center button
                 
+                console.log('Setting up button for direction:', direction);
+                
                 // Touch start
                 button.addEventListener('touchstart', (e) => {
                     e.preventDefault();
+                    console.log('Touch start for direction:', direction, 'Game state:', gameState);
                     if (gameState === 'PLAYING') {
                         pacman.nextDirection = direction;
+                        console.log('Set pacman direction to:', direction);
                     }
                 });
                 
                 // Mouse down (for testing on desktop)
                 button.addEventListener('mousedown', (e) => {
                     e.preventDefault();
+                    console.log('Mouse down for direction:', direction, 'Game state:', gameState);
                     if (gameState === 'PLAYING') {
                         pacman.nextDirection = direction;
+                        console.log('Set pacman direction to:', direction);
                     }
                 });
                 
@@ -767,26 +809,34 @@
             // Mobile space button
             mobileSpaceBtnElement.addEventListener('touchstart', (e) => {
                 e.preventDefault();
+                console.log('Mobile space button touched');
                 handleSpaceButton();
             });
             
             mobileSpaceBtnElement.addEventListener('mousedown', (e) => {
                 e.preventDefault();
+                console.log('Mobile space button clicked');
                 handleSpaceButton();
             });
+            
+            console.log('Mobile controls setup complete');
         }
         
         function handleSpaceButton() {
+            console.log('Space button pressed, current game state:', gameState);
+            
             if (gameState === 'ATTRACT') {
                 gameState = 'START';
                 attractModeTimer = 0;
                 soundSystem.play('ready');
+                console.log('Switched to START state');
             } else if (gameState === 'START') {
                 gameState = 'READY';
                 readyTimer = 180;
                 startScreenElement.style.display = 'none';
                 resetPositions();
                 soundSystem.play('ready');
+                console.log('Switched to READY state');
             } else if (gameState === 'GAME_OVER') {
                 gameState = 'START';
                 gameOverElement.style.display = 'none';
@@ -797,11 +847,12 @@
                 updateLives();
                 maze = JSON.parse(JSON.stringify(mazeLayout));
                 soundSystem.play('ready');
+                console.log('Restarted game');
             }
         }
         
         // Initialize mobile controls if needed
-        if (isMobile) {
+        if (isMobile || window.innerWidth <= 768) {
             setupMobileControls();
         }