File size: 2,691 Bytes
0460853 5f58408 0460853 c530330 daef768 5f58408 0460853 5f58408 c530330 5f58408 daef768 5f58408 dd4ebb4 109f0ba 5f58408 dd4ebb4 5f58408 dd4ebb4 5f58408 c530330 5f58408 |
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 60 61 62 63 64 65 66 67 68 69 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Futuristic Ball Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<div id="score">Score: 0</div>
<div id="level">Level: 1</div>
<div id="lives">Lives: ❤️ ❤️ ❤️ ❤️</div>
<div class="platform"></div>
</div>
<script>
let score = 0;
let level = 1;
let lives = 4;
const scoreElement = document.getElementById('score');
const levelElement = document.getElementById('level');
const livesElement = document.getElementById('lives');
// Function to create a new ball
function createBall() {
const ball = document.createElement('div');
ball.classList.add('ball');
// Random horizontal position for the ball
ball.style.left = `${Math.random() * (window.innerWidth - 30)}px`;
document.body.appendChild(ball);
let ballFallInterval = setInterval(() => {
const ballRect = ball.getBoundingClientRect();
const platformRect = document.querySelector('.platform').getBoundingClientRect();
// Check if the ball has hit the platform
if (
ballRect.bottom >= platformRect.top &&
ballRect.left >= platformRect.left &&
ballRect.right <= platformRect.right
) {
score += 10;
scoreElement.textContent = `Score: ${score}`;
ball.remove(); // Remove the ball after it has been caught
clearInterval(ballFallInterval); // Stop the falling animation for this ball
createBall(); // Create a new ball for the next round
} else if (ballRect.top > window.innerHeight) {
lives -= 1;
livesElement.innerHTML = `Lives: ${'❤️ '.repeat(lives)}`;
ball.remove(); // Remove the ball if it falls off screen
clearInterval(ballFallInterval); // Stop the ball's fall
createBall(); // Create a new ball after losing a life
if (lives === 0) {
alert('Game Over!');
}
}
}, 20); // Check every 20ms
return ball;
}
// Create the first ball
createBall();
// Move the platform with mouse and touch events
const platform = |