|
|
<!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 id="level">Level: 1</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let ball = document.getElementById("ball"); |
|
|
let platform = document.getElementById("platform"); |
|
|
let score = document.getElementById("score"); |
|
|
let levelDisplay = document.getElementById("level"); |
|
|
|
|
|
let currentScore = 0; |
|
|
let level = 1; |
|
|
let fallSpeed = 3; |
|
|
let platformX = window.innerWidth / 2 - 50; |
|
|
platform.style.left = platformX + "px"; |
|
|
|
|
|
let isTouching = false; |
|
|
|
|
|
|
|
|
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"; |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener("touchmove", (e) => { |
|
|
if (isTouching) { |
|
|
let touchX = e.touches[0].clientX; |
|
|
platformX = touchX - platform.offsetWidth / 2; |
|
|
if (platformX < 0) platformX = 0; |
|
|
if (platformX > window.innerWidth - platform.offsetWidth) { |
|
|
platformX = window.innerWidth - platform.offsetWidth; |
|
|
} |
|
|
platform.style.left = platformX + "px"; |
|
|
} |
|
|
}, { passive: false }); |
|
|
|
|
|
document.addEventListener("touchstart", (e) => { |
|
|
isTouching = true; |
|
|
}); |
|
|
|
|
|
document.addEventListener("touchend", (e) => { |
|
|
isTouching = false; |
|
|
}); |
|
|
|
|
|
let dropBall = () => { |
|
|
let ballX = Math.floor(Math.random() * (window.innerWidth - 30)); |
|
|
ball.style.left = ballX + "px"; |
|
|
ball.style.animation = `fall ${fallSpeed}s 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++; |
|
|
if (currentScore % 10 === 0) { |
|
|
level++; |
|
|
levelDisplay.innerHTML = "Level: " + level; |
|
|
fallSpeed -= 0.2; |
|
|
dropBall(); |
|
|
} |
|
|
score.innerHTML = "Score: " + currentScore; |
|
|
dropBall(); |
|
|
} else if (ballPosition.bottom >= window.innerHeight) { |
|
|
currentScore = 0; |
|
|
level = 1; |
|
|
fallSpeed = 3; |
|
|
score.innerHTML = "Score: " + currentScore; |
|
|
levelDisplay.innerHTML = "Level: " + level; |
|
|
dropBall(); |
|
|
} |
|
|
}); |
|
|
|
|
|
dropBall(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
