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

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