<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catch the Falling Objects Game</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif; background: #2c3e50; }
#gameContainer { position: relative; width: 400px; height: 600px; background: #ecf0f1; border: 2px solid #34495e; overflow: hidden; }
#basket { position: absolute; width: 60px; height: 30px; bottom: 10px; background: #e74c3c; border-radius: 10px; }
.fallingObject { position: absolute; width: 30px; height: 30px; background: #f1c40f; border-radius: 50%; }
#scoreDisplay { position: absolute; top: 10px; left: 10px; color: #34495e; font-size: 18px; }
#gameOver { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #34495e; font-size: 24px; text-align: center; }
#gameOver button { padding: 10px 20px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; }
#gameOver button:hover { background: #2980b9; }
</style>
</head>
<body>
<div id="gameContainer">
<div id="basket"></div>
<div id="scoreDisplay">Score: 0</div>
<div id="gameOver">
<p>Game Over!</p>
<p>Your Score: <span id="finalScore">0</span></p>
<button onclick="startGame()">Play Again</button>
</div>
</div>
<script>
const basket = document.getElementById("basket");
const gameContainer = document.getElementById("gameContainer");
const scoreDisplay = document.getElementById("scoreDisplay");
const gameOverScreen = document.getElementById("gameOver");
const finalScore = document.getElementById("finalScore");
let basketPosition = gameContainer.offsetWidth / 2 - basket.offsetWidth / 2;
let score = 0;
let fallingObjects = [];
let gameInterval;
let spawnInterval;
let gameRunning = false;
function startGame() {
gameOverScreen.style.display = "none";
score = 0;
updateScore();
fallingObjects.forEach(obj => gameContainer.removeChild(obj));
fallingObjects = [];
gameRunning = true;
basket.style.left = `${basketPosition}px`;
gameInterval = setInterval(updateGame, 20);
spawnInterval = setInterval(createFallingObject, 1000);
}
function endGame() {
gameRunning = false;
clearInterval(gameInterval);
clearInterval(spawnInterval);
gameOverScreen.style.display = "block";
finalScore.innerText = score;
}
function updateScore() {
scoreDisplay.innerText = `Score: ${score}`;
}
function createFallingObject() {
const obj = document.createElement("div");
obj.classList.add("fallingObject");
obj.style.left = `${Math.random() * (gameContainer.offsetWidth - 30)}px`;
obj.style.top = "0px";
gameContainer.appendChild(obj);
fallingObjects.push(obj);
}
function updateGame() {
fallingObjects.forEach((obj, index) => {
obj.style.top = `${obj.offsetTop + 5}px`;
if (obj.offsetTop + obj.offsetHeight > gameContainer.offsetHeight) {
endGame();
}
const basketRect = basket.getBoundingClientRect();
const objRect = obj.getBoundingClientRect();
if (
basketRect.left < objRect.left + objRect.width &&
basketRect.left + basketRect.width > objRect.left &&
basketRect.top < objRect.top + objRect.height &&
basketRect.height + basketRect.top > objRect.top
) {
gameContainer.removeChild(obj);
fallingObjects.splice(index, 1);
score++;
updateScore();
}
});
}
document.addEventListener("keydown", (e) => {
if (gameRunning) {
if (e.key === "ArrowLeft" && basketPosition > 0) {
basketPosition -= 20;
} else if (e.key === "ArrowRight" && basketPosition < gameContainer.offsetWidth - basket.offsetWidth) {
basketPosition += 20;
}
basket.style.left = `${basketPosition}px`;
}
});
startGame();
</script>
</body>
</html>
