File size: 2,128 Bytes
0460853 eb2d242 0460853 c530330 0460853 c530330 ac83adc |
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 |
<!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> |