Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

Flux-web / index.html

GarGerry

Update index.html

4420214 verified 6 months ago

raw

history blame

5.13 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 class="score-board">Score: <span id="score">0</span></div>
	</div>
	<div class="controls">
	<button id="left-button">◀</button>
	<button id="right-button">▶</button>
	</div>

	<!-- Game Over Overlay -->
	<div id="game-over-overlay" class="overlay">
	<div class="overlay-content">
	<h2>Game Over!</h2>
	<p>Final Score: <span id="final-score"></span></p>
	<button id="restart-button">Restart Game</button>
	</div>
	</div>

	<script>
	// Elemen UI
	const platform = document.querySelector('.platform');
	const ball = document.querySelector('.ball');
	const leftButton = document.getElementById('left-button');
	const rightButton = document.getElementById('right-button');
	const scoreDisplay = document.getElementById('score');
	const overlay = document.getElementById('game-over-overlay');
	const finalScoreDisplay = document.getElementById('final-score');
	const restartButton = document.getElementById('restart-button');

	// Variabel Permainan
	let platformPosition = 50; // Platform awal di tengah.
	let ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul secara acak.
	let score = 0; // Skor awal.
	let fallSpeed = 0.5; // Kecepatan bola tetap.
	let isCaught = false; // Apakah bola sudah ditangkap.

	// Fungsi untuk memindahkan platform ke kiri
	function movePlatformLeft() {
	if (platformPosition > 0) {
	platformPosition -= 5;
	platform.style.left = platformPosition + '%';
	}
	}

	// Fungsi untuk memindahkan platform ke kanan
	function movePlatformRight() {
	if (platformPosition < 90) {
	platformPosition += 5;
	platform.style.left = platformPosition + '%';
	}
	}

	// Kontrol menggunakan tombol
	leftButton.addEventListener('click', movePlatformLeft);
	rightButton.addEventListener('click', movePlatformRight);

	// Kontrol menggunakan mouse/touch
	document.querySelector('.game-container').addEventListener('mousemove', (e) => {
	const containerWidth = document.querySelector('.game-container').offsetWidth;
	platformPosition = (e.clientX / containerWidth) * 100;
	platform.style.left = platformPosition + '%';
	});

	document.querySelector('.game-container').addEventListener('touchmove', (e) => {
	const touch = e.touches[0];
	const containerWidth = document.querySelector('.game-container').offsetWidth;
	platformPosition = (touch.clientX / containerWidth) * 100;
	platform.style.left = platformPosition + '%';
	});

	// Fungsi untuk menggerakkan bola
	function moveBall() {
	if (isCaught) return; // Jangan lanjut jika bola sudah ditangkap.

	ballPosition.top += fallSpeed; // Bola jatuh dengan kecepatan tetap.
	ball.style.top = ballPosition.top + '%';
	ball.style.left = ballPosition.left + '%';

	// Deteksi tabrakan (collision detection)
	if (ballPosition.top >= 90 && Math.abs(ballPosition.left - platformPosition) < 10) {
	score++; // Tambahkan skor
	scoreDisplay.textContent = score; // Update skor di layar
	resetBall(); // Reset bola setelah ditangkap.
	}

	// Game over jika bola melewati platform
	if (ballPosition.top >= 100) {
	showGameOver();
	}

	requestAnimationFrame(moveBall); // Loop pergerakan bola
	}

	// Fungsi untuk mereset posisi bola
	function resetBall() {
	ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul ulang dengan posisi acak
	ball.style.top = ballPosition.top + '%';
	ball.style.left = ballPosition.left + '%';
	isCaught = false; // Reset status bola yang ditangkap
	}

	// Fungsi untuk menampilkan overlay Game Over
	function showGameOver() {
	finalScoreDisplay.textContent = score; // Tampilkan skor akhir
	overlay.style.display = 'flex'; // Tampilkan overlay
	}

	// Tombol restart untuk memulai ulang permainan
	restartButton.addEventListener('click', () => {
	overlay.style.display = 'none'; // Sembunyikan overlay
	score = 0; // Reset skor
	scoreDisplay.textContent = score;
	resetBall(); // Reset bola
	moveBall(); // Mulai pergerakan bola
	});

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