Hugging Face's logo

Spaces:
awacke1
/
GameOneShotsWithThreeJS
Running

App Files Community
awacke1 commited on
Commit
21346c9
·
verified ·
1 Parent(s): 92a0dee

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +383 -19
index.html CHANGED
@@ -1,19 +1,383 @@
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
+ #GameOneShotsWithThreeJS
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>3D Pac-Man Game</title>
8
+ <style>
9
+ body {
10
+ margin: 0;
11
+ overflow: hidden;
12
+ background-color: #000;
13
+ font-family: Arial, sans-serif;
14
+ }
15
+ #info {
16
+ position: absolute;
17
+ top: 10px;
18
+ left: 10px;
19
+ color: white;
20
+ font-size: 16px;
21
+ background-color: rgba(0, 0, 0, 0.5);
22
+ padding: 10px;
23
+ border-radius: 5px;
24
+ }
25
+ #gameOverScreen {
26
+ position: absolute;
27
+ top: 50%;
28
+ left: 50%;
29
+ transform: translate(-50%, -50%);
30
+ background-color: rgba(0, 0, 0, 0.8);
31
+ color: white;
32
+ padding: 20px;
33
+ border-radius: 10px;
34
+ text-align: center;
35
+ display: none;
36
+ }
37
+ #gameOverScreen button {
38
+ margin-top: 20px;
39
+ padding: 10px 20px;
40
+ background-color: yellow;
41
+ border: none;
42
+ border-radius: 5px;
43
+ cursor: pointer;
44
+ font-weight: bold;
45
+ }
46
+ #instructions {
47
+ position: absolute;
48
+ bottom: 10px;
49
+ left: 10px;
50
+ color: white;
51
+ font-size: 14px;
52
+ background-color: rgba(0, 0, 0, 0.5);
53
+ padding: 10px;
54
+ border-radius: 5px;
55
+ }
56
+ </style>
57
+ </head>
58
+ <body>
59
+ <div id="info">Score: <span id="score">0</span> | Dots Left: <span id="dotsLeft">0</span></div>
60
+ <div id="instructions">Controls: Arrow Keys to move, WASD to rotate camera, Q/E to raise/lower camera</div>
61
+ <div id="gameOverScreen">
62
+ <h2>Game Over</h2>
63
+ <p>Your final score: <span id="finalScore">0</span></p>
64
+ <button id="restartButton">Play Again</button>
65
+ </div>
66
+
67
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
68
+ <script>
69
+ // Game variables
70
+ let scene, camera, renderer, player, maze = [];
71
+ let score = 0, dotsLeft = 0;
72
+ let gameOver = false;
73
+ let cameraOffset = { x: 0, y: 5, z: 10 };
74
+ let cameraRotation = { x: -0.5, y: 0, z: 0 };
75
+
76
+ // Maze layout (1: wall, 2: dot, 0: empty space)
77
+ const map = [
78
+ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
79
+ [1,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,1],
80
+ [1,2,1,1,2,1,1,1,2,1,2,1,1,1,2,1,1,2,1],
81
+ [1,2,1,1,2,1,1,1,2,1,2,1,1,1,2,1,1,2,1],
82
+ [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
83
+ [1,2,1,1,2,1,2,1,1,1,1,1,2,1,2,1,1,2,1],
84
+ [1,2,2,2,2,1,2,2,2,1,2,2,2,1,2,2,2,2,1],
85
+ [1,1,1,1,2,1,1,1,0,1,0,1,1,1,2,1,1,1,1],
86
+ [0,0,0,1,2,1,0,0,0,0,0,0,0,1,2,1,0,0,0],
87
+ [1,1,1,1,2,1,0,1,1,0,1,1,0,1,2,1,1,1,1],
88
+ [0,0,0,0,2,0,0,1,0,0,0,1,0,0,2,0,0,0,0],
89
+ [1,1,1,1,2,1,0,1,1,1,1,1,0,1,2,1,1,1,1],
90
+ [0,0,0,1,2,1,0,0,0,0,0,0,0,1,2,1,0,0,0],
91
+ [1,1,1,1,2,1,0,1,1,1,1,1,0,1,2,1,1,1,1],
92
+ [1,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,1],
93
+ [1,2,1,1,2,1,1,1,2,1,2,1,1,1,2,1,1,2,1],
94
+ [1,2,2,1,2,2,2,2,2,0,2,2,2,2,2,1,2,2,1],
95
+ [1,1,2,1,2,1,2,1,1,1,1,1,2,1,2,1,2,1,1],
96
+ [1,2,2,2,2,1,2,2,2,1,2,2,2,1,2,2,2,2,1],
97
+ [1,2,1,1,1,1,1,1,2,1,2,1,1,1,1,1,1,2,1],
98
+ [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
99
+ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
100
+ ];
101
+
102
+ // Initialize the game
103
+ function init() {
104
+ // Reset game variables
105
+ score = 0;
106
+ document.getElementById('score').textContent = score;
107
+ gameOver = false;
108
+ document.getElementById('gameOverScreen').style.display = 'none';
109
+ maze = [];
110
+ dotsLeft = 0;
111
+
112
+ // Create a scene
113
+ scene = new THREE.Scene();
114
+ scene.background = new THREE.Color(0x000000);
115
+
116
+ // Create a camera
117
+ camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
118
+ camera.position.set(cameraOffset.x, cameraOffset.y, cameraOffset.z);
119
+ camera.rotation.x = cameraRotation.x;
120
+
121
+ // Create a renderer
122
+ renderer = new THREE.WebGLRenderer({ antialias: true });
123
+ renderer.setSize(window.innerWidth, window.innerHeight);
124
+ if (document.querySelector('canvas')) {
125
+ document.body.removeChild(document.querySelector('canvas'));
126
+ }
127
+ document.body.appendChild(renderer.domElement);
128
+
129
+ // Add lights
130
+ const ambientLight = new THREE.AmbientLight(0x404040, 1);
131
+ scene.add(ambientLight);
132
+
133
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
134
+ directionalLight.position.set(0, 20, 10);
135
+ scene.add(directionalLight);
136
+
137
+ // Create the maze
138
+ createMaze();
139
+
140
+ // Create player (Pac-Man)
141
+ createPlayer();
142
+
143
+ // Add event listeners
144
+ window.addEventListener('resize', onWindowResize);
145
+ window.addEventListener('keydown', onKeyDown);
146
+ document.getElementById('restartButton').addEventListener('click', init);
147
+
148
+ // Start animation loop
149
+ animate();
150
+ }
151
+
152
+ function createMaze() {
153
+ // Ground
154
+ const groundGeometry = new THREE.PlaneGeometry(map[0].length + 2, map.length + 2);
155
+ const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x333333, side: THREE.DoubleSide });
156
+ const ground = new THREE.Mesh(groundGeometry, groundMaterial);
157
+ ground.rotation.x = Math.PI / 2;
158
+ ground.position.set(map[0].length / 2 - 0.5, -0.5, map.length / 2 - 0.5);
159
+ scene.add(ground);
160
+
161
+ // Create maze elements
162
+ for (let z = 0; z < map.length; z++) {
163
+ maze[z] = [];
164
+ for (let x = 0; x < map[z].length; x++) {
165
+ if (map[z][x] === 1) {
166
+ // Create wall
167
+ const wallGeometry = new THREE.BoxGeometry(1, 1, 1);
168
+ const wallMaterial = new THREE.MeshLambertMaterial({ color: 0x0000ff });
169
+ const wall = new THREE.Mesh(wallGeometry, wallMaterial);
170
+ wall.position.set(x, 0, z);
171
+ scene.add(wall);
172
+ maze[z][x] = { type: 'wall', object: wall };
173
+ } else if (map[z][x] === 2) {
174
+ // Create dot
175
+ const dotGeometry = new THREE.SphereGeometry(0.1, 8, 8);
176
+ const dotMaterial = new THREE.MeshLambertMaterial({ color: 0xffff00 });
177
+ const dot = new THREE.Mesh(dotGeometry, dotMaterial);
178
+ dot.position.set(x, 0, z);
179
+ scene.add(dot);
180
+ maze[z][x] = { type: 'dot', object: dot, collected: false };
181
+ dotsLeft++;
182
+ } else {
183
+ maze[z][x] = { type: 'empty' };
184
+ }
185
+ }
186
+ }
187
+
188
+ document.getElementById('dotsLeft').textContent = dotsLeft;
189
+ }
190
+
191
+ function createPlayer() {
192
+ // Create Pac-Man body (sphere with mouth)
193
+ const playerGeometry = new THREE.SphereGeometry(0.4, 32, 32, 0, Math.PI * 1.8);
194
+ const playerMaterial = new THREE.MeshLambertMaterial({ color: 0xffff00 });
195
+ player = new THREE.Mesh(playerGeometry, playerMaterial);
196
+
197
+ // Set initial position (middle of the maze)
198
+ player.position.set(9, 0, 10);
199
+ player.rotation.y = Math.PI / 2; // Face right initially
200
+ scene.add(player);
201
+
202
+ // Player properties
203
+ player.userData = {
204
+ direction: { x: 0, z: 0 },
205
+ nextDirection: { x: 0, z: 0 },
206
+ speed: 0.05,
207
+ mouthOpen: true,
208
+ mouthSpeed: 0.05
209
+ };
210
+ }
211
+
212
+ function movePlayer() {
213
+ if (gameOver) return;
214
+
215
+ // Try to move in the next direction if requested
216
+ if (player.userData.nextDirection.x !== 0 || player.userData.nextDirection.z !== 0) {
217
+ const nextX = Math.floor(player.position.x + player.userData.nextDirection.x * player.userData.speed * 2);
218
+ const nextZ = Math.floor(player.position.z + player.userData.nextDirection.z * player.userData.speed * 2);
219
+
220
+ // Check if the next position is valid
221
+ if (nextX >= 0 && nextX < map[0].length &&
222
+ nextZ >= 0 && nextZ < map.length &&
223
+ map[nextZ][nextX] !== 1) {
224
+ player.userData.direction = {...player.userData.nextDirection};
225
+
226
+ // Rotate player to face the direction of movement
227
+ if (player.userData.direction.x === 1) player.rotation.y = Math.PI / 2;
228
+ else if (player.userData.direction.x === -1) player.rotation.y = -Math.PI / 2;
229
+ else if (player.userData.direction.z === 1) player.rotation.y = Math.PI;
230
+ else if (player.userData.direction.z === -1) player.rotation.y = 0;
231
+ }
232
+ }
233
+
234
+ // Move player in the current direction
235
+ if (player.userData.direction.x !== 0 || player.userData.direction.z !== 0) {
236
+ const newX = player.position.x + player.userData.direction.x * player.userData.speed;
237
+ const newZ = player.position.z + player.userData.direction.z * player.userData.speed;
238
+
239
+ // Check if we're about to hit a wall
240
+ const nextTileX = Math.floor(newX + player.userData.direction.x * 0.4);
241
+ const nextTileZ = Math.floor(newZ + player.userData.direction.z * 0.4);
242
+
243
+ if (nextTileX >= 0 && nextTileX < map[0].length &&
244
+ nextTileZ >= 0 && nextTileZ < map.length &&
245
+ map[nextTileZ][nextTileX] !== 1) {
246
+ player.position.x = newX;
247
+ player.position.z = newZ;
248
+
249
+ // Tunnel teleport (if you go off one side, appear on the other)
250
+ if (player.position.x < 0) player.position.x = map[0].length - 1;
251
+ if (player.position.x >= map[0].length) player.position.x = 0;
252
+ if (player.position.z < 0) player.position.z = map.length - 1;
253
+ if (player.position.z >= map.length) player.position.z = 0;
254
+
255
+ // Collect dots
256
+ collectDots();
257
+ }
258
+ }
259
+
260
+ // Animate Pac-Man's mouth
261
+ animateMouth();
262
+
263
+ // Update camera position
264
+ updateCamera();
265
+ }
266
+
267
+ function animateMouth() {
268
+ // Create the mouth animation effect
269
+ const playerGeometry = player.geometry;
270
+ if (player.userData.mouthOpen) {
271
+ playerGeometry.parameters.thetaLength -= player.userData.mouthSpeed;
272
+ if (playerGeometry.parameters.thetaLength <= Math.PI) {
273
+ player.userData.mouthOpen = false;
274
+ }
275
+ } else {
276
+ playerGeometry.parameters.thetaLength += player.userData.mouthSpeed;
277
+ if (playerGeometry.parameters.thetaLength >= Math.PI * 1.8) {
278
+ player.userData.mouthOpen = true;
279
+ }
280
+ }
281
+ player.geometry = new THREE.SphereGeometry(
282
+ 0.4, 32, 32, 0, playerGeometry.parameters.thetaLength
283
+ );
284
+ player.material = new THREE.MeshLambertMaterial({ color: 0xffff00 });
285
+ }
286
+
287
+ function collectDots() {
288
+ const x = Math.round(player.position.x);
289
+ const z = Math.round(player.position.z);
290
+
291
+ // Check if there's a dot at the player's position
292
+ if (x >= 0 && x < map[0].length && z >= 0 && z < map.length) {
293
+ if (maze[z][x] && maze[z][x].type === 'dot' && !maze[z][x].collected) {
294
+ // Collect the dot
295
+ maze[z][x].collected = true;
296
+ scene.remove(maze[z][x].object);
297
+
298
+ // Update score
299
+ score += 10;
300
+ document.getElementById('score').textContent = score;
301
+
302
+ // Update dots left
303
+ dotsLeft--;
304
+ document.getElementById('dotsLeft').textContent = dotsLeft;
305
+
306
+ // Check if all dots are collected
307
+ if (dotsLeft === 0) {
308
+ // Player wins
309
+ gameOver = true;
310
+ document.getElementById('gameOverScreen').style.display = 'block';
311
+ document.getElementById('finalScore').textContent = score;
312
+ }
313
+ }
314
+ }
315
+ }
316
+
317
+ function updateCamera() {
318
+ // Camera follows player with offset
319
+ camera.position.x = player.position.x + cameraOffset.x;
320
+ camera.position.y = player.position.y + cameraOffset.y;
321
+ camera.position.z = player.position.z + cameraOffset.z;
322
+
323
+ // Look at player
324
+ camera.lookAt(player.position.x, player.position.y, player.position.z);
325
+ }
326
+
327
+ function onKeyDown(event) {
328
+ if (gameOver) return;
329
+
330
+ // Movement keys
331
+ switch (event.key) {
332
+ case 'ArrowUp':
333
+ player.userData.nextDirection = { x: 0, z: -1 };
334
+ break;
335
+ case 'ArrowDown':
336
+ player.userData.nextDirection = { x: 0, z: 1 };
337
+ break;
338
+ case 'ArrowLeft':
339
+ player.userData.nextDirection = { x: -1, z: 0 };
340
+ break;
341
+ case 'ArrowRight':
342
+ player.userData.nextDirection = { x: 1, z: 0 };
343
+ break;
344
+
345
+ // Camera controls
346
+ case 'w':
347
+ cameraOffset.y += 0.5;
348
+ break;
349
+ case 's':
350
+ cameraOffset.y -= 0.5;
351
+ break;
352
+ case 'a':
353
+ cameraOffset.x -= 0.5;
354
+ break;
355
+ case 'd':
356
+ cameraOffset.x += 0.5;
357
+ break;
358
+ case 'q':
359
+ cameraOffset.z -= 0.5;
360
+ break;
361
+ case 'e':
362
+ cameraOffset.z += 0.5;
363
+ break;
364
+ }
365
+ }
366
+
367
+ function onWindowResize() {
368
+ camera.aspect = window.innerWidth / window.innerHeight;
369
+ camera.updateProjectionMatrix();
370
+ renderer.setSize(window.innerWidth, window.innerHeight);
371
+ }
372
+
373
+ function animate() {
374
+ requestAnimationFrame(animate);
375
+ movePlayer();
376
+ renderer.render(scene, camera);
377
+ }
378
+
379
+ // Start the game
380
+ init();
381
+ </script>
382
+ </body>
383
+ </html>