Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

Flux-web / New

GarGerry

Create New

07ab608 verified over 1 year ago

raw

history blame contribute delete

5 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Futuristic Falling Ball Game</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="game-container">
	<div id="ball" class="ball"></div>
	<div id="platform" class="platform"></div>
	<div id="score">Score: 0</div>
	<div id="level">Level: 1</div>
	<div id="lives">
	<span class="life">♥️</span>
	<span class="life">♥️</span>
	<span class="life">♥️</span>
	</div>
	</div>

	<script>
	let ball = document.getElementById("ball");
	let platform = document.getElementById("platform");
	let score = document.getElementById("score");
	let levelDisplay = document.getElementById("level");
	let livesDisplay = document.getElementById("lives");

	let currentScore = 0;
	let level = 1;
	let platformX = window.innerWidth / 2 - 50;
	platform.style.left = platformX + "px";

	let remainingLives = 3;
	let ballY = -30;
	let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
	let ballSpeed = 3; // Increased speed
	let isTouching = false;

	// Kontrol menggunakan Mouse
	document.addEventListener("mousemove", (e) => {
	platformX = e.clientX - platform.offsetWidth / 2;
	if (platformX < 0) platformX = 0;
	if (platformX > window.innerWidth - platform.offsetWidth) {
	platformX = window.innerWidth - platform.offsetWidth;
	}
	platform.style.left = platformX + "px";
	});

	// Kontrol menggunakan Sentuhan
	document.addEventListener("touchmove", (e) => {
	if (isTouching) {
	let touchX = e.touches[0].clientX;
	platformX = touchX - platform.offsetWidth / 2;
	if (platformX < 0) platformX = 0;
	if (platformX > window.innerWidth - platform.offsetWidth) {
	platformX = window.innerWidth - platform.offsetWidth;
	}
	platform.style.left = platformX + "px";
	}
	}, { passive: false });

	document.addEventListener("touchstart", (e) => {
	isTouching = true;
	});

	document.addEventListener("touchend", (e) => {
	isTouching = false;
	});

	let updateLives = () => {
	let hearts = '';
	for (let i = 0; i < remainingLives; i++) {
	hearts += '♥️';
	}
	livesDisplay.innerHTML = hearts;
	};

	let updateBallPosition = () => {
	ballY += ballSpeed;

	// Update ball position directly with JavaScript
	ball.style.top = ballY + "px";
	ball.style.left = ballX + "px";

	let ballRect = ball.getBoundingClientRect();
	let platformRect = platform.getBoundingClientRect();

	if (ballY + 30 >= platformRect.top && ballY + 30 <= platformRect.bottom) {
	if (ballX + 30 >= platformRect.left && ballX <= platformRect.right) {
	// Ball hits the platform
	currentScore++;
	if (currentScore % 10 === 0) {
	level++;
	levelDisplay.innerHTML = "Level: " + level;
	ballSpeed += 0.2; // Increase ball speed every 10 points
	}
	score.innerHTML = "Score: " + currentScore;
	resetBall();
	}
	} else if (ballY >= window.innerHeight) {
	// Ball missed the platform
	if (remainingLives > 0) {
	remainingLives--;
	updateLives();
	resetBall();
	}

	if (remainingLives <= 0) {
	alert("Game Over! Your score is: " + currentScore);
	resetGame();
	}
	}
	};

	let resetBall = () => {
	ballY = -30; // Reset ball to start position
	ballX = Math.floor(Math.random() * (window.innerWidth - 30)); // New random X position
	ball.style.top = ballY + "px";
	ball.style.left = ballX + "px";
	};

	let resetGame = () => {
	remainingLives = 3;
	currentScore = 0;
	level = 1;
	ballSpeed = 3; // Start with a faster speed
	score.innerHTML = "Score: " + currentScore;
	levelDisplay.innerHTML = "Level: " + level;
	updateLives();
	resetBall();
	};

	let gameLoop = () => {
	updateBallPosition();
	requestAnimationFrame(gameLoop); // Loop the game
	};

	gameLoop(); // Start the game loop
	</script>
	</body>
	</html>