fix: Optimize player spawn, camera zoom, and performance to reduce lag

js/entities/player.js

@@ -177,9 +177,9 @@ class Player extends Entity {
         const targetOffsetX = this.x - (canvas.width / PIXEL_SIZE / 2);
         const targetOffsetY = this.y - (canvas.height / PIXEL_SIZE / 2);
         
-        // Smoothly move the camera to the target position
+        // Smoothly move the camera to the target position (reduced smoothing factor)
-        worldOffsetX += (targetOffsetX - worldOffsetX) * 0.1;
+        worldOffsetX += (targetOffsetX - worldOffsetX) * 0.05;
-        worldOffsetY += (targetOffsetY - worldOffsetY) * 0.1;
+        worldOffsetY += (targetOffsetY - worldOffsetY) * 0.05;
         
         // Mark that the world has moved for rendering
         worldMoved = true;

js/main.js

@@ -94,6 +94,10 @@ function spawnPlayer() {
     // Hide HUD elements
     document.querySelector('.controls').style.display = 'none';
     
+    // Resize canvas to full screen first
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    
     // Set zoom level to 50%
     PIXEL_SIZE = 2;
     
@@ -105,9 +109,8 @@ function spawnPlayer() {
     worldOffsetY = player.y - (canvas.height / PIXEL_SIZE / 2);
     worldMoved = true;
     
-    // Resize canvas to full screen
+    // Clear chunk cache to force redraw at new zoom level
-    canvas.width = window.innerWidth;
+    chunkCanvasCache.clear();
-    canvas.height = window.innerHeight;
     
     // Remove the event listener for the spawn button to prevent multiple spawns
     document.getElementById('spawn-player-btn').removeEventListener('click', spawnPlayer);
@@ -128,8 +131,10 @@ function simulationLoop(timestamp) {
     // Update physics with timestamp for rate limiting
     updatePhysics(timestamp);
     
-    // Render
+    // Render - skip rendering if FPS is too low to prevent death spiral
+    if (fps > 10 || timestamp % 3 < 1) {
         render();
+    }
     
     // Memory management: Clean up chunk cache for chunks that are far away
     if (timestamp % 5000 < 16) { // Run every ~5 seconds

js/render.js

@@ -9,8 +9,8 @@ function render() {
     // Draw animated sky background
     renderSky();
     
-    // Get visible chunks
+    // Get visible chunks - limit the number of chunks processed per frame
-    const visibleChunks = getVisibleChunks();
+    const visibleChunks = getVisibleChunks().slice(0, 20);
     
     // Render each visible chunk
     for (const { chunkX, chunkY, isVisible } of visibleChunks) {