Testing death pits
Testing
Overview | Player | Platform | Tube | Block | Goomba | Background |
%%html
<!DOCTYPE html>
<html>
<head>
<style>
#canvas {
margin: 0;
border: 1px solid white;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// Create empty canvas
let canvas = document.getElementById('canvas');
let c = canvas.getContext('2d');
// Set the canvas dimensions
canvas.width = 650;
canvas.height = 400;
// Define gravity value
let gravity = 1.5;
// Define the Player class
class Player {
constructor() {
// Initial position and velocity of the player
this.position = {
x: 100,
y: 100
};
this.velocity = {
x: 0,
y: 0
};
// Dimensions of the player
this.width = 30;
this.height = 30;
}
// Method to draw the player on the canvas
draw() {
c.fillStyle = 'red';
c.fillRect(this.position.x, this.position.y, this.width, this.height);
}
// Method to update the player's position and velocity
update() {
this.draw();
this.position.y += this.velocity.y;
this.position.x += this.velocity.x;
// Apply gravity if the player is not at the bottom
if (this.position.y + this.height + this.velocity.y <= canvas.height)
this.velocity.y += gravity;
else
this.velocity.y = 0;
}
}
//--
// NEW CODE - PLATFORM
//--
// Define the Platform class
class Platform {
constructor() {
// Initial position of the platform
this.position = {
x: 0,
y: 300
}
this.width = 650;
this.height = 10;
}
// Method to draw the platform on the canvas
draw() {
c.fillStyle = 'blue';
c.fillRect(this.position.x, this.position.y, this.width, this.height);
}
}
// Create a platform object
let platform = new Platform();
// Create a player object
let player = new Player();
// Define keyboard keys and their states
let keys = {
right: {
pressed: false
},
left: {
pressed: false
},
}
// Define the death pit
let deathPit = {
x: 250,
y: 295,
width: 150,
height: 150,
};
// Animation function to continuously update and render the canvas
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, canvas.width, canvas.height);
//--
// NEW CODE - DRAW PLATFORM
//--
platform.draw();
//--
// NEW CODE - DRAW DEATH PIT
//--
c.fillStyle = 'black';
c.fillRect(deathPit.x, deathPit.y, deathPit.width, deathPit.height);
// Control player's horizontal movement
if (keys.right.pressed) {
player.velocity.x = 5;
} else if (keys.left.pressed) {
player.velocity.x = -5;
} else {
player.velocity.x = 0;
}
//--
// NEW CODE - PLATFORM COLLISIONS
//--
// Check for collision between player and platform
if (
player.position.y + player.height <= platform.position.y &&
player.position.y + player.height + player.velocity.y >= platform.position.y &&
player.position.x + player.width >= platform.position.x &&
player.position.x <= platform.position.x + platform.width
) {
player.velocity.y = 0;
// Place the player on the platform
player.position.y = platform.position.y - player.height;
} else {
// Apply gravity
player.velocity.y += gravity;
}
// Check for collision between player and death pit
if (
player.position.x + player.width > deathPit.x &&
player.position.x < deathPit.x + deathPit.width &&
player.position.y + player.height > deathPit.y &&
player.position.y < deathPit.y + deathPit.height
) {
// Reset player position
player.position.x = 100;
player.position.y = 100;
}
// Update the player's position
player.update();
}
// Start the animation loop
animate();
// Event listener for keydown events
addEventListener('keydown', ({ keyCode }) => {
switch (keyCode) {
case 65:
keys.left.pressed = true;
break;
case 68:
keys.right.pressed = true;
break;
case 87:
// Check if the player is on the platform before allowing jumps
if (player.position.y + player.height === platform.position.y) {
player.velocity.y = -20;
}
break;
}
});
// Event listener for keyup events
addEventListener('keyup', ({ keyCode }) => {
switch (keyCode) {
case 65:
keys.left.pressed = false;
break;
case 68:
keys.right.pressed = false;
break;
}
});
</script>
</body>
</html>
<!DOCTYPE html>
Specific Hack
- Add creative “death pits” (gap between platforms) that restart game if fallen through
Open Ended Hack
- Experiment with different terrains (ice could cause sliding)