diff --git a/js/entities/player.js b/js/entities/player.js index 84892e7..9bae22f 100644 --- a/js/entities/player.js +++ b/js/entities/player.js @@ -2,8 +2,8 @@ class Player extends Entity { constructor(x, y, options = {}) { super(ENTITY_TYPES.PLAYER, x, y, { - width: 10, // Adjusted player size to better match 32x32 sprite - height: 20, + width: 8, // Adjusted collision box size + height: 16, ...options }); @@ -124,9 +124,10 @@ class Player extends Entity { ctx.save(); ctx.translate(screenX, screenY); - // Calculate sprite dimensions - make them proportional to collision box - const spriteWidth = this.width * 1.6 * PIXEL_SIZE; // Wider sprite than collision box - const spriteHeight = this.height * 1.6 * PIXEL_SIZE; // Taller sprite than collision box + // Use fixed dimensions based on the actual sprite size + // Maintain the 32x32 aspect ratio + const spriteDisplayWidth = 32 * (PIXEL_SIZE / 2); // Scale based on pixel size + const spriteDisplayHeight = 32 * (PIXEL_SIZE / 2); // Flip horizontally based on direction if (this.direction < 0) { @@ -139,8 +140,8 @@ class Player extends Entity { this.sprite, this.currentFrame * this.frameWidth, 0, this.frameWidth, this.frameHeight, - -spriteWidth / 2, -spriteHeight / 2 + 2, // +2 pixel offset to align feet with ground - spriteWidth, spriteHeight + -spriteDisplayWidth / 2, -spriteDisplayHeight / 2 + 4, // Offset to align feet with ground + spriteDisplayWidth, spriteDisplayHeight ); ctx.restore(); @@ -160,10 +161,10 @@ class Player extends Entity { ctx.strokeStyle = '#ff00ff'; ctx.lineWidth = 1; ctx.strokeRect( - screenX - spriteWidth / 2, - screenY - spriteHeight / 2 + 2, - spriteWidth, - spriteHeight + screenX - spriteDisplayWidth / 2, + screenY - spriteDisplayHeight / 2 + 4, + spriteDisplayWidth, + spriteDisplayHeight ); } } diff --git a/js/main.js b/js/main.js index d6c0b2a..3c77c39 100644 --- a/js/main.js +++ b/js/main.js @@ -102,8 +102,8 @@ function spawnPlayer() { PIXEL_SIZE = 6; // Create player at specified coordinates - // Adjust Y position to account for larger sprite size - player = createEntity(ENTITY_TYPES.PLAYER, 229, 55); + // Position adjusted for proper sprite alignment + player = createEntity(ENTITY_TYPES.PLAYER, 229, 50); // Focus camera on player worldOffsetX = player.x - (canvas.width / PIXEL_SIZE / 2);