File size: 6,517 Bytes
e762863 5e8e113 2fe2a19 e762863 5e8e113 439b431 4ab792f e762863 78ba153 4ab792f 78ba153 5e8e113 78ba153 439b431 4ab792f 439b431 5e8e113 4ab792f 5e8e113 439b431 78ba153 439b431 5e8e113 78ba153 439b431 78ba153 439b431 78ba153 439b431 5e8e113 439b431 4ab792f 439b431 4ab792f 439b431 5e8e113 4ab792f 5e8e113 4ab792f 5e8e113 439b431 4ab792f 5e8e113 4ab792f 5e8e113 439b431 4ab792f 439b431 4ab792f 5e8e113 4ab792f 5e8e113 4ab792f 439b431 4ab792f 5e8e113 4ab792f 5e8e113 e762863 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 |
<!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> |