feat: Implement player block breaking with 10-pixel range and inventory collection

js/render.js

@@ -175,16 +175,42 @@ function displayDebugInfo() {
 
 // Render breaking indicator for player
 function renderBreakingIndicator(ctx, offsetX, offsetY) {
-    // Calculate position in front of player
-    const breakX = Math.floor(player.x + (player.direction * player.breakingRange));
-    const breakY = Math.floor(player.y);
+    // Get mouse position in world coordinates
+    const worldX = Math.floor(currentMouseX / PIXEL_SIZE) + worldOffsetX;
+    const worldY = Math.floor(currentMouseY / PIXEL_SIZE) + worldOffsetY;
+    
+    // Calculate distance from player to target block
+    const distance = Math.sqrt(
+        Math.pow(worldX - player.x, 2) + 
+        Math.pow(worldY - player.y, 2)
+    );
     
     // Convert to screen coordinates
-    const screenX = (breakX - offsetX) * PIXEL_SIZE;
-    const screenY = (breakY - offsetY) * PIXEL_SIZE;
+    const screenX = (worldX - offsetX) * PIXEL_SIZE;
+    const screenY = (worldY - offsetY) * PIXEL_SIZE;
+    const playerScreenX = (player.x - offsetX) * PIXEL_SIZE;
+    const playerScreenY = (player.y - offsetY) * PIXEL_SIZE;
+    
+    // Draw breaking range circle
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.arc(
+        playerScreenX, 
+        playerScreenY, 
+        player.breakingRange * PIXEL_SIZE, 
+        0, 
+        Math.PI * 2
+    );
+    ctx.stroke();
+    
+    // Draw target indicator
+    if (distance <= player.breakingRange) {
+        ctx.strokeStyle = '#ff0000';
+    } else {
+        ctx.strokeStyle = '#888888'; // Gray when out of range
+    }
     
-    // Draw breaking indicator
-    ctx.strokeStyle = '#ff0000';
     ctx.lineWidth = 2;
     ctx.strokeRect(
         screenX - PIXEL_SIZE/2, 
@@ -193,9 +219,9 @@ function renderBreakingIndicator(ctx, offsetX, offsetY) {
         PIXEL_SIZE
     );
     
-    // Draw line from player to breaking point
+    // Draw line from player to target point
     ctx.beginPath();
-    ctx.moveTo((player.x - offsetX) * PIXEL_SIZE, (player.y - offsetY) * PIXEL_SIZE);
+    ctx.moveTo(playerScreenX, playerScreenY);
     ctx.lineTo(screenX, screenY);
     ctx.stroke();
 }