const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// Basket properties
const basket = {
x: canvas.width / 2 - 50,
y: canvas.height - 50,
width: 100,
height: 20,
speed: 10,
color: "brown",
moveLeft: false,
moveRight: false
};
// Falling objects (apples) array
let apples = [];
const appleRadius = 10;
const appleSpeed = 1;
// Score and game state
let score = 0;
let lives = 3;
let gameOver = false;
// Handle player input
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowLeft") {
basket.moveLeft = true;
} else if (event.key === "ArrowRight") {
basket.moveRight = true;
}
});
document.addEventListener("keyup", (event) => {
if (event.key === "ArrowLeft") {
basket.moveLeft = false;
} else if (event.key === "ArrowRight") {
basket.moveRight = false;
}
});
// Create new apples at random positions
function createApple() {
const x = Math.random() * (canvas.width - 2 * appleRadius) + appleRadius;
apples.push({ x: x, y: -appleRadius });
}
// Update the basket's position
function moveBasket() {
if (basket.moveLeft && basket.x > 0) {
basket.x -= basket.speed;
}
if (basket.moveRight && basket.x + basket.width < canvas.width) {
basket.x += basket.speed;
}
}
// Update the apples' positions
function moveApples() {
for (let i = 0; i < apples.length; i++) {
apples[i].y += appleSpeed;
// Check if apple reaches the bottom (missed)
if (apples[i].y + appleRadius > canvas.height) {
apples.splice(i, 1);
lives--;
if (lives <= 0) {
gameOver = true;
}
}
// Check if apple is caught by the basket
if (apples[i].y + appleRadius > basket.y &&
apples[i].x > basket.x &&
apples[i].x < basket.x + basket.width) {
apples.splice(i, 1);
score++;
}
}
}
// Draw the basket
function drawBasket() {
ctx.fillStyle = basket.color;
ctx.fillRect(basket.x, basket.y, basket.width, basket.height);
}
// Draw the apples
function drawApples() {
ctx.fillStyle = "red";
for (let i = 0; i < apples.length; i++) {
ctx.beginPath();
ctx.arc(apples[i].x, apples[i].y, appleRadius, 0, Math.PI * 2);
ctx.fill();
}
}
// Draw the score and lives
function drawScoreAndLives() {
ctx.fillStyle = "black";
ctx.font = "20px Arial";
ctx.fillText("Score: " + score, 10, 30);
ctx.fillText("Lives: " + lives, canvas.width - 100, 30);
}
// Display game over message
function drawGameOver() {
ctx.fillStyle = "black";
ctx.font = "50px Arial";
ctx.fillText("Game Over", canvas.width / 2 - 150, canvas.height / 2 - 50);
ctx.font = "30px Arial";
ctx.fillText("Final Score: " + score, canvas.width / 2 - 100, canvas.height / 2);
}
// Game loop
function gameLoop() {
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Move and draw the game elements
if (!gameOver) {
moveBasket();
moveApples();
drawBasket();
drawApples();
drawScoreAndLives();
} else {
drawGameOver();
}
// Add a new apple every 50 frames
if (Math.random() < 0.02) {
createApple();
}
// Keep the game running
if (!gameOver) {
requestAnimationFrame(gameLoop);
}
}
// Start the game
gameLoop();
