Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

Flux-web / index.html

GarGerry

Update index.html

7459f56 verified 6 months ago

raw

history blame

6.16 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 class="lives">Lives: <span id="lives">3</span></div>
	</div>
	<div class="controls">
	<button id="left-button">◀</button>
	<button id="right-button">▶</button>
	<button id="pause-button">Pause</button>
	</div>

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

	<script>
	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 livesDisplay = document.getElementById('lives');
	const pauseButton = document.getElementById('pause-button');
	const gameContainer = document.querySelector('.game-container');
	const gameOverMessage = document.querySelector('.game-over-message');
	const finalScoreDisplay = document.getElementById('final-score');
	const restartButton = document.getElementById('restart-button');

	let platformPosition = 50; // Posisi platform di tengah
	let ballPosition = { top: 0, left: Math.random() * 90 }; // Bola mulai di posisi acak
	let score = 0; // Skor
	let lives = 3; // Nyawa
	let isCaught = false; // Status tangkap bola
	let gamePaused = false; // Status pause
	let ballSpeed = 2; // Kecepatan bola
	let level = 1; // Level permainan
	let timer = 30; // Timer permainan

	// Pause Functionality
	pauseButton.addEventListener('click', () => {
	gamePaused = !gamePaused;
	if (gamePaused) {
	pauseButton.textContent = 'Resume';
	} else {
	pauseButton.textContent = 'Pause';
	moveBall(); // Continue game after pause
	}
	});

	// 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 tombol
	leftButton.addEventListener('click', movePlatformLeft);
	rightButton.addEventListener('click', movePlatformRight);

	// Fungsi untuk menggerakkan bola
	function moveBall() {
	if (gamePaused) return; // Jangan jalankan permainan jika di-pause

	ballPosition.top += ballSpeed;
	ball.style.top = ballPosition.top + '%';
	ball.style.left = ballPosition.left + '%';

	// Deteksi tabrakan
	if (ballPosition.top >= 90 && Math.abs(ballPosition.left - platformPosition) < 10) {
	isCaught = true;
	score++;
	scoreDisplay.textContent = score;
	resetBall();
	}

	// Game Over jika bola jatuh tanpa ditangkap
	if (ballPosition.top >= 100) {
	if (!isCaught) {
	lives--;
	livesDisplay.textContent = `Lives: ${lives}`;
	if (lives <= 0) {
	showGameOver(); // Tampilkan Game Over
	}
	}
	resetBall();
	}

	updateLevel(); // Perbarui level setelah mencapai skor tertentu
	requestAnimationFrame(moveBall);
	}

	// Fungsi untuk mereset bola
	function resetBall() {
	isCaught = false;
	ballPosition = { top: 0, left: Math.random() * 90 };
	}

	// Fungsi untuk memperbarui level
	function updateLevel() {
	if (score >= level * 10) {
	level++;
	ballSpeed += 0.5; // Meningkatkan kecepatan bola setiap level
	}
	}

	// Fungsi untuk reset permainan
	function resetGame() {
	score = 0;
	lives = 3;
	level = 1;
	ballSpeed = 2;
	timer = 30;
	scoreDisplay.textContent = score;
	livesDisplay.textContent = `Lives: ${lives}`;
	finalScoreDisplay.textContent = score;
	levelDisplay.textContent = `Level: ${level}`;
	timerDisplay.textContent = `Time: ${timer}s`;
	gameOverMessage.style.display = 'none'; // Sembunyikan Game Over
	resetBall();
	moveBall(); // Mulai kembali permainan
	}

	// Fungsi untuk menampilkan Game Over
	function showGameOver() {
	gameContainer.style.display = 'none'; // Sembunyikan konten permainan
	gameOverMessage.style.display = 'block'; // Tampilkan Game Over
	}

	// Fungsi untuk timer
	function countdownTimer() {
	if (!gamePaused && timer > 0) {
	timer--;
	timerDisplay.textContent = `Time: ${timer}s`;
	} else if (timer <= 0) {
	alert('Game Over! Time is up.');
	resetGame();
	}
	}

	// Update timer setiap detik
	setInterval(countdownTimer, 1000);

	// Restart game ketika tombol restart diklik
	restartButton.addEventListener('click', resetGame);

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