<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="1200" height="700" style="border:2px solid grey"></canvas>
<div style="display: none;">
<img id="background" width="1200" height="700" src="grass background.jpg">
<img id="dog_bed" width="1200" height="700" src="dog_bed.png">
<img id="corgi_left" width="432" height="108" src="corgi_move_left.png">
<img id="corgi_right" width="432" height="108" src="corgi_move_right.png">
</div>
<script>
let test = function(){console.log('test')};
const c = document.getElementById("canvas");
const ctx = c.getContext("2d");
ctx.fillStyle = "grey";
ctx.fillRect(0, 0, canvas.width, canvas.height);
let physics = {
image: document.getElementById("background"),
G: 0.25,
drag: 0.99,
frameLimit: 8,
frameCount: 0,
ground: 650
};
let beds = {
image: document.getElementById("dog_bed"),
width: 220,
height: 147,
qty: 3
};
let corgi = {
width: 108,
height: 108,
BORDER_WIDTH: 1,
SPACING_WIDTH: 1,
row: 0,
col: 4,
x: (canvas.width/2) - 54,
y: 592,
dx: 4,
dy: 0,
jumpPower: -5,
onGround: true,
doubleJump: false,
keyPresses: {},
spritePosition: function(row, col) {
return {
x: (corgi.BORDER_WIDTH +
col * (corgi.SPACING_WIDTH + corgi.width)
),
y: (corgi.BORDER_WIDTH +
row * (corgi.SPACING_WIDTH + corgi.height)
)
}
},
image: document.getElementById("corgi_left"),
movingLeft: true,
applyGravity: function(){
this.dy += physics.G;
this.dy *= physics.drag;
this.y += this.dy;
if(corgi.y + corgi.height >= physics.ground){
corgi.y = physics.ground - corgi.height;
this.dy = 0;
this.onGround = true;
}else{this.onGround = false};
},
boundaries: function(){
if(corgi.x <= 0){
corgi.x = 0;
};
if(corgi.x + corgi.width >= canvas.width){
corgi.x = canvas.width - corgi.width;
};
},
move: function(){
let moving = false;
//move left
if (corgi.keyPresses.a && !corgi.keyPresses.d){
corgi.x -= corgi.dx;
moving = true;
corgi.movingLeft = true;
corgi.image = document.getElementById("corgi_left");
};
//move right
if (corgi.keyPresses.d && !corgi.keyPresses.a){
corgi.x += corgi.dx;
moving = true;
corgi.movingLeft = false;
corgi.image = document.getElementById("corgi_right");
};
//run
if(corgi.keyPresses[' ']){
corgi.dx = 8; physics.frameLimit = 6;
if(!corgi.onGround){corgi.dx = 6; physics.frameLimit = 5};
}else{corgi.dx = 4; physics.frameLimit = 8};
//jump
if(corgi.keyPresses.w && corgi.onGround){
corgi.dy = corgi.jumpPower;
};
//double jump
if(!corgi.onGround && !corgi.keyPresses.w)
{corgi.doubleJump = true};
if(corgi.keyPresses.w && corgi.doubleJump){
corgi.dy = corgi.jumpPower;
corgi.doubleJump = false;
};
corgi.boundaries();
return moving;
},
animate: function(){
physics.frames++;
corgi.applyGravity();
corgi.y += corgi.dy;
//move corgi
let moving = corgi.move();
//update corgi sprite sheet frame
if(moving){
physics.frameCount++;
if(physics.frameCount >= physics.frameLimit && corgi.onGround){
corgi.col += 1;
physics.frameCount = 0;
};
}
else{
if(!corgi.movingLeft){corgi.col = 3};
if(corgi.movingLeft){corgi.col = 4};
};
if(!corgi.onGround){
if(!corgi.movingLeft){corgi.col = 2};
if(corgi.movingLeft){corgi.col = 1};
};
if(corgi.col === 4){corgi.col = 0};
if(corgi.row === 0){corgi.row = 0};
let position = corgi.spritePosition(corgi.row, corgi.col);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(
physics.image,
0,
0
);
ctx.drawImage(
beds.image,
500,
200
);
ctx.drawImage(
beds.image,
600,
300
);
ctx.drawImage(
beds.image,
700,
400
);
ctx.drawImage(
corgi.image,
position.x,
position.y,
corgi.width,
corgi.height,
corgi.x,
corgi.y,
corgi.width,
corgi.height
);
requestAnimationFrame(corgi.animate);
},
};
window.addEventListener('keydown', keyDownListener);
function keyDownListener(event) {
corgi.keyPresses[event.key] = true;
};
window.addEventListener('keyup', keyUpListener);
function keyUpListener(event) {
corgi.keyPresses[event.key] = false;
};
corgi.animate();
</script>
</body>
</html>
