File size: 2,462 Bytes
e762863 e2a6404 c68ac8c e2a6404 e762863 e2a6404 c68ac8c e2a6404 c68ac8c 12e936c c68ac8c 1936e7d a1b39e1 c68ac8c a1b39e1 c68ac8c a1b39e1 c68ac8c a1b39e1 c68ac8c a1b39e1 c68ac8c 12e936c a1b39e1 c68ac8c 12e936c c68ac8c 12e936c a1b39e1 c68ac8c 12e936c c68ac8c a1b39e1 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 79 80 81 82 |
<!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 to move the falling ball
function startFalling() {
let ballPosition = 0;
const ballSpeed = 4;
const catcherPosition = catcher.offsetLeft;
function fallBall() {
if (isGameOver) return;
ballPosition += ballSpeed;
ball.style.top = ballPosition + "px";
// If the ball reaches the bottom, check if it's caught by the catcher
if (ballPosition >= window.innerHeight - 100) {
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 it falls
ballPosition = 0;
ball.style.left = Math.random() * (window.innerWidth - 50) + "px";
}
// Continue falling
if (!isGameOver) {
requestAnimationFrame(fallBall);
}
}
fallBall();
}
// Function to move the catcher based on mouse movement
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 to start the game
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> |