Hugging Face's logo

Spaces:
GarGerry
/
Flux-web
Running

App Files Community
GarGerry commited on
Commit
c68ac8c
·
verified ·
1 Parent(s): 9803ba4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +55 -42
index.html CHANGED
@@ -3,63 +3,76 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Guess the Color Game</title>
7
  <link rel="stylesheet" href="styles.css">
8
  </head>
9
  <body>
10
  <div class="game-container">
11
- <h1>Guess the Color Game</h1>
12
- <p>Try to guess the background color!</p>
13
- <div class="color-options">
14
- <div class="color-box" id="color1"></div>
15
- <div class="color-box" id="color2"></div>
16
- <div class="color-box" id="color3"></div>
17
- <div class="color-box" id="color4"></div>
18
- </div>
19
- <p id="result"></p>
20
- <button onclick="resetGame()">Play Again</button>
21
  </div>
22
-
23
  <script>
24
- const colors = ["red", "blue", "green", "yellow"];
25
- let selectedColor;
 
 
 
26
 
27
- function randomizeColors() {
28
- selectedColor = colors[Math.floor(Math.random() * colors.length)];
29
- document.body.style.backgroundColor = selectedColor;
 
30
 
31
- // Randomize the color options
32
- const shuffledColors = [...colors].sort(() => Math.random() - 0.5);
33
- document.getElementById("color1").style.backgroundColor = shuffledColors[0];
34
- document.getElementById("color2").style.backgroundColor = shuffledColors[1];
35
- document.getElementById("color3").style.backgroundColor = shuffledColors[2];
36
- document.getElementById("color4").style.backgroundColor = shuffledColors[3];
37
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
38
 
39
- function checkGuess(selected) {
40
- const result = document.getElementById("result");
41
- if (selected === selectedColor) {
42
- result.textContent = "Correct! You guessed the color!";
43
- result.style.color = "green";
44
- } else {
45
- result.textContent = "Wrong guess! Try again.";
46
- result.style.color = "red";
47
  }
 
 
48
  }
49
 
50
- function resetGame() {
51
- document.getElementById("result").textContent = "";
52
- randomizeColors();
 
 
53
  }
54
 
55
- // Event listeners for color options
56
- document.getElementById("color1").onclick = () => checkGuess(document.getElementById("color1").style.backgroundColor);
57
- document.getElementById("color2").onclick = () => checkGuess(document.getElementById("color2").style.backgroundColor);
58
- document.getElementById("color3").onclick = () => checkGuess(document.getElementById("color3").style.backgroundColor);
59
- document.getElementById("color4").onclick = () => checkGuess(document.getElementById("color4").style.backgroundColor);
 
 
 
 
 
60
 
61
- // Start game
62
- randomizeColors();
63
  </script>
64
  </body>
65
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Futuristic Falling Ball Game</title>
7
  <link rel="stylesheet" href="styles.css">
8
  </head>
9
  <body>
10
  <div class="game-container">
11
+ <div class="falling-ball" id="ball"></div>
12
+ <div class="catcher" id="catcher"></div>
13
+ <div id="score">Score: 0</div>
 
 
 
 
 
 
 
14
  </div>
15
+
16
  <script>
17
+ const ball = document.getElementById("ball");
18
+ const catcher = document.getElementById("catcher");
19
+ const scoreDisplay = document.getElementById("score");
20
+ let score = 0;
21
+ let isGameOver = false;
22
 
23
+ function startFalling() {
24
+ let ballPosition = 0;
25
+ const ballSpeed = 3;
26
+ const catcherPosition = catcher.offsetLeft;
27
 
28
+ function fallBall() {
29
+ if (isGameOver) return;
30
+
31
+ ballPosition += ballSpeed;
32
+ ball.style.top = ballPosition + "px";
33
+
34
+ if (ballPosition >= window.innerHeight - 100) {
35
+ // Check if the ball is caught
36
+ if (ballPosition >= window.innerHeight - 120 &&
37
+ ballPosition <= window.innerHeight - 100 &&
38
+ (catcherPosition <= ball.offsetLeft &&
39
+ catcherPosition + catcher.offsetWidth >= ball.offsetLeft + ball.offsetWidth)) {
40
+ score++;
41
+ scoreDisplay.textContent = "Score: " + score;
42
+ }
43
+
44
+ // Reset ball position after falling
45
+ ballPosition = 0;
46
+ ball.style.left = Math.random() * (window.innerWidth - 50) + "px";
47
+ }
48
 
49
+ if (!isGameOver) {
50
+ requestAnimationFrame(fallBall);
51
+ }
 
 
 
 
 
52
  }
53
+
54
+ fallBall();
55
  }
56
 
57
+ function moveCatcher(event) {
58
+ const catcherWidth = catcher.offsetWidth;
59
+ if (event.clientX >= 0 && event.clientX <= window.innerWidth - catcherWidth) {
60
+ catcher.style.left = event.clientX - catcherWidth / 2 + "px";
61
+ }
62
  }
63
 
64
+ document.addEventListener("mousemove", moveCatcher);
65
+
66
+ function startGame() {
67
+ score = 0;
68
+ scoreDisplay.textContent = "Score: " + score;
69
+ isGameOver = false;
70
+ ball.style.top = "0px";
71
+ ball.style.left = Math.random() * (window.innerWidth - 50) + "px";
72
+ startFalling();
73
+ }
74
 
75
+ startGame();
 
76
  </script>
77
  </body>
78
  </html>