Hugging Face's logo

Spaces:
openfree
/
Sticky-Game
Running

App Files Community
openfree commited on
Commit
e6bd255
•
1 Parent(s): 89b1d44

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +180 -19
index.html CHANGED
@@ -1,19 +1,180 @@
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>Fishing Game</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ display: flex;
16
+ justify-content: center;
17
+ align-items: center;
18
+ min-height: 100vh;
19
+ background: linear-gradient(180deg, #87CEEB 0%, #1E90FF 100%);
20
+ font-family: Arial, sans-serif;
21
+ }
22
+
23
+ .header {
24
+ position: fixed;
25
+ top: 20px;
26
+ text-align: center;
27
+ width: 100%;
28
+ color: white;
29
+ z-index: 1000;
30
+ }
31
+
32
+ .title {
33
+ font-size: 24px;
34
+ font-weight: bold;
35
+ margin-bottom: 5px;
36
+ }
37
+
38
+ .subtitle {
39
+ font-size: 16px;
40
+ margin-bottom: 5px;
41
+ }
42
+
43
+ .link {
44
+ font-size: 14px;
45
+ color: white;
46
+ }
47
+
48
+ .game-container {
49
+ width: 800px;
50
+ height: 600px;
51
+ background: rgba(255, 255, 255, 0.1);
52
+ border-radius: 20px;
53
+ position: relative;
54
+ overflow: hidden;
55
+ }
56
+
57
+ .hook {
58
+ width: 20px;
59
+ height: 20px;
60
+ background: #FFD700;
61
+ border-radius: 50%;
62
+ position: absolute;
63
+ top: 0;
64
+ left: 50%;
65
+ transform: translateX(-50%);
66
+ cursor: pointer;
67
+ z-index: 100;
68
+ transition: all 0.3s ease;
69
+ }
70
+
71
+ .fish {
72
+ width: 40px;
73
+ height: 20px;
74
+ background: #FF6B6B;
75
+ border-radius: 20px;
76
+ position: absolute;
77
+ transition: all 0.5s linear;
78
+ }
79
+
80
+ .score-board {
81
+ position: absolute;
82
+ top: 20px;
83
+ left: 20px;
84
+ background: rgba(255, 255, 255, 0.2);
85
+ padding: 10px 20px;
86
+ border-radius: 10px;
87
+ color: white;
88
+ }
89
+
90
+ .line {
91
+ position: absolute;
92
+ width: 2px;
93
+ background: #FFD700;
94
+ top: 0;
95
+ left: 50%;
96
+ transform: translateX(-50%);
97
+ transition: all 0.3s ease;
98
+ }
99
+ </style>
100
+ </head>
101
+ <body>
102
+ <div class="header">
103
+ <div class="title">MOUSE Autonomous 'Sticky Game'</div>
104
+ <div class="subtitle">"One-minute creation by AI Coding Autonomous Agent MOUSE"</div>
105
+ <a href="https://VIDraft-mouse1.hf.space" class="link">https://VIDraft-mouse1.hf.space</a>
106
+ </div>
107
+
108
+ <div class="game-container">
109
+ <div class="score-board">Score: <span id="score">0</span></div>
110
+ <div class="line"></div>
111
+ <div class="hook"></div>
112
+ </div>
113
+
114
+ <script>
115
+ const gameContainer = document.querySelector('.game-container');
116
+ const hook = document.querySelector('.hook');
117
+ const line = document.querySelector('.line');
118
+ const scoreElement = document.getElementById('score');
119
+ let score = 0;
120
+ let isHookDown = false;
121
+ let hookPosition = 0;
122
+
123
+ function createFish() {
124
+ const fish = document.createElement('div');
125
+ fish.className = 'fish';
126
+ fish.style.top = Math.random() * (gameContainer.offsetHeight - 50) + 'px';
127
+ fish.style.left = '-50px';
128
+ gameContainer.appendChild(fish);
129
+
130
+ const speed = 2 + Math.random() * 3;
131
+ const movement = setInterval(() => {
132
+ const currentLeft = parseInt(fish.style.left);
133
+ if (currentLeft > gameContainer.offsetWidth) {
134
+ clearInterval(movement);
135
+ fish.remove();
136
+ } else {
137
+ fish.style.left = currentLeft + speed + 'px';
138
+
139
+ if (isHookDown) {
140
+ const hookRect = hook.getBoundingClientRect();
141
+ const fishRect = fish.getBoundingClientRect();
142
+
143
+ if (
144
+ hookRect.left < fishRect.right &&
145
+ hookRect.right > fishRect.left &&
146
+ hookRect.top < fishRect.bottom &&
147
+ hookRect.bottom > fishRect.top
148
+ ) {
149
+ score += 10;
150
+ scoreElement.textContent = score;
151
+ clearInterval(movement);
152
+ fish.remove();
153
+ pullHook();
154
+ }
155
+ }
156
+ }
157
+ }, 20);
158
+ }
159
+
160
+ function pullHook() {
161
+ isHookDown = false;
162
+ hook.style.top = '0px';
163
+ line.style.height = '0px';
164
+ }
165
+
166
+ gameContainer.addEventListener('click', (e) => {
167
+ if (!isHookDown) {
168
+ isHookDown = true;
169
+ const clickY = e.clientY - gameContainer.getBoundingClientRect().top;
170
+ hook.style.top = clickY + 'px';
171
+ line.style.height = clickY + 'px';
172
+ } else {
173
+ pullHook();
174
+ }
175
+ });
176
+
177
+ setInterval(createFish, 2000);
178
+ </script>
179
+ </body>
180
+ </html>