Hugging Face's logo

Spaces:
awacke1
/
SphereEtersIO
Running

App Files Community
awacke1 commited on
Commit
9e3204b
·
verified ·
1 Parent(s): 2e023c7

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +743 -19
index.html CHANGED
@@ -1,19 +1,743 @@
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 Agar.io Game</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ padding: 0;
11
+ background: #000;
12
+ font-family: 'Arial', sans-serif;
13
+ overflow: hidden;
14
+ cursor: none;
15
+ }
16
+
17
+ #gameContainer {
18
+ position: relative;
19
+ width: 100vw;
20
+ height: 100vh;
21
+ }
22
+
23
+ #ui {
24
+ position: absolute;
25
+ top: 20px;
26
+ left: 20px;
27
+ color: white;
28
+ z-index: 100;
29
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
30
+ }
31
+
32
+ #score {
33
+ font-size: 24px;
34
+ font-weight: bold;
35
+ margin-bottom: 10px;
36
+ }
37
+
38
+ #instructions {
39
+ font-size: 14px;
40
+ opacity: 0.8;
41
+ }
42
+
43
+ #gameOver {
44
+ position: absolute;
45
+ top: 50%;
46
+ left: 50%;
47
+ transform: translate(-50%, -50%);
48
+ text-align: center;
49
+ color: white;
50
+ background: rgba(0,0,0,0.8);
51
+ padding: 30px;
52
+ border-radius: 10px;
53
+ z-index: 200;
54
+ display: none;
55
+ }
56
+
57
+ #gameOver h2 {
58
+ margin-top: 0;
59
+ color: #ff4444;
60
+ font-size: 36px;
61
+ }
62
+
63
+ #restartBtn {
64
+ background: #4CAF50;
65
+ color: white;
66
+ border: none;
67
+ padding: 12px 24px;
68
+ font-size: 16px;
69
+ border-radius: 5px;
70
+ cursor: pointer;
71
+ margin-top: 15px;
72
+ }
73
+
74
+ #restartBtn:hover {
75
+ background: #45a049;
76
+ }
77
+ </style>
78
+ </head>
79
+ <body>
80
+ <div id="gameContainer">
81
+ <div id="ui">
82
+ <div id="score">Score: 0</div>
83
+ <div id="instructions">
84
+ Move: Mouse or WASD<br>
85
+ Fire: SPACE (splits larger enemies!)<br>
86
+ Eat smaller cells and pellets to grow!<br>
87
+ Avoid larger cells!
88
+ </div>
89
+ </div>
90
+
91
+ <div id="gameOver">
92
+ <h2>Game Over!</h2>
93
+ <p>You were eaten by a larger cell!</p>
94
+ <div>Final Score: <span id="finalScore">0</span></div>
95
+ <button id="restartBtn">Play Again</button>
96
+ </div>
97
+ </div>
98
+
99
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
100
+ <script>
101
+ class AgarGame {
102
+ constructor() {
103
+ this.scene = new THREE.Scene();
104
+ this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
105
+ this.renderer = new THREE.WebGLRenderer({ antialias: true });
106
+ this.clock = new THREE.Clock();
107
+
108
+ this.worldSize = 200;
109
+ this.gameRunning = true;
110
+ this.score = 0;
111
+
112
+ this.player = null;
113
+ this.aiCells = [];
114
+ this.foodPellets = [];
115
+ this.projectiles = [];
116
+ this.targetPosition = new THREE.Vector3();
117
+ this.lastMoveDirection = new THREE.Vector3(0, 0, 1);
118
+
119
+ this.keys = {
120
+ w: false,
121
+ a: false,
122
+ s: false,
123
+ d: false,
124
+ space: false
125
+ };
126
+ this.lastSpacePress = false;
127
+
128
+ this.mouse = new THREE.Vector2();
129
+ this.raycaster = new THREE.Raycaster();
130
+
131
+ this.init();
132
+ this.setupEventListeners();
133
+ this.animate();
134
+ }
135
+
136
+ init() {
137
+ // Renderer setup
138
+ this.renderer.setSize(window.innerWidth, window.innerHeight);
139
+ this.renderer.setClearColor(0x001122);
140
+ this.renderer.shadowMap.enabled = true;
141
+ this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
142
+ document.getElementById('gameContainer').appendChild(this.renderer.domElement);
143
+
144
+ // Lighting
145
+ const ambientLight = new THREE.AmbientLight(0x404040, 0.4);
146
+ this.scene.add(ambientLight);
147
+
148
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
149
+ directionalLight.position.set(50, 100, 50);
150
+ directionalLight.castShadow = true;
151
+ directionalLight.shadow.mapSize.width = 2048;
152
+ directionalLight.shadow.mapSize.height = 2048;
153
+ directionalLight.shadow.camera.near = 0.5;
154
+ directionalLight.shadow.camera.far = 500;
155
+ directionalLight.shadow.camera.left = -100;
156
+ directionalLight.shadow.camera.right = 100;
157
+ directionalLight.shadow.camera.top = 100;
158
+ directionalLight.shadow.camera.bottom = -100;
159
+ this.scene.add(directionalLight);
160
+
161
+ // Ground plane
162
+ const groundGeometry = new THREE.PlaneGeometry(this.worldSize * 2, this.worldSize * 2);
163
+ const groundMaterial = new THREE.MeshLambertMaterial({
164
+ color: 0x003366,
165
+ transparent: true,
166
+ opacity: 0.6
167
+ });
168
+ const ground = new THREE.Mesh(groundGeometry, groundMaterial);
169
+ ground.rotation.x = -Math.PI / 2;
170
+ ground.receiveShadow = true;
171
+ this.scene.add(ground);
172
+
173
+ // Grid helper
174
+ const gridHelper = new THREE.GridHelper(this.worldSize * 2, 40, 0x004477, 0x002244);
175
+ this.scene.add(gridHelper);
176
+
177
+ this.createPlayer();
178
+ this.createAICells();
179
+ this.createFoodPellets();
180
+
181
+ // Camera setup
182
+ this.camera.position.set(0, 30, 30);
183
+ this.updateCamera();
184
+ }
185
+
186
+ createPlayer() {
187
+ const geometry = new THREE.SphereGeometry(2, 16, 16);
188
+ const material = new THREE.MeshPhongMaterial({
189
+ color: 0x00ff44,
190
+ shininess: 100,
191
+ specular: 0x111111
192
+ });
193
+
194
+ this.player = new THREE.Mesh(geometry, material);
195
+ this.player.position.set(0, 2, 0);
196
+ this.player.castShadow = true;
197
+ this.player.userData = {
198
+ size: 2,
199
+ speed: 0.25,
200
+ isPlayer: true,
201
+ mass: 4
202
+ };
203
+ this.scene.add(this.player);
204
+ }
205
+
206
+ createAICells() {
207
+ const colors = [0xff4444, 0x4444ff, 0xffff44, 0xff44ff, 0x44ffff, 0xffa500, 0x800080, 0xffc0cb];
208
+
209
+ for (let i = 0; i < 15; i++) {
210
+ const size = Math.random() * 4 + 1;
211
+ const geometry = new THREE.SphereGeometry(size, 12, 12);
212
+ const material = new THREE.MeshPhongMaterial({
213
+ color: colors[Math.floor(Math.random() * colors.length)],
214
+ shininess: 80,
215
+ specular: 0x111111
216
+ });
217
+
218
+ const aiCell = new THREE.Mesh(geometry, material);
219
+ aiCell.position.set(
220
+ (Math.random() - 0.5) * this.worldSize,
221
+ size,
222
+ (Math.random() - 0.5) * this.worldSize
223
+ );
224
+ aiCell.castShadow = true;
225
+ aiCell.userData = {
226
+ size: size,
227
+ speed: Math.max(0.04, 0.18 - size * 0.015),
228
+ isPlayer: false,
229
+ direction: new THREE.Vector3(
230
+ (Math.random() - 0.5) * 2,
231
+ 0,
232
+ (Math.random() - 0.5) * 2
233
+ ).normalize(),
234
+ changeDirectionTimer: 0,
235
+ mass: size * size
236
+ };
237
+
238
+ this.aiCells.push(aiCell);
239
+ this.scene.add(aiCell);
240
+ }
241
+ }
242
+
243
+ createFoodPellets() {
244
+ for (let i = 0; i < 100; i++) {
245
+ this.spawnFoodPellet();
246
+ }
247
+ }
248
+
249
+ spawnFoodPellet() {
250
+ const geometry = new THREE.SphereGeometry(0.3, 8, 8);
251
+ const material = new THREE.MeshPhongMaterial({
252
+ color: new THREE.Color().setHSL(Math.random(), 0.8, 0.6),
253
+ shininess: 100
254
+ });
255
+
256
+ const pellet = new THREE.Mesh(geometry, material);
257
+ pellet.position.set(
258
+ (Math.random() - 0.5) * this.worldSize,
259
+ 0.3,
260
+ (Math.random() - 0.5) * this.worldSize
261
+ );
262
+ pellet.castShadow = true;
263
+ pellet.userData = { size: 0.3, mass: 0.1 };
264
+
265
+ this.foodPellets.push(pellet);
266
+ this.scene.add(pellet);
267
+ }
268
+
269
+ setupEventListeners() {
270
+ document.addEventListener('keydown', (event) => {
271
+ switch(event.code) {
272
+ case 'KeyW': this.keys.w = true; break;
273
+ case 'KeyA': this.keys.a = true; break;
274
+ case 'KeyS': this.keys.s = true; break;
275
+ case 'KeyD': this.keys.d = true; break;
276
+ case 'Space':
277
+ event.preventDefault();
278
+ this.keys.space = true;
279
+ break;
280
+ }
281
+ });
282
+
283
+ document.addEventListener('keyup', (event) => {
284
+ switch(event.code) {
285
+ case 'KeyW': this.keys.w = false; break;
286
+ case 'KeyA': this.keys.a = false; break;
287
+ case 'KeyS': this.keys.s = false; break;
288
+ case 'KeyD': this.keys.d = false; break;
289
+ case 'Space':
290
+ event.preventDefault();
291
+ this.keys.space = false;
292
+ break;
293
+ }
294
+ });
295
+
296
+ document.addEventListener('mousemove', (event) => {
297
+ this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
298
+ this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
299
+ });
300
+
301
+ document.getElementById('restartBtn').addEventListener('click', () => {
302
+ this.restart();
303
+ });
304
+
305
+ window.addEventListener('resize', () => {
306
+ this.camera.aspect = window.innerWidth / window.innerHeight;
307
+ this.camera.updateProjectionMatrix();
308
+ this.renderer.setSize(window.innerWidth, window.innerHeight);
309
+ });
310
+ }
311
+
312
+ updatePlayer() {
313
+ if (!this.gameRunning || !this.player) return;
314
+
315
+ const moveDirection = new THREE.Vector3();
316
+
317
+ // Keyboard movement
318
+ if (this.keys.w) moveDirection.z -= 1;
319
+ if (this.keys.s) moveDirection.z += 1;
320
+ if (this.keys.a) moveDirection.x -= 1;
321
+ if (this.keys.d) moveDirection.x += 1;
322
+
323
+ // Mouse movement
324
+ if (moveDirection.length() === 0) {
325
+ this.raycaster.setFromCamera(this.mouse, this.camera);
326
+ const intersect = this.raycaster.ray.intersectPlane(
327
+ new THREE.Plane(new THREE.Vector3(0, 1, 0), 0),
328
+ new THREE.Vector3()
329
+ );
330
+
331
+ if (intersect) {
332
+ this.targetPosition.copy(intersect);
333
+ moveDirection.copy(this.targetPosition).sub(this.player.position);
334
+ moveDirection.y = 0;
335
+ moveDirection.normalize();
336
+ }
337
+ }
338
+
339
+ if (moveDirection.length() > 0) {
340
+ this.lastMoveDirection.copy(moveDirection);
341
+ moveDirection.normalize();
342
+ const speed = this.player.userData.speed;
343
+ this.player.position.add(moveDirection.multiplyScalar(speed));
344
+
345
+ // Keep player in bounds
346
+ this.player.position.x = Math.max(-this.worldSize, Math.min(this.worldSize, this.player.position.x));
347
+ this.player.position.z = Math.max(-this.worldSize, Math.min(this.worldSize, this.player.position.z));
348
+ }
349
+
350
+ // Handle firing
351
+ if (this.keys.space && !this.lastSpacePress) {
352
+ this.fireProjectile();
353
+ }
354
+ this.lastSpacePress = this.keys.space;
355
+ }
356
+
357
+ fireProjectile() {
358
+ if (!this.player || this.player.userData.size < 1.5) return;
359
+
360
+ const geometry = new THREE.SphereGeometry(0.2, 8, 8);
361
+ const material = new THREE.MeshPhongMaterial({
362
+ color: 0xffff00,
363
+ emissive: 0x444400,
364
+ shininess: 100
365
+ });
366
+
367
+ const projectile = new THREE.Mesh(geometry, material);
368
+ projectile.position.copy(this.player.position);
369
+ projectile.position.y += 1;
370
+ projectile.castShadow = true;
371
+
372
+ projectile.userData = {
373
+ direction: this.lastMoveDirection.clone(),
374
+ speed: 0.8,
375
+ life: 100,
376
+ size: 0.2
377
+ };
378
+
379
+ this.projectiles.push(projectile);
380
+ this.scene.add(projectile);
381
+
382
+ // Reduce player size when firing
383
+ this.player.userData.size = Math.max(1, this.player.userData.size - 0.1);
384
+ this.player.userData.mass = this.player.userData.size * this.player.userData.size;
385
+ this.player.scale.set(
386
+ this.player.userData.size / 2,
387
+ this.player.userData.size / 2,
388
+ this.player.userData.size / 2
389
+ );
390
+ this.player.position.y = this.player.userData.size;
391
+ }
392
+
393
+ updateProjectiles() {
394
+ for (let i = this.projectiles.length - 1; i >= 0; i--) {
395
+ const projectile = this.projectiles[i];
396
+
397
+ // Move projectile
398
+ const moveVector = projectile.userData.direction.clone().multiplyScalar(projectile.userData.speed);
399
+ projectile.position.add(moveVector);
400
+ projectile.userData.life--;
401
+
402
+ // Remove if expired or out of bounds
403
+ if (projectile.userData.life <= 0 ||
404
+ Math.abs(projectile.position.x) > this.worldSize ||
405
+ Math.abs(projectile.position.z) > this.worldSize) {
406
+ this.scene.remove(projectile);
407
+ this.projectiles.splice(i, 1);
408
+ continue;
409
+ }
410
+
411
+ // Check collision with AI cells
412
+ for (let j = 0; j < this.aiCells.length; j++) {
413
+ const aiCell = this.aiCells[j];
414
+ const distance = projectile.position.distanceTo(aiCell.position);
415
+
416
+ if (distance < projectile.userData.size + aiCell.userData.size) {
417
+ // Only split if AI cell is larger than player
418
+ if (aiCell.userData.mass > this.player.userData.mass) {
419
+ this.splitAICell(aiCell, j);
420
+ }
421
+
422
+ this.scene.remove(projectile);
423
+ this.projectiles.splice(i, 1);
424
+ break;
425
+ }
426
+ }
427
+ }
428
+ }
429
+
430
+ splitAICell(aiCell, index) {
431
+ const originalSize = aiCell.userData.size;
432
+ const newSize = originalSize * 0.7;
433
+ const originalColor = aiCell.material.color.clone();
434
+
435
+ // Remove original cell
436
+ this.scene.remove(aiCell);
437
+ this.aiCells.splice(index, 1);
438
+
439
+ // Create two new cells
440
+ for (let i = 0; i < 2; i++) {
441
+ const geometry = new THREE.SphereGeometry(newSize, 12, 12);
442
+ const material = new THREE.MeshPhongMaterial({
443
+ color: originalColor,
444
+ shininess: 80,
445
+ specular: 0x111111
446
+ });
447
+
448
+ const newCell = new THREE.Mesh(geometry, material);
449
+
450
+ // Position the new cells apart
451
+ const angle = i * Math.PI + Math.random() * 0.5;
452
+ const distance = (newSize + originalSize) * 1.5;
453
+ newCell.position.copy(aiCell.position);
454
+ newCell.position.x += Math.cos(angle) * distance;
455
+ newCell.position.z += Math.sin(angle) * distance;
456
+ newCell.position.y = newSize;
457
+
458
+ // Keep in bounds
459
+ newCell.position.x = Math.max(-this.worldSize, Math.min(this.worldSize, newCell.position.x));
460
+ newCell.position.z = Math.max(-this.worldSize, Math.min(this.worldSize, newCell.position.z));
461
+
462
+ newCell.castShadow = true;
463
+ newCell.userData = {
464
+ size: newSize,
465
+ speed: Math.max(0.04, 0.18 - newSize * 0.015),
466
+ isPlayer: false,
467
+ direction: new THREE.Vector3(
468
+ Math.cos(angle + Math.PI/2),
469
+ 0,
470
+ Math.sin(angle + Math.PI/2)
471
+ ).normalize(),
472
+ changeDirectionTimer: 0,
473
+ mass: newSize * newSize
474
+ };
475
+
476
+ this.aiCells.push(newCell);
477
+ this.scene.add(newCell);
478
+ }
479
+
480
+ this.score += Math.floor(originalSize * 5);
481
+ }
482
+
483
+ updateAI() {
484
+ this.aiCells.forEach(aiCell => {
485
+ aiCell.userData.changeDirectionTimer += this.clock.getDelta();
486
+
487
+ if (aiCell.userData.changeDirectionTimer > 3 + Math.random() * 2) {
488
+ let nearestFood = null;
489
+ let nearestDistance = Infinity;
490
+
491
+ this.foodPellets.forEach(pellet => {
492
+ const distance = aiCell.position.distanceTo(pellet.position);
493
+ if (distance < 15 && distance < nearestDistance) {
494
+ nearestDistance = distance;
495
+ nearestFood = pellet;
496
+ }
497
+ });
498
+
499
+ if (nearestFood) {
500
+ aiCell.userData.direction.copy(nearestFood.position).sub(aiCell.position).normalize();
501
+ } else {
502
+ aiCell.userData.direction.set(
503
+ (Math.random() - 0.5) * 2,
504
+ 0,
505
+ (Math.random() - 0.5) * 2
506
+ ).normalize();
507
+ }
508
+
509
+ aiCell.userData.changeDirectionTimer = 0;
510
+ }
511
+
512
+ const moveVector = aiCell.userData.direction.clone().multiplyScalar(aiCell.userData.speed);
513
+ aiCell.position.add(moveVector);
514
+
515
+ if (Math.abs(aiCell.position.x) > this.worldSize || Math.abs(aiCell.position.z) > this.worldSize) {
516
+ aiCell.userData.direction.multiplyScalar(-1);
517
+ }
518
+ aiCell.position.x = Math.max(-this.worldSize, Math.min(this.worldSize, aiCell.position.x));
519
+ aiCell.position.z = Math.max(-this.worldSize, Math.min(this.worldSize, aiCell.position.z));
520
+ });
521
+ }
522
+
523
+ checkCollisions() {
524
+ if (!this.gameRunning || !this.player) return;
525
+
526
+ // Player vs Food
527
+ for (let i = this.foodPellets.length - 1; i >= 0; i--) {
528
+ const pellet = this.foodPellets[i];
529
+ const distance = this.player.position.distanceTo(pellet.position);
530
+
531
+ if (distance < this.player.userData.size + pellet.userData.size) {
532
+ this.scene.remove(pellet);
533
+ this.foodPellets.splice(i, 1);
534
+ this.growPlayer(0.1);
535
+ this.score += 1;
536
+ this.spawnFoodPellet();
537
+ }
538
+ }
539
+
540
+ // Player vs AI cells
541
+ this.aiCells.forEach((aiCell, index) => {
542
+ const distance = this.player.position.distanceTo(aiCell.position);
543
+ const combinedSize = this.player.userData.size + aiCell.userData.size;
544
+
545
+ if (distance < combinedSize * 0.8) {
546
+ if (this.player.userData.mass > aiCell.userData.mass * 1.2) {
547
+ this.scene.remove(aiCell);
548
+ this.aiCells.splice(index, 1);
549
+ this.growPlayer(aiCell.userData.size * 0.5);
550
+ this.score += Math.floor(aiCell.userData.size * 10);
551
+ this.spawnNewAICell();
552
+ } else if (aiCell.userData.mass > this.player.userData.mass * 1.2) {
553
+ this.gameOver();
554
+ }
555
+ }
556
+ });
557
+
558
+ // AI vs Food
559
+ for (let i = this.foodPellets.length - 1; i >= 0; i--) {
560
+ const pellet = this.foodPellets[i];
561
+
562
+ for (let j = 0; j < this.aiCells.length; j++) {
563
+ const aiCell = this.aiCells[j];
564
+ const distance = aiCell.position.distanceTo(pellet.position);
565
+
566
+ if (distance < aiCell.userData.size + pellet.userData.size) {
567
+ this.scene.remove(pellet);
568
+ this.foodPellets.splice(i, 1);
569
+ this.growAICell(aiCell, 0.05);
570
+ this.spawnFoodPellet();
571
+ break;
572
+ }
573
+ }
574
+ }
575
+
576
+ // AI vs AI
577
+ for (let i = 0; i < this.aiCells.length; i++) {
578
+ for (let j = i + 1; j < this.aiCells.length; j++) {
579
+ const cell1 = this.aiCells[i];
580
+ const cell2 = this.aiCells[j];
581
+ const distance = cell1.position.distanceTo(cell2.position);
582
+ const combinedSize = cell1.userData.size + cell2.userData.size;
583
+
584
+ if (distance < combinedSize * 0.8) {
585
+ if (cell1.userData.mass > cell2.userData.mass * 1.3) {
586
+ this.scene.remove(cell2);
587
+ this.aiCells.splice(j, 1);
588
+ this.growAICell(cell1, cell2.userData.size * 0.3);
589
+ this.spawnNewAICell();
590
+ break;
591
+ } else if (cell2.userData.mass > cell1.userData.mass * 1.3) {
592
+ this.scene.remove(cell1);
593
+ this.aiCells.splice(i, 1);
594
+ this.growAICell(cell2, cell1.userData.size * 0.3);
595
+ this.spawnNewAICell();
596
+ break;
597
+ }
598
+ }
599
+ }
600
+ }
601
+ }
602
+
603
+ growPlayer(amount) {
604
+ this.player.userData.size += amount;
605
+ this.player.userData.mass = this.player.userData.size * this.player.userData.size;
606
+ this.player.userData.speed = Math.max(0.08, 0.25 - this.player.userData.size * 0.015);
607
+
608
+ this.player.scale.set(
609
+ this.player.userData.size / 2,
610
+ this.player.userData.size / 2,
611
+ this.player.userData.size / 2
612
+ );
613
+
614
+ this.player.position.y = this.player.userData.size;
615
+ }
616
+
617
+ growAICell(aiCell, amount) {
618
+ aiCell.userData.size += amount;
619
+ aiCell.userData.mass = aiCell.userData.size * aiCell.userData.size;
620
+ aiCell.userData.speed = Math.max(0.04, 0.18 - aiCell.userData.size * 0.015);
621
+
622
+ aiCell.scale.set(
623
+ aiCell.userData.size,
624
+ aiCell.userData.size,
625
+ aiCell.userData.size
626
+ );
627
+
628
+ aiCell.position.y = aiCell.userData.size;
629
+ }
630
+
631
+ spawnNewAICell() {
632
+ const colors = [0xff4444, 0x4444ff, 0xffff44, 0xff44ff, 0x44ffff, 0xffa500, 0x800080, 0xffc0cb];
633
+ const size = Math.random() * 3 + 1;
634
+ const geometry = new THREE.SphereGeometry(size, 12, 12);
635
+ const material = new THREE.MeshPhongMaterial({
636
+ color: colors[Math.floor(Math.random() * colors.length)],
637
+ shininess: 80,
638
+ specular: 0x111111
639
+ });
640
+
641
+ const aiCell = new THREE.Mesh(geometry, material);
642
+
643
+ const angle = Math.random() * Math.PI * 2;
644
+ aiCell.position.set(
645
+ Math.cos(angle) * this.worldSize * 0.9,
646
+ size,
647
+ Math.sin(angle) * this.worldSize * 0.9
648
+ );
649
+
650
+ aiCell.castShadow = true;
651
+ aiCell.userData = {
652
+ size: size,
653
+ speed: Math.max(0.04, 0.18 - size * 0.015),
654
+ isPlayer: false,
655
+ direction: new THREE.Vector3(
656
+ (Math.random() - 0.5) * 2,
657
+ 0,
658
+ (Math.random() - 0.5) * 2
659
+ ).normalize(),
660
+ changeDirectionTimer: 0,
661
+ mass: size * size
662
+ };
663
+
664
+ this.aiCells.push(aiCell);
665
+ this.scene.add(aiCell);
666
+ }
667
+
668
+ updateCamera() {
669
+ if (!this.player) return;
670
+
671
+ const targetCameraPosition = new THREE.Vector3(
672
+ this.player.position.x,
673
+ this.player.position.y + 20 + this.player.userData.size * 3,
674
+ this.player.position.z + 15 + this.player.userData.size * 2
675
+ );
676
+
677
+ this.camera.position.lerp(targetCameraPosition, 0.05);
678
+ this.camera.lookAt(this.player.position);
679
+ }
680
+
681
+ updateUI() {
682
+ document.getElementById('score').textContent = `Score: ${this.score}`;
683
+ }
684
+
685
+ gameOver() {
686
+ this.gameRunning = false;
687
+ document.getElementById('finalScore').textContent = this.score;
688
+ document.getElementById('gameOver').style.display = 'block';
689
+ }
690
+
691
+ restart() {
692
+ // Clear existing objects
693
+ if (this.player) {
694
+ this.scene.remove(this.player);
695
+ this.player = null;
696
+ }
697
+
698
+ this.aiCells.forEach(cell => this.scene.remove(cell));
699
+ this.aiCells = [];
700
+
701
+ this.foodPellets.forEach(pellet => this.scene.remove(pellet));
702
+ this.foodPellets = [];
703
+
704
+ this.projectiles.forEach(projectile => this.scene.remove(projectile));
705
+ this.projectiles = [];
706
+
707
+ // Reset game state
708
+ this.gameRunning = true;
709
+ this.score = 0;
710
+ this.lastMoveDirection.set(0, 0, 1);
711
+
712
+ // Recreate game objects
713
+ this.createPlayer();
714
+ this.createAICells();
715
+ this.createFoodPellets();
716
+
717
+ // Hide game over screen
718
+ document.getElementById('gameOver').style.display = 'none';
719
+ }
720
+
721
+ animate() {
722
+ requestAnimationFrame(() => this.animate());
723
+
724
+ if (this.gameRunning) {
725
+ this.updatePlayer();
726
+ this.updateAI();
727
+ this.updateProjectiles();
728
+ this.checkCollisions();
729
+ this.updateCamera();
730
+ this.updateUI();
731
+ }
732
+
733
+ this.renderer.render(this.scene, this.camera);
734
+ }
735
+ }
736
+
737
+ // Start the game
738
+ window.addEventListener('load', () => {
739
+ new AgarGame();
740
+ });
741
+ </script>
742
+ </body>
743
+ </html>