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

js/elements/physics_objects.js

@@ -203,6 +203,26 @@ class PhysicsObject {
         ctx.rotate(this.rotation);
         ctx.fillStyle = this.color;
         
+        // Draw collision box in debug mode
+        if (debugMode) {
+            ctx.strokeStyle = '#ff0000';
+            ctx.lineWidth = 1;
+            
+            // Draw a circle for the collision radius
+            ctx.beginPath();
+            ctx.arc(0, 0, this.size * PIXEL_SIZE / 2, 0, Math.PI * 2);
+            ctx.stroke();
+            
+            // Draw a dot at the center
+            ctx.fillStyle = '#ffff00';
+            ctx.beginPath();
+            ctx.arc(0, 0, 2, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Restore original fill color
+            ctx.fillStyle = this.color;
+        }
+        
         if (this.type === SQUARE) {
             const halfSize = this.size / 2 * PIXEL_SIZE;
             ctx.fillRect(-halfSize, -halfSize, this.size * PIXEL_SIZE, this.size * PIXEL_SIZE);

js/entities/entity.js

@@ -62,6 +62,24 @@ class Entity {
             );
         }
         
+        // Draw collision box in debug mode
+        if (debugMode) {
+            ctx.strokeStyle = '#00ff00';
+            ctx.lineWidth = 1;
+            ctx.strokeRect(
+                -this.width/2 * PIXEL_SIZE, 
+                -this.height/2 * PIXEL_SIZE, 
+                this.width * PIXEL_SIZE, 
+                this.height * PIXEL_SIZE
+            );
+            
+            // Draw a dot at the entity's center
+            ctx.fillStyle = '#ffff00';
+            ctx.beginPath();
+            ctx.arc(0, 0, 2, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        
         ctx.restore();
     }
 

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);
+    }
 }

js/render.js

@@ -12,6 +12,11 @@ function render() {
     // Draw animated sky background
     renderSky();
     
+    // Display FPS in debug mode
+    if (debugMode) {
+        displayDebugInfo();
+    }
+    
     // Get visible chunks - limit the number of chunks processed per frame
     const visibleChunks = getVisibleChunks().slice(0, 20);
     
@@ -138,6 +143,31 @@ function renderSky() {
     ctx.fillRect(0, canvas.height * 0.4, canvas.width, canvas.height * 0.2);
 }
 
+// Display debug information
+function displayDebugInfo() {
+    ctx.save();
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+    ctx.fillRect(10, 10, 200, 80);
+    
+    ctx.font = '14px monospace';
+    ctx.fillStyle = 'white';
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+    
+    // Display FPS
+    ctx.fillText(`FPS: ${fps}`, 20, 20);
+    
+    // Display world coordinates
+    ctx.fillText(`World: ${Math.floor(worldOffsetX)}, ${Math.floor(worldOffsetY)}`, 20, 40);
+    
+    // Display chunk coordinates
+    const chunkX = Math.floor(worldOffsetX / CHUNK_SIZE);
+    const chunkY = Math.floor(worldOffsetY / CHUNK_SIZE);
+    ctx.fillText(`Chunk: ${chunkX}, ${chunkY}`, 20, 60);
+    
+    ctx.restore();
+}
+
 // Render a chunk to an offscreen canvas and cache it
 function renderChunkToCache(chunkX, chunkY, key) {
     const chunk = chunks.get(key);