Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

Flux-web / index.html

GarGerry

Update index.html

5f58408 verified 6 months ago

raw

history blame

2.69 kB

	<!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 =