Hugging Face's logo

Spaces:
GarGerry
/
Flux-web
Running

App Files Community
GarGerry commited on
Commit
0460853
·
verified ·
1 Parent(s): 80d491c

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +136 -0
index.html ADDED
@@ -0,0 +1,136 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Futuristic Catch Game</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ </head>
9
+ <body>
10
+ <div class="game-container">
11
+ <div class="ball"></div>
12
+ <div class="platform"></div>
13
+ <div class="score-board">Score: <span id="score">0</span></div>
14
+ </div>
15
+ <div class="controls">
16
+ <button id="left-button">◀</button>
17
+ <button id="right-button">▶</button>
18
+ </div>
19
+
20
+ <!-- Game Over Overlay -->
21
+ <div id="game-over-overlay" class="overlay">
22
+ <div class="overlay-content">
23
+ <h2>Game Over!</h2>
24
+ <p>Final Score: <span id="final-score"></span></p>
25
+ <button id="restart-button">Restart Game</button>
26
+ </div>
27
+ </div>
28
+
29
+ <script>
30
+ const platform = document.querySelector('.platform');
31
+ const ball = document.querySelector('.ball');
32
+ const leftButton = document.getElementById('left-button');
33
+ const rightButton = document.getElementById('right-button');
34
+ const scoreDisplay = document.getElementById('score');
35
+ const gameContainer = document.querySelector('.game-container');
36
+ const overlay = document.getElementById('game-over-overlay');
37
+ const finalScoreDisplay = document.getElementById('final-score');
38
+ const restartButton = document.getElementById('restart-button');
39
+
40
+ let platformPosition = 50; // Platform awal di tengah.
41
+ let ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul secara acak.
42
+ let isCaught = false; // Apakah bola ditangkap.
43
+ let score = 0; // Skor awal.
44
+
45
+ // Fungsi untuk memindahkan platform ke kiri
46
+ function movePlatformLeft() {
47
+ if (platformPosition > 0) {
48
+ platformPosition -= 5;
49
+ }
50
+ platform.style.left = platformPosition + '%';
51
+ }
52
+
53
+ // Fungsi untuk memindahkan platform ke kanan
54
+ function movePlatformRight() {
55
+ if (platformPosition < 90) {
56
+ platformPosition += 5;
57
+ }
58
+ platform.style.left = platformPosition + '%';
59
+ }
60
+
61
+ // Keyboard controls
62
+ window.addEventListener('keydown', (e) => {
63
+ if (e.key === 'ArrowLeft') movePlatformLeft();
64
+ if (e.key === 'ArrowRight') movePlatformRight();
65
+ });
66
+
67
+ // Button controls
68
+ leftButton.addEventListener('click', movePlatformLeft);
69
+ rightButton.addEventListener('click', movePlatformRight);
70
+
71
+ // Mouse/Touch controls
72
+ gameContainer.addEventListener('mousemove', (e) => {
73
+ const containerWidth = gameContainer.offsetWidth;
74
+ platformPosition = (e.clientX / containerWidth) * 100;
75
+ platform.style.left = platformPosition + '%';
76
+ });
77
+
78
+ gameContainer.addEventListener('touchmove', (e) => {
79
+ const touch = e.touches[0];
80
+ const containerWidth = gameContainer.offsetWidth;
81
+ platformPosition = (touch.clientX / containerWidth) * 100;
82
+ platform.style.left = platformPosition + '%';
83
+ });
84
+
85
+ // Fungsi untuk menggerakkan bola
86
+ function moveBall() {
87
+ if (isCaught) return; // Jangan lanjut jika bola ditangkap.
88
+ ballPosition.top += 2; // Bola turun.
89
+ ball.style.top = ballPosition.top + '%';
90
+ ball.style.left = ballPosition.left + '%';
91
+
92
+ // Deteksi tabrakan (collision detection)
93
+ if (ballPosition.top >= 90 && Math.abs(ballPosition.left - platformPosition) < 10) {
94
+ isCaught = true;
95
+ score++; // Tambahkan skor.
96
+ scoreDisplay.textContent = score; // Update skor di layar.
97
+ resetGame();
98
+ }
99
+
100
+ // Game over jika bola melewati platform
101
+ if (ballPosition.top >= 100) {
102
+ if (!isCaught) {
103
+ showGameOver();
104
+ }
105
+ resetGame();
106
+ }
107
+
108
+ requestAnimationFrame(moveBall);
109
+ }
110
+
111
+ // Fungsi untuk mereset permainan
112
+ function resetGame() {
113
+ isCaught = false;
114
+ ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul ulang.
115
+ }
116
+
117
+ // Fungsi untuk menampilkan overlay Game Over
118
+ function showGameOver() {
119
+ finalScoreDisplay.textContent = score; // Tampilkan skor akhir.
120
+ overlay.style.display = 'flex'; // Tampilkan overlay.
121
+ }
122
+
123
+ // Tombol restart untuk memulai ulang permainan
124
+ restartButton.addEventListener('click', () => {
125
+ overlay.style.display = 'none'; // Sembunyikan overlay.
126
+ score = 0; // Reset skor.
127
+ scoreDisplay.textContent = score;
128
+ resetGame();
129
+ moveBall();
130
+ });
131
+
132
+ // Memulai permainan
133
+ moveBall();
134
+ </script>
135
+ </body>
136
+ </html>