Testing player rotation
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: 200
};
this.angle = 0; // Initialize rotation angle
this.velocity = {
x: 0,
y: 0
};
this.isJumping = false; // Add an "isJumping" flag
// Dimensions of the player
this.width = 30;
this.height = 30;
}
// Method to draw the player on the canvas with rotation
draw() {
c.save(); // Save the current canvas state
c.translate(this.position.x + this.width / 2, this.position.y + this.height / 2); // Translate to the center of the player
c.rotate(this.angle * Math.PI / 180); // Rotate by the current angle (convert to radians)
c.fillStyle = 'red';
c.fillRect(-this.width / 2, -this.height / 2, this.width, this.height); // Draw the player centered at (0, 0)
c.restore(); // Restore the previous canvas state
}
// Method to update the player's position and velocity
update() {
this.draw();
this.position.y += this.velocity.y;
this.position.x += this.velocity.x;
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
this.velocity.y += gravity;
// Adjust the angle when jumping
if (this.velocity.y < 0) {
this.angle = -15; // Change the rotation angle to 90 degrees when jumping
} else {
this.angle = 0; // Reset the angle when not jumping
}
} else {
this.velocity.y = 0;
this.angle = 0; // Reset the angle when on the ground
this.isJumping = false; // Reset the "isJumping" flag when on the ground
}
}
// Method to handle jumping
jump() {
if (!this.isJumping) { // Only allow jumping if not already jumping
this.velocity.y = -20;
this.isJumping = true; // Set the "isJumping" flag to true
}
}
}
// Create a player object
player = new Player();
// Define keyboard keys and their states
let keys = {
right: {
pressed: false
},
left: {
pressed: false
}
};
// Event listener for keydown events
addEventListener('keydown', (event) => {
switch (event.keyCode) {
case 65:
console.log('left');
keys.left.pressed = true;
break;
case 83:
console.log('down');
break;
case 68:
console.log('right');
keys.right.pressed = true;
break;
case 87:
console.log('up');
player.jump(); // Call the jump method when the "up" key is pressed
break;
}
});
// Event listener for keyup events
addEventListener('keyup', (event) => {
switch (event.keyCode) {
case 65:
console.log('left');
keys.left.pressed = false;
break;
case 83:
console.log('down');
break;
case 68:
console.log('right');
keys.right.pressed = false;
break;
case 87:
console.log('up');
if (player.isJumping) { // Allow a single jump while in the air
player.velocity.y = -20;
}
break;
}
});
// Animation function to continuously update and render the canvas
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, canvas.width, canvas.height);
player.update();
if (keys.right.pressed && player.position.x + player.width <= canvas.width - 50) {
player.velocity.x = 15;
} else if (keys.left.pressed && player.position.x >= 50) {
player.velocity.x = -15;
} else {
player.velocity.x = 0;
}
}
animate();
</script>
</body>
</html>
<!DOCTYPE html>
Specific Hacks - Pick One
- Try to stop the player from double jumping
- Make the player rotate when it jumps (like in the game Geometry Dash)
Open Ended Hack
- Make the player a sprite animation