Working on birthday gift <3

game.js

const cvs = document.getElementById("pug");
const ctx = cvs.getContext("2d");


let frames = 0;


const sprite = new Image();
sprite.src = "img/sprite.png";


const bg = {
    sX: 0,
    sY: 0,

    w: 275,
    h: 226,

    x: 0, 
    y: cvs.height - 226, //y: cvs.height - this.h,

    draw: function () {
        ctx.drawImage(sprite,
            this.sX,
            this.sY,

            this.w,
            this.h,

            this.x,
            this.y,
            this.w,

            this.h);

        ctx.drawImage(sprite,
            this.sX,
            this.sY,

            this.w,
            this.h,

            this.x + this.w,
            this.y,
            this.w,

            this.h);
    }

}

const fg = {
    sX: 276,
    sY: 0,

    w: 224,
    h: 112,

    x: 0,
    y: cvs.height - 112, //y: cvs.height - this.h,

    draw: function () {
        ctx.drawImage(sprite,
            this.sX,
            this.sY,

            this.w,
            this.h,

            this.x,
            this.y,
            this.w,

            this.h);

        ctx.drawImage(sprite,
            this.sX,
            this.sY,

            this.w,
            this.h,

            this.x + this.w,
            this.y,
            this.w,

            this.h);
    }
}

const pug = {
    animation: [
        { sX: 0  , sY: 0},
        { sX: 33  , sY: 0 },
        { sX: 65  , sY: 0 },
        { sX: 97  , sY: 0 },
        { sX: 0  , sY: 33 },
        { sX: 33  , sY: 33 },
		],
    x: 50,
    y: 150,

    w: 32,
    h: 32,

    frame: 0,

    draw: function () {
        let pug = this.animation[this.frame];

        ctx.drawImage(sprite,
            pug.sX,
            pug.sY,

            this.w,
            this.h,

            this.x,
            this.y,
            this.w,

            this.h);
    }, 
	
	update: function () {
		this.period = 10;
		
		this.frame += frames % this.period == 0 ? 1 : 0;
		this.frame = this.frame % this.animation.length;
	}
}

function draw() {
    ctx.fillStyle = "#70c5ce";
    ctx.fillRect(0, 0, cvs.width, cvs.height);

    bg.draw();
    fg.draw();
    pug.draw();
}

function update() {
	pug.update();
}

function loop() {
    update();
    draw();
    frames++;

    requestAnimationFrame(loop)
}

loop();