Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

Flux-web / index.html

GarGerry

Update index.html

78ba153 verified 6 months ago

raw

history blame

2.35 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Futuristic Catch Game</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="game-container">
	<div class="ball"></div>
	<div class="platform"></div>
	</div>
	<div class="controls">
	<button id="left-button">◀</button>
	<button id="right-button">▶</button>
	</div>
	<script>
	const platform = document.querySelector('.platform');
	const ball = document.querySelector('.ball');
	const gameContainer = document.querySelector('.game-container');
	const leftButton = document.getElementById('left-button');
	const rightButton = document.getElementById('right-button');

	let platformPosition = 50; // Initial position of the platform (centered).
	let ballPosition = { top: 0, left: Math.random() * 90 }; // Random horizontal start for the ball.

	// Mobile controls
	leftButton.addEventListener('click', () => {
	if (platformPosition > 0) {
	platformPosition -= 5; // Move left
	}
	platform.style.left = platformPosition + '%';
	});

	rightButton.addEventListener('click', () => {
	if (platformPosition < 90) {
	platformPosition += 5; // Move right
	}
	platform.style.left = platformPosition + '%';
	});

	// Move ball
	function moveBall() {
	ballPosition.top += 2; // Ball falls down
	ball.style.top = ballPosition.top + '%';
	ball.style.left = ballPosition.left + '%';

	// Check for collision with platform
	if (ballPosition.top >= 90 && Math.abs(ballPosition.left - platformPosition) < 10) {
	alert('You caught the ball!');
	resetGame();
	}

	// Check if ball missed
	if (ballPosition.top >= 100) {
	alert('Game Over!');
	resetGame();
	}

	requestAnimationFrame(moveBall);
	}

	// Reset game
	function resetGame() {
	ballPosition = { top: 0, left: Math.random() * 90 };
	}

	moveBall();
	</script>
	</body>
	</html>