fix: Align player collision box and sprite rendering precisely

js/entities/entity.js

@@ -81,10 +81,13 @@ class Entity {
         const numBottomPoints = 5;
         let groundCollision = false;
         
+        // For player entity, adjust the collision detection to match sprite feet position
+        const yOffset = this.type === ENTITY_TYPES.PLAYER ? 2 : 0;
+        
         for (let i = 0; i < numBottomPoints; i++) {
             const ratio = i / (numBottomPoints - 1);
             const bottomX = newX - halfWidth + (2 * halfWidth * ratio);
-            const bottomY = newY + halfHeight;
+            const bottomY = newY + halfHeight + yOffset;
             
             if (this.isPixelSolid(bottomX, bottomY)) {
                 groundCollision = true;
@@ -99,8 +102,11 @@ class Entity {
         }
         
         // Check side points for horizontal collision
-        const leftMiddle = { x: newX - halfWidth, y: newY };
+        // For player entity, adjust the collision detection to match sprite position
-        const rightMiddle = { x: newX + halfWidth, y: newY };
+        const yAdjust = this.type === ENTITY_TYPES.PLAYER ? -1 : 0;
+        
+        const leftMiddle = { x: newX - halfWidth, y: newY + yAdjust };
+        const rightMiddle = { x: newX + halfWidth, y: newY + yAdjust };
         
         if (this.isPixelSolid(leftMiddle.x, leftMiddle.y)) {
             result.collision = true;
@@ -113,7 +119,7 @@ class Entity {
         }
         
         // Check top for ceiling collision
-        const topMiddle = { x: newX, y: newY - halfHeight };
+        const topMiddle = { x: newX, y: newY - halfHeight + (this.type === ENTITY_TYPES.PLAYER ? -2 : 0) };
         if (this.isPixelSolid(topMiddle.x, topMiddle.y)) {
             result.collision = true;
             result.vertical = true;

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
+            width: 6,  // Narrower collision box to match sprite
-            height: 16,
+            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();
             }
         }
     }