Lopez Sprite Animation for OOP • 2 min read

Down Walk
Right Walk
Left Walk
Up Walk

%%html

    class Dog {
        constructor() {
            this.image = document.getElementById("dogSprite");
            this.image.src = "/DeanPhillips24/images/gameimages/lopezspritesheet3.png";
            this.image.onload = () => {
                this.x = 0;
                this.y = 0;
                this.minFrame = 0;
                this.maxFrame = FRAME_LIMIT;
                this.frameX = 0;
                this.frameY = 0;
                animate();
            };
        }

        // draw dog object
        draw(context) {
            context.drawImage(
                this.image,
                this.frameX * SPRITE_WIDTH,
                this.frameY * SPRITE_HEIGHT,
                SPRITE_WIDTH,
                SPRITE_HEIGHT,
                this.x,
                this.y,
                canvas.width,
                canvas.height
            );
        }

        // update frameX of object
        update() {
            if (this.frameX < this.maxFrame) {
                this.frameX++;
            } else {
                this.frameX = 0;
            }
        }
    }

    // dog object
    const dog = new Dog();

    // update frameY of dog object, action from idle, bark, walk radio control
    const controls = document.getElementById('controls');
    controls.addEventListener('click', function (event) {
        if (event.target.tagName === 'INPUT') {
            const selectedAnimation = event.target.id;
            switch (selectedAnimation) {
            case 'DownWalk':
            dog.frameY = 0;
            break;
            case 'RightWalk':
            dog.frameY = 2;
            break;
            case 'LeftWalk':
            dog.frameY = 1;
            break;
            case 'UpWalk':
            dog.frameY = 3;
            break;
            default:
            break;
            }
        }
    });
}); </script>