Hugging Face's logo

Spaces:
GarGerry
/
Flux-web
Running

App Files Community
GarGerry commited on
Commit
cd2bfee
·
verified ·
1 Parent(s): 03d9c2e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +22 -38
index.html CHANGED
@@ -8,23 +8,16 @@
8
  </head>
9
  <body>
10
  <div class="game-container">
11
- <!-- Nyawa (♥️) ditempatkan di bagian atas layar -->
12
- <div id="lives">
13
- <span class="life">❤️</span>
14
- <span class="life">❤️</span>
15
- <span class="life">❤️</span>
16
- <span class="life">❤️</span>
17
- </div>
18
-
19
- <!-- Skor dan Level di posisi kiri dan kanan atas -->
20
  <div id="score">Score: 0</div>
21
  <div id="level">Level: 1</div>
22
-
23
- <!-- Platform yang dikendalikan oleh pemain -->
24
- <div id="platform" class="platform"></div>
25
-
26
- <!-- Bola yang akan jatuh -->
27
- <div id="ball" class="ball"></div>
28
  </div>
29
 
30
  <script>
@@ -36,14 +29,13 @@
36
 
37
  let currentScore = 0;
38
  let level = 1;
39
- let fallSpeed = 3; // Initial fall speed (seconds)
40
  let platformX = window.innerWidth / 2 - 50;
41
  platform.style.left = platformX + "px";
42
 
43
  let remainingLives = 4;
44
  let ballY = -30;
45
  let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
46
- let ballSpeed = 2; // Ball fall speed per frame
47
  let isTouching = false;
48
 
49
  // Kontrol menggunakan Mouse
@@ -78,20 +70,17 @@
78
  });
79
 
80
  let updateLives = () => {
81
- for (let i = 1; i <= 4; i++) {
82
- let life = document.getElementById(`life${i}`);
83
- if (i > remainingLives) {
84
- life.style.visibility = "hidden";
85
- } else {
86
- life.style.visibility = "visible";
87
- }
88
  }
 
89
  };
90
 
91
  let updateBallPosition = () => {
92
  ballY += ballSpeed;
93
 
94
- // Update ball position
95
  ball.style.top = ballY + "px";
96
  ball.style.left = ballX + "px";
97
 
@@ -105,31 +94,27 @@
105
  if (currentScore % 10 === 0) {
106
  level++;
107
  levelDisplay.innerHTML = "Level: " + level;
108
- fallSpeed -= 0.2;
109
- ballSpeed += 0.1; // Make ball fall faster
110
  }
111
  score.innerHTML = "Score: " + currentScore;
112
  resetBall();
113
  }
114
  } else if (ballY >= window.innerHeight) {
115
  // Ball missed the platform
116
- remainingLives--;
117
- updateLives();
 
 
 
 
118
  if (remainingLives <= 0) {
119
  alert("Game Over! Your score is: " + currentScore);
120
  resetGame();
121
  }
122
- resetBall();
123
  }
124
  };
125
 
126
  let resetBall = () => {
127
- // Stop the animation when ball is reset
128
- ball.style.animation = 'none';
129
- setTimeout(() => {
130
- ball.style.animation = `fall ${fallSpeed}s linear infinite`;
131
- }, 50); // Delay to restart the animation
132
-
133
  ballY = -30; // Reset ball to start position
134
  ballX = Math.floor(Math.random() * (window.innerWidth - 30)); // New random X position
135
  ball.style.top = ballY + "px";
@@ -140,8 +125,7 @@
140
  remainingLives = 4;
141
  currentScore = 0;
142
  level = 1;
143
- ballSpeed = 2;
144
- fallSpeed = 3;
145
  score.innerHTML = "Score: " + currentScore;
146
  levelDisplay.innerHTML = "Level: " + level;
147
  updateLives();
 
8
  </head>
9
  <body>
10
  <div class="game-container">
11
+ <div id="ball" class="ball"></div>
12
+ <div id="platform" class="platform"></div>
 
 
 
 
 
 
 
13
  <div id="score">Score: 0</div>
14
  <div id="level">Level: 1</div>
15
+ <div id="lives">
16
+ <span class="life">♥️</span>
17
+ <span class="life">♥️</span>
18
+ <span class="life">♥️</span>
19
+ <span class="life">♥️</span>
20
+ </div>
21
  </div>
22
 
23
  <script>
 
29
 
30
  let currentScore = 0;
31
  let level = 1;
 
32
  let platformX = window.innerWidth / 2 - 50;
33
  platform.style.left = platformX + "px";
34
 
35
  let remainingLives = 4;
36
  let ballY = -30;
37
  let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
38
+ let ballSpeed = 3; // Increased speed
39
  let isTouching = false;
40
 
41
  // Kontrol menggunakan Mouse
 
70
  });
71
 
72
  let updateLives = () => {
73
+ let hearts = '';
74
+ for (let i = 0; i < remainingLives; i++) {
75
+ hearts += '♥️';
 
 
 
 
76
  }
77
+ livesDisplay.innerHTML = hearts;
78
  };
79
 
80
  let updateBallPosition = () => {
81
  ballY += ballSpeed;
82
 
83
+ // Update ball position directly with JavaScript
84
  ball.style.top = ballY + "px";
85
  ball.style.left = ballX + "px";
86
 
 
94
  if (currentScore % 10 === 0) {
95
  level++;
96
  levelDisplay.innerHTML = "Level: " + level;
97
+ ballSpeed += 0.2; // Increase ball speed every 10 points
 
98
  }
99
  score.innerHTML = "Score: " + currentScore;
100
  resetBall();
101
  }
102
  } else if (ballY >= window.innerHeight) {
103
  // Ball missed the platform
104
+ if (remainingLives > 0) {
105
+ remainingLives--;
106
+ updateLives();
107
+ resetBall();
108
+ }
109
+
110
  if (remainingLives <= 0) {
111
  alert("Game Over! Your score is: " + currentScore);
112
  resetGame();
113
  }
 
114
  }
115
  };
116
 
117
  let resetBall = () => {
 
 
 
 
 
 
118
  ballY = -30; // Reset ball to start position
119
  ballX = Math.floor(Math.random() * (window.innerWidth - 30)); // New random X position
120
  ball.style.top = ballY + "px";
 
125
  remainingLives = 4;
126
  currentScore = 0;
127
  level = 1;
128
+ ballSpeed = 3; // Start with a faster speed
 
129
  score.innerHTML = "Score: " + currentScore;
130
  levelDisplay.innerHTML = "Level: " + level;
131
  updateLives();