Hugging Face's logo

Spaces:
GarGerry
/
Flux-web
Running

App Files Community
GarGerry commited on
Commit
c530330
·
verified ·
1 Parent(s): 494c23e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +46 -2
index.html CHANGED
@@ -8,8 +8,52 @@
8
  </head>
9
  <body>
10
  <div class="game-container">
11
- <div class="player"></div>
12
- <div class="falling-ball"></div>
 
13
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  </body>
15
  </html>
 
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>
15
+ <script>
16
+ let ball = document.getElementById("ball");
17
+ let platform = document.getElementById("platform");
18
+ let score = document.getElementById("score");
19
+ let currentScore = 0;
20
+
21
+ let platformX = window.innerWidth / 2 - 50;
22
+ platform.style.left = platformX + "px";
23
+
24
+ document.addEventListener("mousemove", (e) => {
25
+ platformX = e.clientX - platform.offsetWidth / 2;
26
+ if (platformX < 0) platformX = 0;
27
+ if (platformX > window.innerWidth - platform.offsetWidth) {
28
+ platformX = window.innerWidth - platform.offsetWidth;
29
+ }
30
+ platform.style.left = platformX + "px";
31
+ });
32
+
33
+ let dropBall = () => {
34
+ let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
35
+ ball.style.left = ballX + "px";
36
+ ball.style.animation = "fall 3s linear infinite";
37
+ };
38
+
39
+ ball.addEventListener("animationiteration", () => {
40
+ let ballPosition = ball.getBoundingClientRect();
41
+ let platformPosition = platform.getBoundingClientRect();
42
+
43
+ if (ballPosition.bottom >= platformPosition.top &&
44
+ ballPosition.left >= platformPosition.left &&
45
+ ballPosition.right <= platformPosition.right) {
46
+ currentScore++;
47
+ score.innerHTML = "Score: " + currentScore;
48
+ dropBall();
49
+ } else if (ballPosition.bottom >= window.innerHeight) {
50
+ currentScore = 0;
51
+ score.innerHTML = "Score: " + currentScore;
52
+ dropBall();
53
+ }
54
+ });
55
+
56
+ dropBall();
57
+ </script>
58
  </body>
59
  </html>