Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

Flux-web / index.html

GarGerry

Update index.html

4ab792f verified 6 months ago

raw

history blame

6.52 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>
	<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');

	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

	// Display level dan timer
	const levelDisplay = document.createElement('div');
	levelDisplay.textContent = `Level: ${level}`;
	levelDisplay.style.position = 'absolute';
	levelDisplay.style.top = '10px';
	levelDisplay.style.right = '10px';
	levelDisplay.style.fontSize = '1.5em';
	levelDisplay.style.color = '#ffffff';
	levelDisplay.style.background = 'rgba(0, 0, 0, 0.5)';
	levelDisplay.style.padding = '10px';
	document.body.appendChild(levelDisplay);

	const timerDisplay = document.createElement('div');
	timerDisplay.textContent = `Time: ${timer}s`;
	timerDisplay.style.position = 'absolute';
	timerDisplay.style.top = '40px';
	timerDisplay.style.right = '10px';
	timerDisplay.style.fontSize = '1.5em';
	timerDisplay.style.color = '#ffffff';
	timerDisplay.style.background = 'rgba(0, 0, 0, 0.5)';
	timerDisplay.style.padding = '10px';
	document.body.appendChild(timerDisplay);

	// 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 keyboard
	window.addEventListener('keydown', (e) => {
	if (e.key === 'ArrowLeft') movePlatformLeft();
	if (e.key === 'ArrowRight') movePlatformRight();
	});

	// 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) {
	alert(`Game Over! Final Score: ${score}`);
	resetGame();
	}
	}
	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++;
	levelDisplay.textContent = `Level: ${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}`;
	levelDisplay.textContent = `Level: ${level}`;
	timerDisplay.textContent = `Time: ${timer}s`;
	resetBall();
	}

	// 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);

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