|
|
<!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) { |
|
|
|
|
|
if (ballPosition >= window.innerHeight - 120 && |
|
|
ballPosition <= window.innerHeight - 100 && |
|
|
(catcherPosition <= ball.offsetLeft && |
|
|
catcherPosition + catcher.offsetWidth >= ball.offsetLeft + ball.offsetWidth)) { |
|
|
score++; |
|
|
scoreDisplay.textContent = "Score: " + score; |
|
|
} |
|
|
|
|
|
|
|
|
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> |
