// A simple JavaScript game: Catch the Falling Object
// Create a canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
canvas.width = 800;
canvas.height = 600;
// Define the player
const player = {
x: canvas.width / 2 - 25,
y: canvas.height - 50,
width: 50,
height: 10,
color: 'blue',
speed: 10
};
// Define the falling object
let object = {
x: Math.random() * (canvas.width - 20),
y: 0,
width: 20,
height: 20,
color: 'red',
speed: 5
};
let score = 0;
let gameOver = false;
// Handle keyboard input
const keys = {};
window.addEventListener('keydown', (e) => {
keys[e.key] = true;
});
window.addEventListener('keyup', (e) => {
keys[e.key] = false;
});
// Game loop
function update() {
if (keys['ArrowLeft'] && player.x > 0) {
player.x -= player.speed;
}
if (keys['ArrowRight'] && player.x + player.width < canvas.width) {
player.x += player.speed;
}
object.y += object.speed;
// Check for collision
if (
object.y + object.height > player.y &&
object.x < player.x + player.width &&
object.x + object.width > player.x
) {
score++;
resetObject();
}
// Check if object falls out of bounds
if (object.y > canvas.height) {
gameOver = true;
}
}
function resetObject() {
object.x = Math.random() * (canvas.width - object.width);
object.y = 0;
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw player
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
// Draw object
ctx.fillStyle = object.color;
ctx.fillRect(object.x, object.y, object.width, object.height);
// Draw score
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText(`Score: ${score}`, 10, 30);
// Game over text
if (gameOver) {
ctx.fillStyle = 'red';
ctx.font = '50px Arial';
ctx.fillText('Game Over!', canvas.width / 2 - 150, canvas.height / 2);
}
}
function gameLoop() {
if (!gameOver) {
update();
draw();
requestAnimationFrame(gameLoop);
}
}
gameLoop();
The web site of cookingwithleo
Welcome to my Website!
This is a paragraph! Here's how you make a link: Neocities.
Here's how you can make bold and italic text.
Here's how you can add an image:
Here's how to make a list:
- First thing
- Second thing
- Third thing
To learn more HTML/CSS, check out these tutorials!