File size: 2,254 Bytes
e762863 e2a6404 c68ac8c e2a6404 e762863 e2a6404 c68ac8c e2a6404 c68ac8c 12e936c c68ac8c 1936e7d c68ac8c 12e936c c68ac8c 12e936c c68ac8c 12e936c c68ac8c 12e936c c68ac8c 12e936c c68ac8c 12e936c c68ac8c 12e936c e762863 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Futuristic Falling Ball Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="game-container">
<div class="falling-ball" id="ball"></div>
<div class="catcher" id="catcher"></div>
<div id="score">Score: 0</div>
</div>
<script>
const ball = document.getElementById("ball");
const catcher = document.getElementById("catcher");
const scoreDisplay = document.getElementById("score");
let score = 0;
let isGameOver = false;
function startFalling() {
let ballPosition = 0;
const ballSpeed = 3;
const catcherPosition = catcher.offsetLeft;
function fallBall() {
if (isGameOver) return;
ballPosition += ballSpeed;
ball.style.top = ballPosition + "px";
if (ballPosition >= window.innerHeight - 100) {
// Check if the ball is caught
if (ballPosition >= window.innerHeight - 120 &&
ballPosition <= window.innerHeight - 100 &&
(catcherPosition <= ball.offsetLeft &&
catcherPosition + catcher.offsetWidth >= ball.offsetLeft + ball.offsetWidth)) {
score++;
scoreDisplay.textContent = "Score: " + score;
}
// Reset ball position after falling
ballPosition = 0;
ball.style.left = Math.random() * (window.innerWidth - 50) + "px";
}
if (!isGameOver) {
requestAnimationFrame(fallBall);
}
}
fallBall();
}
function moveCatcher(event) {
const catcherWidth = catcher.offsetWidth;
if (event.clientX >= 0 && event.clientX <= window.innerWidth - catcherWidth) {
catcher.style.left = event.clientX - catcherWidth / 2 + "px";
}
}
document.addEventListener("mousemove", moveCatcher);
function startGame() {
score = 0;
scoreDisplay.textContent = "Score: " + score;
isGameOver = false;
ball.style.top = "0px";
ball.style.left = Math.random() * (window.innerWidth - 50) + "px";
startFalling();
}
startGame();
</script>
</body>
</html> |