fix: Align player collision box and sprite rendering precisely

js/entities/player.js

@@ -2,8 +2,8 @@
 class Player extends Entity {
     constructor(x, y, options = {}) {
         super(ENTITY_TYPES.PLAYER, x, y, {
-            width: 8,  // Adjusted collision box size
-            height: 16,
+            width: 6,  // Narrower collision box to match sprite
+            height: 12, // Shorter collision box to match sprite
             ...options
         });
         
@@ -138,12 +138,12 @@ class Player extends Entity {
             }
             
             // Draw the correct sprite frame
-            // Center the sprite on the entity position, with slight y-offset to align feet
+            // Center the sprite on the entity position, with y-offset to align feet with collision box
             ctx.drawImage(
                 this.sprite,
                 this.currentFrame * this.frameWidth, 0,
                 this.frameWidth, this.frameHeight,
-                -spriteDisplayWidth / 2, -spriteDisplayHeight / 2 + 2, // Reduced offset for smaller sprite
+                -spriteDisplayWidth / 2, -spriteDisplayHeight / 2 - 2, // Adjusted y-offset to align with collision box
                 spriteDisplayWidth, spriteDisplayHeight
             );
             
@@ -167,10 +167,16 @@ class Player extends Entity {
                 ctx.lineWidth = 1;
                 ctx.strokeRect(
                     screenX - spriteDisplayWidth / 2,
-                    screenY - spriteDisplayHeight / 2 + 4,
+                    screenY - spriteDisplayHeight / 2 - 2, // Match the sprite drawing offset
                     spriteDisplayWidth,
                     spriteDisplayHeight
                 );
+                
+                // Draw a dot at the entity's exact position
+                ctx.fillStyle = '#ffff00';
+                ctx.beginPath();
+                ctx.arc(screenX, screenY, 2, 0, Math.PI * 2);
+                ctx.fill();
             }
         }
     }