Hugging Face's logo

Spaces:
kadirnar
/
grok-game
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +81 -93
index.html CHANGED
@@ -13,6 +13,7 @@
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>
@@ -21,21 +22,16 @@
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;
@@ -45,14 +41,14 @@
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;
@@ -63,10 +59,8 @@
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;
@@ -79,10 +73,10 @@
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;
@@ -102,7 +96,7 @@
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 = [];
@@ -110,11 +104,11 @@
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
  }
@@ -128,29 +122,20 @@
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);
@@ -160,12 +145,10 @@
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
 
@@ -180,74 +163,79 @@
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);
@@ -257,7 +245,7 @@
257
  }
258
  }
259
 
260
- // Handle Window Resize
261
  window.addEventListener('resize', () => {
262
  camera.aspect = window.innerWidth / window.innerHeight;
263
  camera.updateProjectionMatrix();
 
13
  color: white;
14
  background: rgba(0,0,0,0.5);
15
  padding: 5px;
16
+ font-family: monospace;
17
  }
18
  </style>
19
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 
22
  </head>
23
  <body>
24
  <canvas id="gameCanvas"></canvas>
25
+ <div id="debug">Position: 0, 0, 0<br>Rotation: 0 degrees</div>
26
  <script>
27
  // Scene Setup
28
  const canvas = document.getElementById('gameCanvas');
29
  const scene = new THREE.Scene();
30
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
 
 
 
 
31
  const renderer = new THREE.WebGLRenderer({ canvas: canvas });
32
  renderer.setSize(window.innerWidth, window.innerHeight);
33
 
34
+ // OrbitControls
35
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
36
  controls.enableDamping = true;
37
  controls.dampingFactor = 0.05;
 
41
  controls.maxPolarAngle = Math.PI / 2;
42
 
43
  // Lighting
44
+ const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.6);
45
  hemiLight.position.set(0, 20, 0);
46
  scene.add(hemiLight);
47
+ const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
48
  dirLight.position.set(3, 10, 3);
49
  scene.add(dirLight);
50
 
51
+ // Floor Texture
52
  function createFloorTexture() {
53
  const canvas = document.createElement('canvas');
54
  canvas.width = 64;
 
59
  ctx.strokeStyle = '#000000';
60
  ctx.lineWidth = 2;
61
  for (let i = 0; i <= 64; i += 4) {
62
+ ctx.moveTo(i, 0); ctx.lineTo(i, 64);
63
+ ctx.moveTo(0, i); ctx.lineTo(64, i);
 
 
64
  }
65
  ctx.stroke();
66
  return canvas;
 
73
  const floorMaterial = new THREE.MeshLambertMaterial({ map: floorTexture });
74
  const floor = new THREE.Mesh(floorGeometry, floorMaterial);
75
  floor.rotation.x = -Math.PI / 2;
76
+ floor.position.set(32, 0, 32);
77
  scene.add(floor);
78
 
79
+ // Wall Texture
80
  function createWallTexture() {
81
  const canvas = document.createElement('canvas');
82
  canvas.width = 64;
 
96
  const wallTexture = new THREE.CanvasTexture(createWallTexture());
97
  const wallMaterial = new THREE.MeshLambertMaterial({ map: wallTexture });
98
 
99
+ // Maze Generation
100
  const gridSize = 16;
101
  const cellSize = 4;
102
  const maze = [];
 
104
  maze[i] = [];
105
  for (let j = 0; j < gridSize; j++) {
106
  if (i === 0 || i === gridSize - 1 || j === 0 || j === gridSize - 1) {
107
+ maze[i][j] = 1; // Boundary walls
108
  } else if (i >= 6 && i <= 9 && j >= 6 && j <= 9) {
109
  maze[i][j] = 0; // Central open area
110
  } else {
111
+ maze[i][j] = Math.random() < 0.15 ? 1 : 0; // Random walls
112
  }
113
  }
114
  }
 
122
  new THREE.BoxGeometry(cellSize, cellSize, cellSize),
123
  wallMaterial
124
  );
125
+ wall.position.set((i + 0.5) * cellSize, cellSize / 2, (j + 0.5) * cellSize);
 
 
 
 
 
126
  scene.add(wall);
127
+ wallBoxes.push(new THREE.Box3().setFromObject(wall));
 
128
  }
129
  }
130
  }
131
 
132
+ // Soldier Setup
133
+ let soldier, mixer, idleAction, runAction, currentAction;
 
 
 
134
  const loader = new THREE.GLTFLoader();
135
  loader.load('https://threejs.org/examples/models/gltf/Soldier.glb', (gltf) => {
136
  soldier = gltf.scene;
137
+ soldier.scale.set(2, 2, 2);
138
+ soldier.position.set(30, 0, 30); // Center of open area
139
  scene.add(soldier);
140
 
141
  mixer = new THREE.AnimationMixer(soldier);
 
145
  idleAction.play();
146
  currentAction = idleAction;
147
 
 
148
  camera.position.set(30, 10, 40);
149
+ controls.target.copy(soldier.position);
150
  controls.update();
151
 
 
152
  animate();
153
  });
154
 
 
163
  if (keys.hasOwnProperty(key)) keys[key] = false;
164
  });
165
 
166
+ // Movement Logic
167
  const clock = new THREE.Clock();
168
+ const speed = 5; // Movement speed in units per second
169
+ const collisionRadius = 1; // Collision sphere radius
 
 
170
 
171
+ function updateMovement(deltaTime) {
172
+ if (!soldier) return;
 
 
 
 
 
173
 
174
+ const forward = new THREE.Vector3();
175
+ camera.getWorldDirection(forward);
176
+ forward.y = 0;
177
+ forward.normalize();
178
+ const left = new THREE.Vector3(-forward.z, 0, forward.x);
179
 
180
+ const moveDirection = new THREE.Vector3();
181
+ if (keys.w) moveDirection.add(forward);
182
+ if (keys.s) moveDirection.add(forward.clone().negate());
183
+ if (keys.a) moveDirection.add(left);
184
+ if (keys.d) moveDirection.add(left.clone().negate());
 
 
 
 
 
 
 
 
 
 
 
 
 
 
185
 
186
+ if (moveDirection.length() > 0) {
187
+ moveDirection.normalize();
188
+ const newPosition = soldier.position.clone().add(
189
+ moveDirection.multiplyScalar(speed * deltaTime)
190
+ );
191
 
192
+ // Collision Detection
193
+ const soldierSphere = new THREE.Sphere(newPosition, collisionRadius);
194
+ let collision = false;
195
+ for (const wallBox of wallBoxes) {
196
+ if (wallBox.intersectsSphere(soldierSphere)) {
197
+ collision = true;
198
+ break;
 
 
 
 
 
199
  }
200
  }
201
+ if (!collision) {
202
+ soldier.position.copy(newPosition);
203
+ }
204
+
205
+ // Rotate soldier to face movement direction
206
+ const angle = Math.atan2(moveDirection.x, moveDirection.z);
207
+ soldier.rotation.y = angle + Math.PI;
208
 
209
+ // Switch to run animation
210
+ if (currentAction !== runAction) {
211
+ currentAction = runAction;
212
+ idleAction.fadeOut(0.2);
213
+ runAction.reset().fadeIn(0.2).play();
214
+ }
215
+ } else {
216
+ // Switch to idle animation
217
+ if (currentAction !== idleAction) {
218
+ currentAction = idleAction;
219
+ runAction.fadeOut(0.2);
220
+ idleAction.reset().fadeIn(0.2).play();
221
+ }
222
  }
223
 
224
+ // Update camera target
225
+ controls.target.copy(soldier.position);
226
+ }
227
+
228
+ // Animation Loop
229
+ function animate() {
230
+ requestAnimationFrame(animate);
231
+ const deltaTime = clock.getDelta();
232
+ if (mixer) mixer.update(deltaTime);
233
+
234
+ updateMovement(deltaTime);
235
  controls.update();
236
  renderer.render(scene, camera);
237
 
238
+ // Debug Overlay
239
  if (soldier) {
240
  const pos = soldier.position;
241
  const rot = ((soldier.rotation.y * 180 / Math.PI) % 360).toFixed(2);
 
245
  }
246
  }
247
 
248
+ // Window Resize
249
  window.addEventListener('resize', () => {
250
  camera.aspect = window.innerWidth / window.innerHeight;
251
  camera.updateProjectionMatrix();