Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

Flux-web / Backup-html

GarGerry

Rename index.html to Backup-html

b0c3ba7 verified 6 months ago

raw

history blame

4.05 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>
	<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 gameContainer = document.querySelector('.game-container');

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

	// 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 + '%';
	}

	// Keyboard controls
	window.addEventListener('keydown', (e) => {
	if (e.key === 'ArrowLeft') movePlatformLeft();
	if (e.key === 'ArrowRight') movePlatformRight();
	});

	// Button controls
	leftButton.addEventListener('click', movePlatformLeft);
	rightButton.addEventListener('click', movePlatformRight);

	// Mouse/Touch controls
	gameContainer.addEventListener('mousemove', (e) => {
	const containerWidth = gameContainer.offsetWidth;
	platformPosition = (e.clientX / containerWidth) * 100;
	platform.style.left = platformPosition + '%';
	});

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

	// Fungsi untuk menggerakkan bola
	function moveBall() {
	if (isCaught) return; // Jangan lanjut jika bola ditangkap.
	ballPosition.top += 2; // Bola turun.
	ball.style.top = ballPosition.top + '%';
	ball.style.left = ballPosition.left + '%';

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

	// Game over jika bola melewati platform
	if (ballPosition.top >= 100) {
	if (!isCaught) {
	alert('Game Over! Final Score: ' + score);
	score = 0; // Reset skor.
	scoreDisplay.textContent = score; // Update skor.
	}
	resetGame();
	}

	requestAnimationFrame(moveBall);
	}

	// Fungsi untuk mereset permainan
	function resetGame() {
	isCaught = false;
	ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul ulang.
	}

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