|
|
<!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="style.css"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="game-container"> |
|
|
<div id="ball" class="ball"></div> |
|
|
<div id="platform" class="platform"></div> |
|
|
<div id="score">Score: 0</div> |
|
|
</div> |
|
|
<script> |
|
|
let ball = document.getElementById("ball"); |
|
|
let platform = document.getElementById("platform"); |
|
|
let score = document.getElementById("score"); |
|
|
let currentScore = 0; |
|
|
|
|
|
let platformX = window.innerWidth / 2 - 50; |
|
|
platform.style.left = platformX + "px"; |
|
|
|
|
|
document.addEventListener("mousemove", (e) => { |
|
|
platformX = e.clientX - platform.offsetWidth / 2; |
|
|
if (platformX < 0) platformX = 0; |
|
|
if (platformX > window.innerWidth - platform.offsetWidth) { |
|
|
platformX = window.innerWidth - platform.offsetWidth; |
|
|
} |
|
|
platform.style.left = platformX + "px"; |
|
|
}); |
|
|
|
|
|
let dropBall = () => { |
|
|
let ballX = Math.floor(Math.random() * (window.innerWidth - 30)); |
|
|
ball.style.left = ballX + "px"; |
|
|
ball.style.animation = "fall 3s linear infinite"; |
|
|
}; |
|
|
|
|
|
ball.addEventListener("animationiteration", () => { |
|
|
let ballPosition = ball.getBoundingClientRect(); |
|
|
let platformPosition = platform.getBoundingClientRect(); |
|
|
|
|
|
if (ballPosition.bottom >= platformPosition.top && |
|
|
ballPosition.left >= platformPosition.left && |
|
|
ballPosition.right <= platformPosition.right) { |
|
|
currentScore++; |
|
|
score.innerHTML = "Score: " + currentScore; |
|
|
dropBall(); |
|
|
} else if (ballPosition.bottom >= window.innerHeight) { |
|
|
currentScore = 0; |
|
|
score.innerHTML = "Score: " + currentScore; |
|
|
dropBall(); |
|
|
} |
|
|
}); |
|
|
|
|
|
dropBall(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
