Hugging Face's logo

Spaces:
kadirnar
/
grok-game
Running

App Files Community
kadirnar commited on
Commit
0236e9c
·
verified ·
1 Parent(s): abfc405

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +268 -19
index.html CHANGED
@@ -1,19 +1,268 @@
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>3D Maze Game Demo</title>
7
+ <style>
8
+ body { margin: 0; overflow: hidden; }
9
+ #debug {
10
+ position: absolute;
11
+ top: 10px;
12
+ left: 10px;
13
+ color: white;
14
+ background: rgba(0,0,0,0.5);
15
+ padding: 5px;
16
+ }
17
+ </style>
18
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
19
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
20
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
21
+ </head>
22
+ <body>
23
+ <canvas id="gameCanvas"></canvas>
24
+ <div id="debug"></div>
25
+ <script>
26
+ // Scene Setup
27
+ const canvas = document.getElementById('gameCanvas');
28
+ const scene = new THREE.Scene();
29
+ const camera = new THREE.PerspectiveCamera(
30
+ 75,
31
+ window.innerWidth / window.innerHeight,
32
+ 0.1,
33
+ 1000
34
+ );
35
+ const renderer = new THREE.WebGLRenderer({ canvas: canvas });
36
+ renderer.setSize(window.innerWidth, window.innerHeight);
37
+
38
+ // OrbitControls for camera manipulation
39
+ const controls = new THREE.OrbitControls(camera, renderer.domElement);
40
+ controls.enableDamping = true;
41
+ controls.dampingFactor = 0.05;
42
+ controls.screenSpacePanning = false;
43
+ controls.minDistance = 5;
44
+ controls.maxDistance = 50;
45
+ controls.maxPolarAngle = Math.PI / 2;
46
+
47
+ // Lighting
48
+ const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
49
+ hemiLight.position.set(0, 20, 0);
50
+ scene.add(hemiLight);
51
+ const dirLight = new THREE.DirectionalLight(0xffffff);
52
+ dirLight.position.set(3, 10, 3);
53
+ scene.add(dirLight);
54
+
55
+ // Floor Texture (procedural using canvas)
56
+ function createFloorTexture() {
57
+ const canvas = document.createElement('canvas');
58
+ canvas.width = 64;
59
+ canvas.height = 64;
60
+ const ctx = canvas.getContext('2d');
61
+ ctx.fillStyle = '#8B4513'; // Brown
62
+ ctx.fillRect(0, 0, 64, 64);
63
+ ctx.strokeStyle = '#000000';
64
+ ctx.lineWidth = 2;
65
+ for (let i = 0; i <= 64; i += 4) {
66
+ ctx.moveTo(i, 0);
67
+ ctx.lineTo(i, 64);
68
+ ctx.moveTo(0, i);
69
+ ctx.lineTo(64, i);
70
+ }
71
+ ctx.stroke();
72
+ return canvas;
73
+ }
74
+ const floorTexture = new THREE.CanvasTexture(createFloorTexture());
75
+ floorTexture.wrapS = THREE.RepeatWrapping;
76
+ floorTexture.wrapT = THREE.RepeatWrapping;
77
+ floorTexture.repeat.set(16, 16);
78
+ const floorGeometry = new THREE.PlaneGeometry(64, 64);
79
+ const floorMaterial = new THREE.MeshLambertMaterial({ map: floorTexture });
80
+ const floor = new THREE.Mesh(floorGeometry, floorMaterial);
81
+ floor.rotation.x = -Math.PI / 2;
82
+ floor.position.set(32, 0, 32); // Center under maze (0 to 64)
83
+ scene.add(floor);
84
+
85
+ // Wall Texture (procedural using canvas)
86
+ function createWallTexture() {
87
+ const canvas = document.createElement('canvas');
88
+ canvas.width = 64;
89
+ canvas.height = 64;
90
+ const ctx = canvas.getContext('2d');
91
+ ctx.fillStyle = '#808080'; // Gray
92
+ ctx.fillRect(0, 0, 64, 64);
93
+ ctx.fillStyle = '#707070';
94
+ for (let i = 0; i < 100; i++) {
95
+ const x = Math.random() * 64;
96
+ const y = Math.random() * 64;
97
+ const size = Math.random() * 5;
98
+ ctx.fillRect(x, y, size, size);
99
+ }
100
+ return canvas;
101
+ }
102
+ const wallTexture = new THREE.CanvasTexture(createWallTexture());
103
+ const wallMaterial = new THREE.MeshLambertMaterial({ map: wallTexture });
104
+
105
+ // Maze Generation (16x16 grid, cell size = 4 units)
106
+ const gridSize = 16;
107
+ const cellSize = 4;
108
+ const maze = [];
109
+ for (let i = 0; i < gridSize; i++) {
110
+ maze[i] = [];
111
+ for (let j = 0; j < gridSize; j++) {
112
+ if (i === 0 || i === gridSize - 1 || j === 0 || j === gridSize - 1) {
113
+ maze[i][j] = 1; // Wall at boundaries
114
+ } else if (i >= 6 && i <= 9 && j >= 6 && j <= 9) {
115
+ maze[i][j] = 0; // Central open area
116
+ } else {
117
+ maze[i][j] = Math.random() < 0.15 ? 1 : 0; // Random walls (15% chance)
118
+ }
119
+ }
120
+ }
121
+
122
+ // Wall Meshes and Collision Boxes
123
+ const wallBoxes = [];
124
+ for (let i = 0; i < gridSize; i++) {
125
+ for (let j = 0; j < gridSize; j++) {
126
+ if (maze[i][j] === 1) {
127
+ const wall = new THREE.Mesh(
128
+ new THREE.BoxGeometry(cellSize, cellSize, cellSize),
129
+ wallMaterial
130
+ );
131
+ // Position wall at center of cell
132
+ wall.position.set(
133
+ (i + 0.5) * cellSize,
134
+ cellSize / 2,
135
+ (j + 0.5) * cellSize
136
+ );
137
+ scene.add(wall);
138
+ const box = new THREE.Box3().setFromObject(wall);
139
+ wallBoxes.push(box);
140
+ }
141
+ }
142
+ }
143
+
144
+ // Soldier Character and Animations
145
+ let soldier;
146
+ let mixer;
147
+ let idleAction, runAction;
148
+ let currentAction;
149
+ const loader = new THREE.GLTFLoader();
150
+ loader.load('https://threejs.org/examples/models/gltf/Soldier.glb', (gltf) => {
151
+ soldier = gltf.scene;
152
+ soldier.scale.set(2, 2, 2); // Adjust scale
153
+ soldier.position.set(30, 0, 30); // Center of open area (x:24-36, z:24-36)
154
+ scene.add(soldier);
155
+
156
+ mixer = new THREE.AnimationMixer(soldier);
157
+ const clips = gltf.animations;
158
+ idleAction = mixer.clipAction(clips.find(clip => clip.name === 'Idle'));
159
+ runAction = mixer.clipAction(clips.find(clip => clip.name === 'Run'));
160
+ idleAction.play();
161
+ currentAction = idleAction;
162
+
163
+ // Set initial camera position
164
+ camera.position.set(30, 10, 40);
165
+ controls.target.set(30, 0, 30);
166
+ controls.update();
167
+
168
+ // Start animation loop
169
+ animate();
170
+ });
171
+
172
+ // Keyboard Controls (WASD)
173
+ const keys = { w: false, a: false, s: false, d: false };
174
+ window.addEventListener('keydown', (e) => {
175
+ const key = e.key.toLowerCase();
176
+ if (keys.hasOwnProperty(key)) keys[key] = true;
177
+ });
178
+ window.addEventListener('keyup', (e) => {
179
+ const key = e.key.toLowerCase();
180
+ if (keys.hasOwnProperty(key)) keys[key] = false;
181
+ });
182
+
183
+ // Animation Loop
184
+ const clock = new THREE.Clock();
185
+ function animate() {
186
+ requestAnimationFrame(animate);
187
+ const deltaTime = clock.getDelta();
188
+ if (mixer) mixer.update(deltaTime);
189
+
190
+ if (soldier) {
191
+ // Calculate movement direction based on camera orientation
192
+ const forward = new THREE.Vector3();
193
+ camera.getWorldDirection(forward);
194
+ forward.y = 0;
195
+ forward.normalize();
196
+ const left = new THREE.Vector3(-forward.z, 0, forward.x);
197
+
198
+ const moveDirection = new THREE.Vector3();
199
+ if (keys.w) moveDirection.add(forward);
200
+ if (keys.s) moveDirection.add(forward.clone().negate());
201
+ if (keys.a) moveDirection.add(left);
202
+ if (keys.d) moveDirection.add(left.clone().negate());
203
+
204
+ if (moveDirection.length() > 0) {
205
+ moveDirection.normalize();
206
+ const speed = 5; // units per second
207
+ const newPosition = soldier.position.clone().add(
208
+ moveDirection.multiplyScalar(speed * deltaTime)
209
+ );
210
+
211
+ // Collision Detection
212
+ const soldierSphere = new THREE.Sphere(newPosition, 1); // Collision radius 1
213
+ let collision = false;
214
+ for (const wallBox of wallBoxes) {
215
+ if (wallBox.intersectsSphere(soldierSphere)) {
216
+ collision = true;
217
+ break;
218
+ }
219
+ }
220
+ if (!collision) {
221
+ soldier.position.copy(newPosition);
222
+ }
223
+
224
+ // Orient Soldier (correct rotation adjustment)
225
+ const angle = Math.atan2(moveDirection.x, moveDirection.z);
226
+ soldier.rotation.y = angle + Math.PI;
227
+
228
+ // Play Run Animation
229
+ if (currentAction !== runAction) {
230
+ currentAction = runAction;
231
+ idleAction.fadeOut(0.2);
232
+ runAction.reset().fadeIn(0.2).play();
233
+ }
234
+ } else {
235
+ // Play Idle Animation
236
+ if (currentAction !== idleAction) {
237
+ currentAction = idleAction;
238
+ runAction.fadeOut(0.2);
239
+ idleAction.reset().fadeIn(0.2).play();
240
+ }
241
+ }
242
+
243
+ // Update OrbitControls target to follow soldier
244
+ controls.target.copy(soldier.position);
245
+ }
246
+
247
+ controls.update();
248
+ renderer.render(scene, camera);
249
+
250
+ // Update Debug Overlay
251
+ if (soldier) {
252
+ const pos = soldier.position;
253
+ const rot = ((soldier.rotation.y * 180 / Math.PI) % 360).toFixed(2);
254
+ document.getElementById('debug').innerHTML =
255
+ `Position: ${pos.x.toFixed(2)}, ${pos.y.toFixed(2)}, ${pos.z.toFixed(2)}<br>` +
256
+ `Rotation: ${rot} degrees`;
257
+ }
258
+ }
259
+
260
+ // Handle Window Resize
261
+ window.addEventListener('resize', () => {
262
+ camera.aspect = window.innerWidth / window.innerHeight;
263
+ camera.updateProjectionMatrix();
264
+ renderer.setSize(window.innerWidth, window.innerHeight);
265
+ });
266
+ </script>
267
+ </body>
268
+ </html>