feat: Add F3 debug mode with collision boxes and FPS display

js/input.js

@@ -12,6 +12,12 @@ let player = null;
 window.addEventListener('keydown', (e) => {
     keyState[e.code] = true;
     
+    // Toggle debug mode with F3
+    if (e.code === 'F3') {
+        toggleDebug();
+        e.preventDefault();
+    }
+    
     // Prevent default behavior for game control keys
     if (['KeyW', 'KeyA', 'KeyS', 'KeyD', 'Space'].includes(e.code)) {
         e.preventDefault();
@@ -242,4 +248,26 @@ function handleTouchMove(e) {
 function toggleDebug() {
     debugMode = !debugMode;
     document.getElementById('debug-btn').classList.toggle('active');
+    
+    // Update UI to show debug mode is active
+    if (debugMode) {
+        // Show a temporary notification
+        const notification = document.createElement('div');
+        notification.textContent = 'Debug Mode: ON';
+        notification.style.position = 'fixed';
+        notification.style.top = '10px';
+        notification.style.left = '50%';
+        notification.style.transform = 'translateX(-50%)';
+        notification.style.backgroundColor = 'rgba(0, 255, 0, 0.7)';
+        notification.style.color = 'white';
+        notification.style.padding = '10px 20px';
+        notification.style.borderRadius = '5px';
+        notification.style.zIndex = '1000';
+        document.body.appendChild(notification);
+        
+        // Remove notification after 2 seconds
+        setTimeout(() => {
+            document.body.removeChild(notification);
+        }, 2000);
+    }
 }