284 lines
10 KiB
JavaScript
284 lines
10 KiB
JavaScript
// Player entity class
|
|
class Player extends Entity {
|
|
constructor(x, y, options = {}) {
|
|
super(ENTITY_TYPES.PLAYER, x, y, {
|
|
width: 3, // 50% smaller collision box width
|
|
height: 6, // 50% smaller collision box height
|
|
...options
|
|
});
|
|
|
|
// Load player sprite
|
|
this.sprite = new Image();
|
|
this.sprite.src = 'sprites/player.png';
|
|
|
|
// Movement properties
|
|
this.moveSpeed = 0.03;
|
|
this.jumpForce = -0.2;
|
|
this.gravity = 0.02;
|
|
this.maxVelocity = 0.5;
|
|
this.friction = 0.9;
|
|
|
|
// State tracking
|
|
this.isJumping = false;
|
|
this.direction = 1; // 1 = right, -1 = left
|
|
this.lastUpdate = performance.now();
|
|
this.lastDirection = 1; // Track last direction to prevent unnecessary flipping
|
|
this.isClimbing = false; // Track climbing state
|
|
|
|
// Animation properties
|
|
this.frameWidth = 32;
|
|
this.frameHeight = 30;
|
|
this.frameCount = 4;
|
|
this.currentFrame = 0;
|
|
this.animationSpeed = 150; // ms per frame
|
|
this.lastFrameUpdate = 0;
|
|
this.isMoving = false;
|
|
this.animationTimer = 0; // Consistent timer for animation
|
|
}
|
|
|
|
update() {
|
|
const now = performance.now();
|
|
const deltaTime = Math.min(50, now - this.lastUpdate);
|
|
this.lastUpdate = now;
|
|
|
|
// Apply gravity
|
|
this.vy += this.gravity;
|
|
|
|
// Cap velocity
|
|
if (this.vx > this.maxVelocity) this.vx = this.maxVelocity;
|
|
if (this.vx < -this.maxVelocity) this.vx = -this.maxVelocity;
|
|
if (this.vy > this.maxVelocity * 2) this.vy = this.maxVelocity * 2;
|
|
|
|
// Apply friction when not actively moving
|
|
if (!this.isMoving) {
|
|
this.vx *= this.friction;
|
|
}
|
|
|
|
// Calculate new position
|
|
let newX = this.x + this.vx * deltaTime;
|
|
let newY = this.y + this.vy * deltaTime;
|
|
|
|
// Check for collisions
|
|
const collisionResult = this.checkCollisions(newX, newY);
|
|
|
|
if (collisionResult.collision) {
|
|
if (collisionResult.horizontal) {
|
|
// Try to climb up if there's a 1-pixel step
|
|
if (this.tryClimbing(newX, newY)) {
|
|
// Successfully climbed, continue with adjusted position
|
|
newY -= 1; // Move up one pixel to climb
|
|
} else {
|
|
// Can't climb, stop horizontal movement
|
|
newX = this.x;
|
|
this.vx = 0;
|
|
}
|
|
}
|
|
|
|
if (collisionResult.vertical) {
|
|
if (this.vy > 0) {
|
|
this.isJumping = false;
|
|
}
|
|
newY = this.y;
|
|
this.vy = 0;
|
|
}
|
|
}
|
|
|
|
// Update position
|
|
this.x = newX;
|
|
this.y = newY;
|
|
|
|
// Update animation
|
|
this.updateAnimation(deltaTime);
|
|
|
|
// Center camera on player
|
|
this.centerCamera();
|
|
|
|
return true;
|
|
}
|
|
|
|
updateAnimation(deltaTime) {
|
|
// Update animation timer consistently
|
|
this.animationTimer += deltaTime;
|
|
|
|
// Only update direction when it actually changes to prevent flipping
|
|
if (Math.abs(this.vx) > 0.005) {
|
|
const newDirection = this.vx > 0 ? 1 : -1;
|
|
if (newDirection !== this.lastDirection) {
|
|
this.direction = newDirection;
|
|
this.lastDirection = newDirection;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
render(ctx, offsetX, offsetY) {
|
|
const screenX = (this.x - offsetX) * PIXEL_SIZE;
|
|
const screenY = (this.y - offsetY) * PIXEL_SIZE;
|
|
|
|
if (this.sprite && this.sprite.complete) {
|
|
// Set pixelated rendering (nearest neighbor)
|
|
ctx.imageSmoothingEnabled = false;
|
|
|
|
ctx.save();
|
|
ctx.translate(screenX, screenY);
|
|
|
|
// Use 50% smaller dimensions for the sprite
|
|
const spriteDisplayWidth = 12 * (PIXEL_SIZE / 2); // 50% smaller sprite
|
|
const spriteDisplayHeight = 12 * (PIXEL_SIZE / 2); // 50% smaller sprite
|
|
|
|
// Flip horizontally based on direction
|
|
if (this.direction < 0) {
|
|
ctx.scale(-1, 1);
|
|
}
|
|
|
|
// Draw the correct sprite frame
|
|
// Center the sprite on the entity position, with y-offset to align feet with collision box
|
|
// Stretch the sprite vertically to match the collision box height
|
|
ctx.drawImage(
|
|
this.sprite,
|
|
this.currentFrame * this.frameWidth, 0,
|
|
this.frameWidth, this.frameHeight,
|
|
-spriteDisplayWidth / 2, -spriteDisplayHeight / 2, // Remove the negative offset that caused levitation
|
|
spriteDisplayWidth, spriteDisplayHeight * 1.2 // Stretch sprite vertically by 20% to match collision box
|
|
);
|
|
|
|
ctx.restore();
|
|
// Reset image smoothing for other rendering
|
|
ctx.imageSmoothingEnabled = true;
|
|
|
|
// Draw collision box in debug mode
|
|
if (debugMode) {
|
|
ctx.strokeStyle = '#00ff00';
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeRect(
|
|
screenX - this.width * PIXEL_SIZE / 2,
|
|
screenY - this.height * PIXEL_SIZE / 2,
|
|
this.width * PIXEL_SIZE,
|
|
this.height * PIXEL_SIZE
|
|
);
|
|
|
|
// Also draw sprite boundary in debug mode
|
|
ctx.strokeStyle = '#ff00ff';
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeRect(
|
|
screenX - spriteDisplayWidth / 2,
|
|
screenY - spriteDisplayHeight / 2, // Match the updated sprite drawing position
|
|
spriteDisplayWidth,
|
|
spriteDisplayHeight * 1.2 // Match the stretched sprite height
|
|
);
|
|
|
|
// 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();
|
|
}
|
|
}
|
|
}
|
|
|
|
moveLeft() {
|
|
this.vx = -this.moveSpeed;
|
|
this.direction = -1;
|
|
this.isMoving = true;
|
|
}
|
|
|
|
moveRight() {
|
|
this.vx = this.moveSpeed;
|
|
this.direction = 1;
|
|
this.isMoving = true;
|
|
}
|
|
|
|
moveUp() {
|
|
this.vy = -this.moveSpeed;
|
|
this.isMoving = true;
|
|
}
|
|
|
|
moveDown() {
|
|
this.vy = this.moveSpeed;
|
|
this.isMoving = true;
|
|
}
|
|
|
|
stopMoving() {
|
|
this.isMoving = false;
|
|
}
|
|
|
|
jump() {
|
|
if (!this.isJumping) {
|
|
this.vy = this.jumpForce;
|
|
this.isJumping = true;
|
|
}
|
|
}
|
|
|
|
// Try to climb up a small step
|
|
tryClimbing(newX, newY) {
|
|
const halfWidth = this.width / 2;
|
|
|
|
// Check if there's a solid pixel in front of the player
|
|
const frontX = newX + (this.direction * halfWidth);
|
|
const frontY = newY;
|
|
|
|
// Check if there's a solid pixel at the current level
|
|
if (this.isPixelSolid(frontX, frontY)) {
|
|
// Check if there's empty space one pixel above
|
|
if (!this.isPixelSolid(frontX, frontY - 1) &&
|
|
!this.isPixelSolid(this.x, this.y - 1)) {
|
|
|
|
// Check if there's ground to stand on after climbing
|
|
if (this.isPixelSolid(frontX, frontY + 1)) {
|
|
this.isClimbing = true;
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
|
|
this.isClimbing = false;
|
|
return false;
|
|
}
|
|
|
|
centerCamera() {
|
|
// Get current camera center in world coordinates
|
|
const cameraWidth = canvas.width / PIXEL_SIZE;
|
|
const cameraHeight = canvas.height / PIXEL_SIZE;
|
|
const cameraCenterX = worldOffsetX + cameraWidth / 2;
|
|
const cameraCenterY = worldOffsetY + cameraHeight / 2;
|
|
|
|
// Calculate distance from player to camera center
|
|
const distanceX = Math.abs(this.x - cameraCenterX);
|
|
const distanceY = Math.abs(this.y - cameraCenterY);
|
|
|
|
// Define thresholds for camera movement (percentage of screen size)
|
|
const thresholdX = cameraWidth * 0.2; // Move when player is 30% away from center
|
|
const thresholdY = cameraHeight * 0.2;
|
|
|
|
// Only move camera when player gets close to the edge of current view
|
|
let needsUpdate = false;
|
|
|
|
if (distanceX > thresholdX) {
|
|
// Calculate target position with chunk-based snapping
|
|
const chunkSize = CHUNK_SIZE;
|
|
const playerChunkX = Math.floor(this.x / chunkSize);
|
|
const targetX = this.x - (canvas.width / PIXEL_SIZE / 2);
|
|
|
|
// Smooth transition to the target position
|
|
worldOffsetX += (targetX - worldOffsetX) * 0.2;
|
|
needsUpdate = true;
|
|
}
|
|
|
|
if (distanceY > thresholdY) {
|
|
// Calculate target position with chunk-based snapping
|
|
const chunkSize = CHUNK_SIZE;
|
|
const playerChunkY = Math.floor(this.y / chunkSize);
|
|
const targetY = this.y - (canvas.height / PIXEL_SIZE / 2);
|
|
|
|
// Smooth transition to the target position
|
|
worldOffsetY += (targetY - worldOffsetY) * 0.1;
|
|
needsUpdate = true;
|
|
}
|
|
|
|
// Only mark world as moved if we actually updated the camera
|
|
if (needsUpdate) {
|
|
worldMoved = true;
|
|
}
|
|
}
|
|
}
|