|
|
<!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 id="lives"> |
|
|
<span class="life">♥️</span> |
|
|
<span class="life">♥️</span> |
|
|
<span class="life">♥️</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let ball = document.getElementById("ball"); |
|
|
let platform = document.getElementById("platform"); |
|
|
let score = document.getElementById("score"); |
|
|
let levelDisplay = document.getElementById("level"); |
|
|
let livesDisplay = document.getElementById("lives"); |
|
|
|
|
|
let currentScore = 0; |
|
|
let level = 1; |
|
|
let platformX = window.innerWidth / 2 - 50; |
|
|
platform.style.left = platformX + "px"; |
|
|
|
|
|
let remainingLives = 3; |
|
|
let ballY = -30; |
|
|
let ballX = Math.floor(Math.random() * (window.innerWidth - 30)); |
|
|
let ballSpeed = 3; |
|
|
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 updateLives = () => { |
|
|
let hearts = ''; |
|
|
for (let i = 0; i < remainingLives; i++) { |
|
|
hearts += '♥️'; |
|
|
} |
|
|
livesDisplay.innerHTML = hearts; |
|
|
}; |
|
|
|
|
|
let updateBallPosition = () => { |
|
|
ballY += ballSpeed; |
|
|
|
|
|
|
|
|
ball.style.top = ballY + "px"; |
|
|
ball.style.left = ballX + "px"; |
|
|
|
|
|
let ballRect = ball.getBoundingClientRect(); |
|
|
let platformRect = platform.getBoundingClientRect(); |
|
|
|
|
|
if (ballY + 30 >= platformRect.top && ballY + 30 <= platformRect.bottom) { |
|
|
if (ballX + 30 >= platformRect.left && ballX <= platformRect.right) { |
|
|
|
|
|
currentScore++; |
|
|
if (currentScore % 10 === 0) { |
|
|
level++; |
|
|
levelDisplay.innerHTML = "Level: " + level; |
|
|
ballSpeed += 0.2; |
|
|
} |
|
|
score.innerHTML = "Score: " + currentScore; |
|
|
resetBall(); |
|
|
} |
|
|
} else if (ballY >= window.innerHeight) { |
|
|
|
|
|
if (remainingLives > 0) { |
|
|
remainingLives--; |
|
|
updateLives(); |
|
|
resetBall(); |
|
|
} |
|
|
|
|
|
if (remainingLives <= 0) { |
|
|
alert("Game Over! Your score is: " + currentScore); |
|
|
resetGame(); |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
let resetBall = () => { |
|
|
ballY = -30; |
|
|
ballX = Math.floor(Math.random() * (window.innerWidth - 30)); |
|
|
ball.style.top = ballY + "px"; |
|
|
ball.style.left = ballX + "px"; |
|
|
}; |
|
|
|
|
|
let resetGame = () => { |
|
|
remainingLives = 3; |
|
|
currentScore = 0; |
|
|
level = 1; |
|
|
ballSpeed = 3; |
|
|
score.innerHTML = "Score: " + currentScore; |
|
|
levelDisplay.innerHTML = "Level: " + level; |
|
|
updateLives(); |
|
|
resetBall(); |
|
|
}; |
|
|
|
|
|
let gameLoop = () => { |
|
|
updateBallPosition(); |
|
|
requestAnimationFrame(gameLoop); |
|
|
}; |
|
|
|
|
|
gameLoop(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
