okayuScroller/js/player.js

class Player {
    constructor(x, y, spriteSheet) {
        this.x = x;
        this.y = y;
        this.width = 24;
        this.height = 34;
        this.speed = 0.25;
        this.direction = 'right';
        
        // Animation
        this.frameIndex = 0;
        this.frameTimer = 0;
        this.idleFrameInterval = 60; // Más lento para idle
        this.walkFrameInterval = 15;  // Más rápido para caminar
        this.isMoving = false;
        
        // Sprite coordinates from the 930x614 sprite sheet
        // Adjust these based on your actual sprite positions
        this.sprites = {
            idle: [
                { x: 370, y: 15, w: 24, h: 34 },
                { x: 341, y: 15, w: 24, h: 34 },
                { x: 404, y: 15, w: 24, h: 34 },
                { x: 341, y: 15, w: 24, h: 34 }
            ],
            walk: [
                { x: 2, y: 16, w: 24, h: 34 },
                { x: 28, y: 16, w: 24, h: 34 },
                { x: 54, y: 16, w: 24, h: 34 },
                { x: 80, y: 16, w: 24, h: 34 },
                { x: 106, y: 16, w: 24, h: 34 },
                { x: 132, y: 16, w: 24, h: 34 }
            ]
        };
        
        this.currentAnimation = 'idle';
        this.spriteSheet = spriteSheet;
    }
    
    update() {
        this.isMoving = false;
        
        // Horizontal movement
        if (input.isMovingLeft()) {
            this.x -= this.speed;
            this.direction = 'left';
            this.isMoving = true;
        }
        if (input.isMovingRight()) {
            this.x += this.speed;
            this.direction = 'right';
            this.isMoving = true;
        }
        
        // Keep player within horizontal bounds
        this.x = Math.max(0, Math.min(320 - this.width, this.x));
        
        // Update animation
        this.updateAnimation();
    }
    
    updateAnimation() {
        const newAnimation = this.isMoving ? 'walk' : 'idle';
        
        if (this.currentAnimation !== newAnimation) {
            this.currentAnimation = newAnimation;
            this.frameIndex = 0;
            this.frameTimer = 0;
        }
        
        this.frameTimer++;
        const frames = this.sprites[this.currentAnimation];
        
        // Usar diferentes velocidades según la animación
        const frameInterval = this.currentAnimation === 'walk' ? this.walkFrameInterval : this.idleFrameInterval;
        
        if (this.frameTimer >= frameInterval) {
            this.frameTimer = 0;
            this.frameIndex = (this.frameIndex + 1) % frames.length;
        }
    }
    
    draw(ctx) {
        const frame = this.sprites[this.currentAnimation][this.frameIndex];
        
        ctx.save();
        
        if (this.direction === 'left') {
            ctx.scale(-1, 1);
            ctx.drawImage(
                this.spriteSheet,
                frame.x, frame.y, frame.w, frame.h,
                -this.x - this.width, this.y,
                this.width, this.height
            );
        } else {
            ctx.drawImage(
                this.spriteSheet,
                frame.x, frame.y, frame.w, frame.h,
                this.x, this.y,
                this.width, this.height
            );
        }
        
        ctx.restore();
    }
}