Hugging Face's logo

Spaces:
akhaliq
/
gradio-game
Running

App Files Community
akhaliq HF staff commited on
Commit
54a9298
·
verified ·
1 Parent(s): 4552af7

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +44 -72
app.py CHANGED
@@ -8,7 +8,7 @@ with demo:
8
  <head>
9
  <meta charset="UTF-8">
10
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
- <title>Hugging Face Game with Sound</title>
12
  <style>
13
  body { margin: 0; overflow: hidden; }
14
  canvas { display: block; }
@@ -36,29 +36,32 @@ with demo:
36
  }
37
  #controls {
38
  position: absolute;
39
- top: 50%;
40
- left: 50%;
41
- transform: translate(-50%, -50%);
42
- font-size: 20px;
43
  color: white;
44
  background: rgba(0, 0, 0, 0.8);
45
- padding: 20px;
46
  font-family: Arial, sans-serif;
47
- text-align: center;
48
- transition: opacity 1s;
 
49
  }
 
 
50
  </style>
51
  </head>
52
  <body>
53
  <div id="win-message">You Win!</div>
54
  <div id="gpu-counter">GPUs Collected: 0 / 10</div>
55
  <div id="controls">
56
- <p>Controls:</p>
57
- <p>W / Up Arrow: Forward</p>
58
- <p>S / Down Arrow: Backward</p>
59
- <p>A / Left Arrow: Left</p>
60
- <p>D / Right Arrow: Right</p>
61
- <p>Spacebar: Up</p>
62
  <p>Shift: Down</p>
63
  <p>Collect all GPUs to win!</p>
64
  </div>
@@ -126,6 +129,30 @@ with demo:
126
  face.acceleration = new THREE.Vector3(0, 0, 0);
127
  face.friction = 0.95;
128
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
  // "GPU" Texts
130
  const canvas = document.createElement('canvas');
131
  canvas.width = 128;
@@ -149,33 +176,6 @@ with demo:
149
  gpuSprites.push(sprite);
150
  }
151
 
152
- // Sound setup (Web Audio API)
153
- const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
154
-
155
- // Background music (simple looping oscillator)
156
- const bgOscillator = audioCtx.createOscillator();
157
- const bgGain = audioCtx.createGain();
158
- bgOscillator.type = 'sine';
159
- bgOscillator.frequency.setValueAtTime(220, audioCtx.currentTime); // Low hum
160
- bgGain.gain.setValueAtTime(0.1, audioCtx.currentTime); // Quiet volume
161
- bgOscillator.connect(bgGain);
162
- bgGain.connect(audioCtx.destination);
163
- bgOscillator.start();
164
-
165
- // GPU collect sound
166
- function playCollectSound() {
167
- const oscillator = audioCtx.createOscillator();
168
- const gain = audioCtx.createGain();
169
- oscillator.type = 'square';
170
- oscillator.frequency.setValueAtTime(880, audioCtx.currentTime); // High pitch
171
- gain.gain.setValueAtTime(0.3, audioCtx.currentTime);
172
- gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.2);
173
- oscillator.connect(gain);
174
- gain.connect(audioCtx.destination);
175
- oscillator.start();
176
- oscillator.stop(audioCtx.currentTime + 0.2);
177
- }
178
-
179
  // Clock for smooth animation
180
  const clock = new THREE.Clock();
181
 
@@ -184,27 +184,9 @@ with demo:
184
  const gpuCounter = document.getElementById('gpu-counter');
185
  let gameWon = false;
186
 
187
- // Controls instructions
188
- const controlsDiv = document.getElementById('controls');
189
- let controlsVisible = true;
190
- setTimeout(() => {
191
- if (controlsVisible) {
192
- controlsDiv.style.opacity = '0';
193
- setTimeout(() => controlsDiv.style.display = 'none', 1000);
194
- controlsVisible = false;
195
- }
196
- }, 5000); // Hide after 5 seconds
197
-
198
  // Keyboard controls
199
  const keys = {};
200
- window.addEventListener('keydown', (e) => {
201
- keys[e.key] = true;
202
- if (controlsVisible) {
203
- controlsDiv.style.opacity = '0';
204
- setTimeout(() => controlsDiv.style.display = 'none', 1000);
205
- controlsVisible = false;
206
- }
207
- });
208
  window.addEventListener('keyup', (e) => { keys[e.key] = false; });
209
 
210
  function handleControls(deltaTime) {
@@ -218,20 +200,15 @@ with demo:
218
  if (keys[' ']) face.acceleration.y = accel;
219
  if (keys['Shift']) face.acceleration.y = -accel;
220
 
221
- // Apply acceleration and friction
222
  face.velocity.add(face.acceleration.clone().multiplyScalar(deltaTime));
223
  face.velocity.multiplyScalar(face.friction);
224
  face.velocity.clampLength(0, face.maxSpeed);
225
-
226
- // Update position
227
  face.position.add(face.velocity.clone().multiplyScalar(deltaTime));
228
 
229
- // Face direction of movement
230
  if (face.velocity.length() > 0.1) {
231
  face.lookAt(face.position.clone().add(face.velocity));
232
  }
233
 
234
- // Keep within bounds
235
  face.position.x = Math.max(-50, Math.min(50, face.position.x));
236
  face.position.z = Math.max(-50, Math.min(50, face.position.z));
237
  face.position.y = Math.max(1, Math.min(50, face.position.y));
@@ -243,32 +220,27 @@ with demo:
243
  const deltaTime = clock.getDelta();
244
 
245
  if (!gameWon) {
246
- // Handle player controls
247
  handleControls(deltaTime);
248
 
249
- // Check for "GPU" collisions
250
  gpuSprites.forEach((gpu, index) => {
251
  if (face.position.distanceTo(gpu.position) < 1) {
252
  scene.remove(gpu);
253
  gpuSprites.splice(index, 1);
254
  collectedGPUs++;
255
  gpuCounter.textContent = `GPUs Collected: ${collectedGPUs} / ${totalGPUs}`;
256
- playCollectSound(); // Play sound on collection
257
  if (collectedGPUs === totalGPUs) {
258
  gameWon = true;
259
  winMessage.style.display = 'block';
260
  face.velocity.set(0, 0, 0);
261
- bgOscillator.stop(); // Stop background music
262
  }
263
  }
264
  });
265
  }
266
 
267
- // Update camera
268
  camera.position.set(face.position.x, face.position.y + 5, face.position.z - 10);
269
  camera.lookAt(face.position);
270
-
271
- // Render
272
  renderer.render(scene, camera);
273
  }
274
 
 
8
  <head>
9
  <meta charset="UTF-8">
10
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
+ <title>Hugging Face Game with Pinned Controls</title>
12
  <style>
13
  body { margin: 0; overflow: hidden; }
14
  canvas { display: block; }
 
36
  }
37
  #controls {
38
  position: absolute;
39
+ top: 0;
40
+ right: 0;
41
+ width: 200px;
42
+ font-size: 16px;
43
  color: white;
44
  background: rgba(0, 0, 0, 0.8);
45
+ padding: 15px;
46
  font-family: Arial, sans-serif;
47
+ text-align: left;
48
+ height: 100%;
49
+ box-sizing: border-box;
50
  }
51
+ #controls p { margin: 5px 0; }
52
+ #controls strong { color: #ffcc00; }
53
  </style>
54
  </head>
55
  <body>
56
  <div id="win-message">You Win!</div>
57
  <div id="gpu-counter">GPUs Collected: 0 / 10</div>
58
  <div id="controls">
59
+ <p><strong>Controls:</strong></p>
60
+ <p>W / Up: Forward</p>
61
+ <p>S / Down: Backward</p>
62
+ <p>A / Left: Left</p>
63
+ <p>D / Right: Right</p>
64
+ <p>Space: Up</p>
65
  <p>Shift: Down</p>
66
  <p>Collect all GPUs to win!</p>
67
  </div>
 
129
  face.acceleration = new THREE.Vector3(0, 0, 0);
130
  face.friction = 0.95;
131
 
132
+ // Audio setup
133
+ const listener = new THREE.AudioListener();
134
+ camera.add(listener);
135
+
136
+ // Background music (ambient wind-like sound)
137
+ const bgSound = new THREE.Audio(listener);
138
+ const audioLoader = new THREE.AudioLoader();
139
+ const bgAudioData = 'data:audio/mp3;base64,' + btoa(String.fromCharCode(...new Uint8Array([/* Simulated wind sound MP3 data would go here */])));
140
+ audioLoader.load(bgAudioData || 'https://threejs.org/examples/sounds/358232_j_s_song.mp3', function(buffer) {
141
+ bgSound.setBuffer(buffer);
142
+ bgSound.setLoop(true);
143
+ bgSound.setVolume(0.2);
144
+ bgSound.play();
145
+ });
146
+
147
+ // GPU collect sound (positional, ping-like)
148
+ const collectSound = new THREE.PositionalAudio(listener);
149
+ face.add(collectSound);
150
+ audioLoader.load('https://threejs.org/examples/sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3', function(buffer) {
151
+ collectSound.setBuffer(buffer);
152
+ collectSound.setRefDistance(10);
153
+ collectSound.setVolume(0.5);
154
+ });
155
+
156
  // "GPU" Texts
157
  const canvas = document.createElement('canvas');
158
  canvas.width = 128;
 
176
  gpuSprites.push(sprite);
177
  }
178
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
179
  // Clock for smooth animation
180
  const clock = new THREE.Clock();
181
 
 
184
  const gpuCounter = document.getElementById('gpu-counter');
185
  let gameWon = false;
186
 
 
 
 
 
 
 
 
 
 
 
 
187
  // Keyboard controls
188
  const keys = {};
189
+ window.addEventListener('keydown', (e) => { keys[e.key] = true; });
 
 
 
 
 
 
 
190
  window.addEventListener('keyup', (e) => { keys[e.key] = false; });
191
 
192
  function handleControls(deltaTime) {
 
200
  if (keys[' ']) face.acceleration.y = accel;
201
  if (keys['Shift']) face.acceleration.y = -accel;
202
 
 
203
  face.velocity.add(face.acceleration.clone().multiplyScalar(deltaTime));
204
  face.velocity.multiplyScalar(face.friction);
205
  face.velocity.clampLength(0, face.maxSpeed);
 
 
206
  face.position.add(face.velocity.clone().multiplyScalar(deltaTime));
207
 
 
208
  if (face.velocity.length() > 0.1) {
209
  face.lookAt(face.position.clone().add(face.velocity));
210
  }
211
 
 
212
  face.position.x = Math.max(-50, Math.min(50, face.position.x));
213
  face.position.z = Math.max(-50, Math.min(50, face.position.z));
214
  face.position.y = Math.max(1, Math.min(50, face.position.y));
 
220
  const deltaTime = clock.getDelta();
221
 
222
  if (!gameWon) {
 
223
  handleControls(deltaTime);
224
 
 
225
  gpuSprites.forEach((gpu, index) => {
226
  if (face.position.distanceTo(gpu.position) < 1) {
227
  scene.remove(gpu);
228
  gpuSprites.splice(index, 1);
229
  collectedGPUs++;
230
  gpuCounter.textContent = `GPUs Collected: ${collectedGPUs} / ${totalGPUs}`;
231
+ collectSound.play(); // Play positional sound
232
  if (collectedGPUs === totalGPUs) {
233
  gameWon = true;
234
  winMessage.style.display = 'block';
235
  face.velocity.set(0, 0, 0);
236
+ bgSound.stop();
237
  }
238
  }
239
  });
240
  }
241
 
 
242
  camera.position.set(face.position.x, face.position.y + 5, face.position.z - 10);
243
  camera.lookAt(face.position);
 
 
244
  renderer.render(scene, camera);
245
  }
246