Hugging Face's logo

Spaces:
GarGerry
/
Futuristic-Ball-Game
Running

App Files Community
GarGerry commited on
Commit
26987eb
·
verified ·
1 Parent(s): 9988b7b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +142 -19
index.html CHANGED
@@ -1,19 +1,142 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 Falling Ball Game</title>
7
+ <link rel="stylesheet" href="style.css">
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
+ </div>
20
+ </div>
21
+
22
+ <script>
23
+ let ball = document.getElementById("ball");
24
+ let platform = document.getElementById("platform");
25
+ let score = document.getElementById("score");
26
+ let levelDisplay = document.getElementById("level");
27
+ let livesDisplay = document.getElementById("lives");
28
+
29
+ let currentScore = 0;
30
+ let level = 1;
31
+ let platformX = window.innerWidth / 2 - 50;
32
+ platform.style.left = platformX + "px";
33
+
34
+ let remainingLives = 3;
35
+ let ballY = -30;
36
+ let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
37
+ let ballSpeed = 3; // Increased speed
38
+ let isTouching = false;
39
+
40
+ // Kontrol menggunakan Mouse
41
+ document.addEventListener("mousemove", (e) => {
42
+ platformX = e.clientX - platform.offsetWidth / 2;
43
+ if (platformX < 0) platformX = 0;
44
+ if (platformX > window.innerWidth - platform.offsetWidth) {
45
+ platformX = window.innerWidth - platform.offsetWidth;
46
+ }
47
+ platform.style.left = platformX + "px";
48
+ });
49
+
50
+ // Kontrol menggunakan Sentuhan
51
+ document.addEventListener("touchmove", (e) => {
52
+ if (isTouching) {
53
+ let touchX = e.touches[0].clientX;
54
+ platformX = touchX - platform.offsetWidth / 2;
55
+ if (platformX < 0) platformX = 0;
56
+ if (platformX > window.innerWidth - platform.offsetWidth) {
57
+ platformX = window.innerWidth - platform.offsetWidth;
58
+ }
59
+ platform.style.left = platformX + "px";
60
+ }
61
+ }, { passive: false });
62
+
63
+ document.addEventListener("touchstart", (e) => {
64
+ isTouching = true;
65
+ });
66
+
67
+ document.addEventListener("touchend", (e) => {
68
+ isTouching = false;
69
+ });
70
+
71
+ let updateLives = () => {
72
+ let hearts = '';
73
+ for (let i = 0; i < remainingLives; i++) {
74
+ hearts += '♥️';
75
+ }
76
+ livesDisplay.innerHTML = hearts;
77
+ };
78
+
79
+ let updateBallPosition = () => {
80
+ ballY += ballSpeed;
81
+
82
+ // Update ball position directly with JavaScript
83
+ ball.style.top = ballY + "px";
84
+ ball.style.left = ballX + "px";
85
+
86
+ let ballRect = ball.getBoundingClientRect();
87
+ let platformRect = platform.getBoundingClientRect();
88
+
89
+ if (ballY + 30 >= platformRect.top && ballY + 30 <= platformRect.bottom) {
90
+ if (ballX + 30 >= platformRect.left && ballX <= platformRect.right) {
91
+ // Ball hits the platform
92
+ currentScore++;
93
+ if (currentScore % 10 === 0) {
94
+ level++;
95
+ levelDisplay.innerHTML = "Level: " + level;
96
+ ballSpeed += 0.2; // Increase ball speed every 10 points
97
+ }
98
+ score.innerHTML = "Score: " + currentScore;
99
+ resetBall();
100
+ }
101
+ } else if (ballY >= window.innerHeight) {
102
+ // Ball missed the platform
103
+ if (remainingLives > 0) {
104
+ remainingLives--;
105
+ updateLives();
106
+ resetBall();
107
+ }
108
+
109
+ if (remainingLives <= 0) {
110
+ alert("Game Over! Your score is: " + currentScore);
111
+ resetGame();
112
+ }
113
+ }
114
+ };
115
+
116
+ let resetBall = () => {
117
+ ballY = -30; // Reset ball to start position
118
+ ballX = Math.floor(Math.random() * (window.innerWidth - 30)); // New random X position
119
+ ball.style.top = ballY + "px";
120
+ ball.style.left = ballX + "px";
121
+ };
122
+
123
+ let resetGame = () => {
124
+ remainingLives = 3;
125
+ currentScore = 0;
126
+ level = 1;
127
+ ballSpeed = 3; // Start with a faster speed
128
+ score.innerHTML = "Score: " + currentScore;
129
+ levelDisplay.innerHTML = "Level: " + level;
130
+ updateLives();
131
+ resetBall();
132
+ };
133
+
134
+ let gameLoop = () => {
135
+ updateBallPosition();
136
+ requestAnimationFrame(gameLoop); // Loop the game
137
+ };
138
+
139
+ gameLoop(); // Start the game loop
140
+ </script>
141
+ </body>
142
+ </html>