awacke1 commited on
Commit
8cdfdf8
·
verified ·
1 Parent(s): 4dda8ae

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1272 -18
index.html CHANGED
@@ -1,19 +1,1273 @@
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>Byte-Sized Brawl: Code Chaos</title>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ margin: 0;
12
+ overflow: hidden;
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #1a1a2e; /* Dark background */
15
+ color: #e0e0e0; /* Light text */
16
+ display: flex;
17
+ flex-direction: column;
18
+ align-items: center;
19
+ justify-content: flex-start; /* Align items to the top to ensure space for description */
20
+ min-height: 100vh;
21
+ }
22
+
23
+ #game-container {
24
+ position: relative;
25
+ width: 100vw;
26
+ height: 80vh; /* Make game container take 80% of viewport height */
27
+ display: flex;
28
+ justify-content: center;
29
+ align-items: center;
30
+ background-color: #1f1f3f; /* Slightly different background to see container boundaries */
31
+ }
32
+
33
+ canvas {
34
+ display: block;
35
+ background-color: #2a2a4a; /* Slightly lighter dark blue for canvas */
36
+ border-radius: 15px; /* Rounded corners for canvas */
37
+ box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); /* Glowing effect */
38
+ width: 100%; /* Ensure canvas fills container width */
39
+ height: 100%; /* Ensure canvas fills container height */
40
+ }
41
+
42
+ #ui-overlay {
43
+ position: absolute;
44
+ top: 0;
45
+ left: 0;
46
+ width: 100%;
47
+ height: 100%;
48
+ pointer-events: none; /* Allow mouse events to pass through to canvas */
49
+ display: flex;
50
+ flex-direction: column;
51
+ justify-content: space-between;
52
+ padding: 20px;
53
+ box-sizing: border-box;
54
+ }
55
+
56
+ .player-stats {
57
+ display: flex;
58
+ justify-content: space-between;
59
+ width: 100%;
60
+ }
61
+
62
+ .player-info {
63
+ background-color: rgba(0, 0, 0, 0.6);
64
+ padding: 10px 15px;
65
+ border-radius: 10px;
66
+ border: 1px solid #00ffff; /* Cyan border */
67
+ box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
68
+ pointer-events: auto; /* Allow interaction with these elements */
69
+ font-size: 1.1em;
70
+ display: flex;
71
+ flex-direction: column;
72
+ gap: 5px;
73
+ min-width: 150px;
74
+ text-align: center;
75
+ }
76
+
77
+ .health-bar-container {
78
+ width: 100%;
79
+ background-color: #555;
80
+ border-radius: 5px;
81
+ height: 10px;
82
+ overflow: hidden;
83
+ border: 1px solid #00ffff;
84
+ }
85
+
86
+ .health-bar {
87
+ height: 100%;
88
+ background-color: #00ff00; /* Green health */
89
+ width: 100%; /* Will be updated by JS */
90
+ transition: width 0.2s ease-out;
91
+ }
92
+
93
+ #reset-button-container {
94
+ width: 100%;
95
+ display: flex;
96
+ justify-content: center;
97
+ pointer-events: auto; /* Allow interaction with button */
98
+ }
99
+
100
+ #resetButton {
101
+ background-color: #4CAF50; /* Green */
102
+ color: white;
103
+ padding: 12px 25px;
104
+ border: none;
105
+ border-radius: 10px;
106
+ cursor: pointer;
107
+ font-size: 1.2em;
108
+ box-shadow: 0 5px #388e3c; /* Darker green shadow */
109
+ transition: all 0.2s ease;
110
+ pointer-events: auto; /* Allow interaction */
111
+ }
112
+
113
+ #resetButton:hover {
114
+ background-color: #45a049;
115
+ box-shadow: 0 3px #388e3c;
116
+ transform: translateY(2px);
117
+ }
118
+
119
+ #resetButton:active {
120
+ background-color: #3e8e41;
121
+ box-shadow: 0 0 #388e3c;
122
+ transform: translateY(5px);
123
+ }
124
+
125
+ #floating-message {
126
+ position: absolute;
127
+ top: 20%;
128
+ left: 50%;
129
+ transform: translate(-50%, -50%);
130
+ background-color: rgba(0, 0, 0, 0.8);
131
+ padding: 15px 25px;
132
+ border-radius: 10px;
133
+ border: 2px solid #00ffff;
134
+ box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
135
+ text-align: center;
136
+ font-size: 1.3em;
137
+ color: #ffffff;
138
+ z-index: 1000;
139
+ opacity: 0; /* Hidden by default */
140
+ transition: opacity 0.3s ease-in-out;
141
+ pointer-events: none; /* Allow mouse events to pass through */
142
+ }
143
+
144
+ .game-description-container {
145
+ width: 80%;
146
+ max-width: 900px;
147
+ background-color: rgba(0, 0, 0, 0.6);
148
+ padding: 20px;
149
+ border-radius: 15px;
150
+ border: 1px solid #00ffff;
151
+ box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
152
+ margin-top: 20px;
153
+ text-align: left;
154
+ overflow-y: auto; /* Enable scrolling for long descriptions */
155
+ max-height: 18vh; /* Adjust max-height to fit remaining space */
156
+ margin-bottom: 20px; /* Add some margin at the bottom */
157
+ }
158
+
159
+ .game-description-container h2 {
160
+ color: #00ffff;
161
+ margin-top: 0;
162
+ text-align: center;
163
+ }
164
+
165
+ .game-description-container h3 {
166
+ color: #99ffff;
167
+ margin-top: 15px;
168
+ }
169
+
170
+ .game-description-container ul {
171
+ list-style-type: disc;
172
+ margin-left: 20px;
173
+ }
174
+
175
+ .game-description-container li {
176
+ margin-bottom: 5px;
177
+ }
178
+
179
+ /* Responsive adjustments */
180
+ @media (max-width: 768px) {
181
+ .player-info {
182
+ font-size: 0.9em;
183
+ padding: 8px 10px;
184
+ min-width: unset;
185
+ }
186
+ #resetButton {
187
+ padding: 10px 20px;
188
+ font-size: 1em;
189
+ }
190
+ .game-description-container {
191
+ width: 95%;
192
+ padding: 15px;
193
+ font-size: 0.9em;
194
+ max-height: 25vh; /* Adjust max-height for smaller screens */
195
+ }
196
+ #game-container {
197
+ height: 65vh; /* Adjust game container height for smaller screens */
198
+ }
199
+ #floating-message {
200
+ font-size: 1em;
201
+ padding: 10px 15px;
202
+ }
203
+ }
204
+ </style>
205
+ </head>
206
+ <body>
207
+ <div id="game-container">
208
+ <canvas id="gameCanvas"></canvas>
209
+ <div id="ui-overlay">
210
+ <div class="player-stats">
211
+ <div class="player-info">
212
+ Player 1 (WASD/E)<br>
213
+ Life: <span id="player1Life">100</span>
214
+ <div class="health-bar-container"><div id="player1HealthBar" class="health-bar"></div></div>
215
+ KOs: <span id="player1KOs">0</span>
216
+ </div>
217
+ <div class="player-info">
218
+ Player 2 (IJKL/U)<br>
219
+ Life: <span id="player2Life">100</span>
220
+ <div class="health-bar-container"><div id="player2HealthBar" class="health-bar"></div></div>
221
+ KOs: <span id="player2KOs">0</span>
222
+ </div>
223
+ </div>
224
+ <div id="reset-button-container">
225
+ <button id="resetButton">Reset Game</button>
226
+ </div>
227
+ </div>
228
+ <div id="floating-message"></div>
229
+ </div>
230
+
231
+ <div class="game-description-container">
232
+ <h2>Byte-Sized Brawl: Code Chaos</h2>
233
+ <p>Welcome to "Byte-Sized Brawl: Code Chaos"! Dive into a retro-futuristic 3D arena, a simulated MMO testing ground where glitches are the least of your worries. Team up or face off against a friend in this top-down action-RPG, engaging in chaotic combat, solving byte-sized puzzles, and navigating a world on the brink of a digital meltdown!</p>
234
+
235
+ <h3>Game Parts:</h3>
236
+ <ul>
237
+ <li><strong>Playable Characters:</strong> Two stylized humanoid figures (Player 1 and Player 2), assembled from 3D primitives, ready for action.</li>
238
+ <li><strong>Glitch Bots:</strong> Various enemies constructed from primitive shapes, each with unique (and sometimes buggy) attack patterns.</li>
239
+ <li><strong>Interactive Environment:</strong> A 3D arena with obstacles, movable blocks, and pressure plates that might just lead to digital treasure... or a trap!</li>
240
+ <li><strong>NPCs (Non-Playable Code):</strong> Simple primitive figures offering cryptic quests and dialogue that might just make sense in the matrix.</li>
241
+ <li><strong>Skill Tree (Conceptual):</strong> While not fully implemented in this demo, imagine a branching path of digital upgrades to enhance your character's abilities.</li>
242
+ <li><strong>Digital Loot:</strong> Primitive-assembled items and equipment to boost your stats.</li>
243
+ <li><strong>Life/Score Display:</strong> Keep track of your vital signs and KOs with clear displays at the top of the screen.</li>
244
+ <li><strong>"Reset" Button:</strong> Your ultimate debug tool! Heals both players to full life and resets the current area, perfect for when things get too chaotic.</li>
245
+ </ul>
246
+
247
+ <h3>Method Steps:</h3>
248
+ <ul>
249
+ <li><strong>Explore the Digital Frontier:</strong> Navigate the top-down, full-screen 3D scene.</li>
250
+ <li><strong>Player 1 Controls (WASD):</strong> Move your character with precision.</li>
251
+ <li><strong>Player 2 Controls (IJKL):</strong> Guide your companion through the chaos.</li>
252
+ <li><strong>Left Player Action (E):</strong> Unleash a digital attack, activate objects, or try to understand the NPCs.</li>
253
+ <li><strong>Right Player Action (U):</strong> Perform your own digital assault, interact with the environment, or just flail wildly.</li>
254
+ <li><strong>Solve Byte-Sized Puzzles:</strong> Push blocks, activate pressure plates, and bypass laser grids (if they were here!).</li>
255
+ <li><strong>Complete Quests (Theoretically):</strong> Accept challenges from NPCs and try not to break the simulation.</li>
256
+ <li><strong>Level Up (Imagination Required):</strong> Gain experience and unlock new skills from your conceptual skill tree.</li>
257
+ <li><strong>Hit the Reset Button:</strong> When all else fails, use the "Reset Game" button to get a fresh start.</li>
258
+ </ul>
259
+
260
+ <h3>Rules of Engagement:</h3>
261
+ <ul>
262
+ <li><strong>Combat Rewards:</strong> Defeat Glitch Bots to earn experience and digital loot.</li>
263
+ <li><strong>Skill Gates:</strong> Certain areas or puzzles might require specific skills or items (in a full version!).</li>
264
+ <li><strong>Narrative Glitches:</strong> Dialogue choices might impact the story (or just confuse you further).</li>
265
+ <li><strong>Co-op or Compete:</strong> Work together to achieve common goals, or compete for the most KOs and resources.</li>
266
+ <li><strong>Incapacitation Protocol:</strong> If your life bar depletes, you're incapacitated! Your partner can revive you by getting close and using their action button, or you can both use the "Reset" button. If both players are down, it's game over!</li>
267
+ </ul>
268
+
269
+ <h3>What Makes It Fun:</h3>
270
+ <ul>
271
+ <li><strong>Retro-Futuristic Mashup:</strong> A unique blend of nostalgic 2D action-RPG vibes with modern 3D chaos.</li>
272
+ <li><strong>Dynamic Duo Gameplay:</strong> The cooperative/competitive modes add layers of strategy and hilarious interactions.</li>
273
+ <li><strong>Varied Digital Mayhem:</strong> From combat to puzzles and the promise of skill progression, there's always something to do.</li>
274
+ <li><strong>Witty Narrative:</strong> The "futuristic MMO testing ground" setting provides a fun, self-aware backdrop for your adventures.</li>
275
+ </ul>
276
+ </div>
277
+
278
+ <script>
279
+ // Global variables for Three.js
280
+ let scene, camera, renderer;
281
+ let player1, player2;
282
+ let enemies = [];
283
+ let movableBlock;
284
+ let pressurePlate;
285
+ let wallToOpen; // The wall that opens when pressure plate is activated
286
+ let powerups = []; // Array to hold power-up objects
287
+ let shieldVisual; // Visual representation of the co-op shield
288
+ let activeExplosions = []; // To manage particle explosions
289
+ let activeShieldParticles = []; // To manage shield healing particles
290
+
291
+ // Game state variables
292
+ const MAX_HEALTH = 100;
293
+ let player1Health = MAX_HEALTH;
294
+ let player2Health = MAX_HEALTH;
295
+ let player1KOs = 0;
296
+ let player2KOs = 0;
297
+ let player1Incapacitated = false;
298
+ let player2Incapacitated = false;
299
+ let pressurePlateActivated = false;
300
+ let isShieldActive = false; // New: Co-op shield state
301
+
302
+ // Wave and Scoring
303
+ let currentWave = 1;
304
+ let enemiesInCurrentWave = 0;
305
+ let enemiesDefeatedInWave = 0;
306
+ let scorePerEnemy = 10;
307
+ let totalScore = 0;
308
+
309
+ // Player movement and action states
310
+ const keys = {
311
+ w: false, a: false, s: false, d: false, e: false, // Player 1
312
+ i: false, j: false, k: false, l: false, u: false // Player 2
313
+ };
314
+ const PLAYER_SPEED = 0.5;
315
+ const BASE_ATTACK_RANGE = 10; // Base attack range
316
+ const COOP_ATTACK_RANGE_BOOST = 15; // Additional range when co-op shield is active
317
+ const ATTACK_COOLDOWN = 500; // milliseconds
318
+ const ATTACK_DURATION = 200; // milliseconds for attack animation
319
+ let player1LastAttackTime = 0;
320
+ let player2LastAttackTime = 0;
321
+ const ENEMY_SPEED = 0.1; // Slower enemy speed
322
+ const POWERUP_DURATION = 5000; // 5 seconds for attack/magic/armor boost
323
+ const SHIELD_RANGE = 20; // Distance for co-op shield activation
324
+ const COOP_ATTACK_WINDOW = 300; // Time window for combined attack (milliseconds)
325
+ const PARTICLE_LIFESPAN = 1000; // Particle system lifespan in ms
326
+
327
+ // UI elements
328
+ const player1LifeSpan = document.getElementById('player1Life');
329
+ const player2LifeSpan = document.getElementById('player2Life');
330
+ const player1KOsSpan = document.getElementById('player1KOs');
331
+ const player2KOsSpan = document.getElementById('player2KOs');
332
+ const player1HealthBar = document.getElementById('player1HealthBar');
333
+ const player2HealthBar = document.getElementById('player2HealthBar');
334
+ const resetButton = document.getElementById('resetButton');
335
+ const floatingMessage = document.getElementById('floating-message');
336
+ let messageTimeout; // To clear previous message timeouts
337
+
338
+ // Function to show a custom message box (now disappearing text)
339
+ function showMessage(message) {
340
+ clearTimeout(messageTimeout); // Clear any existing timeout
341
+ floatingMessage.textContent = message;
342
+ floatingMessage.style.opacity = 1;
343
+ messageTimeout = setTimeout(() => {
344
+ floatingMessage.style.opacity = 0;
345
+ }, 2000); // Disappear after 2 seconds
346
+ }
347
+
348
+ // --- Wave and Enemy Spawning Functions ---
349
+ function spawnEnemiesForWave(waveNumber) {
350
+ // Clear existing enemies
351
+ enemies.forEach(enemy => scene.remove(enemy));
352
+ enemies = [];
353
+
354
+ const numEnemies = Math.min(15, 3 + waveNumber * 2); // Max 15 enemies, scaling
355
+ scorePerEnemy = 10 * waveNumber; // Score increases per wave
356
+
357
+ for (let i = 0; i < numEnemies; i++) {
358
+ const x = (Math.random() - 0.5) * 100;
359
+ const z = (Math.random() - 0.5) * 100;
360
+ enemies.push(createEnemy(0x00ff00, x, 0, z));
361
+ }
362
+ enemies.forEach(enemy => scene.add(enemy));
363
+ enemiesInCurrentWave = numEnemies;
364
+ enemiesDefeatedInWave = 0;
365
+ showMessage(`Wave ${waveNumber} started! Score per enemy: ${scorePerEnemy}`);
366
+ }
367
+
368
+ function checkWaveCompletion() {
369
+ if (enemiesDefeatedInWave >= enemiesInCurrentWave) {
370
+ currentWave++;
371
+ showMessage(`Wave ${currentWave - 1} completed! Preparing Wave ${currentWave}...`);
372
+ setTimeout(() => spawnEnemiesForWave(currentWave), 2000); // Delay for next wave
373
+ }
374
+ }
375
+ // --- End Wave and Enemy Spawning Functions ---
376
+
377
+
378
+ // Initialize the game
379
+ window.onload = function() {
380
+ checkCanvasDimensions();
381
+ };
382
+
383
+ function checkCanvasDimensions() {
384
+ const canvas = document.getElementById('gameCanvas');
385
+ if (canvas.clientWidth > 0 && canvas.clientHeight > 0) {
386
+ console.log('Canvas dimensions are valid. Initializing Three.js...');
387
+ initThreeJS();
388
+ spawnEnemiesForWave(1); // Start the first wave
389
+ animate();
390
+ } else {
391
+ console.log('Canvas dimensions not yet valid. Retrying in 100ms...');
392
+ setTimeout(checkCanvasDimensions, 100);
393
+ }
394
+ }
395
+
396
+ function initThreeJS() {
397
+ console.log('initThreeJS called.');
398
+
399
+ scene = new THREE.Scene();
400
+ scene.background = new THREE.Color(0x2a2a4a);
401
+
402
+ const canvas = document.getElementById('gameCanvas');
403
+ const canvasWidth = canvas.clientWidth;
404
+ const canvasHeight = canvas.clientHeight;
405
+
406
+ console.log('initThreeJS - Canvas Width:', canvasWidth, 'Canvas Height:', canvasHeight);
407
+
408
+ const aspect = canvasWidth / canvasHeight;
409
+ const frustumSize = 120;
410
+
411
+ camera = new THREE.OrthographicCamera(
412
+ frustumSize * aspect / -2,
413
+ frustumSize * aspect / 2,
414
+ frustumSize / 2,
415
+ frustumSize / -2,
416
+ 1,
417
+ 1000
418
+ );
419
+ camera.position.set(0, 70, 0);
420
+ camera.lookAt(0, 0, 0);
421
+
422
+ renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
423
+ renderer.setSize(canvasWidth, canvasHeight);
424
+ renderer.setPixelRatio(window.devicePixelRatio);
425
+
426
+ const ambientLight = new THREE.AmbientLight(0x606060);
427
+ scene.add(ambientLight);
428
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
429
+ directionalLight.position.set(1, 1, 1).normalize();
430
+ scene.add(directionalLight);
431
+
432
+ const groundGeometry = new THREE.PlaneGeometry(150, 150);
433
+ const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x4a4a6a, side: THREE.DoubleSide });
434
+ const ground = new THREE.Mesh(groundGeometry, groundMaterial);
435
+ ground.rotation.x = Math.PI / 2;
436
+ scene.add(ground);
437
+
438
+ const gridHelper = new THREE.GridHelper(100, 10, 0x00ffff, 0x888888);
439
+ scene.add(gridHelper);
440
+
441
+ const axesHelper = new THREE.AxesHelper(50);
442
+ scene.add(axesHelper);
443
+
444
+ player1 = createPlayer(0xff0000, -20, 0, 0);
445
+ player2 = createPlayer(0x0000ff, 20, 0, 0);
446
+ scene.add(player1);
447
+ scene.add(player2);
448
+
449
+ // Create shield visual (initially hidden)
450
+ const shieldGeometry = new THREE.CylinderGeometry(SHIELD_RANGE, SHIELD_RANGE, 1, 32);
451
+ const shieldMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.2 });
452
+ shieldVisual = new THREE.Mesh(shieldGeometry, shieldMaterial);
453
+ shieldVisual.position.y = 5; // Place slightly above ground
454
+ shieldVisual.visible = false; // Hide initially
455
+ scene.add(shieldVisual);
456
+
457
+ // Initialize puzzle elements and powerups here, so they are always defined
458
+ movableBlock = createMovableBlock(0xffff00, -10, 0, -10);
459
+ scene.add(movableBlock);
460
+ pressurePlate = createPressurePlate(0x888888, 10, 0, -10);
461
+ scene.add(pressurePlate);
462
+ wallToOpen = createWall(0x663300, 10, 0, -20);
463
+ scene.add(wallToOpen);
464
+
465
+ powerups.push(createPowerup('health', -40, 0, 40));
466
+ powerups.push(createPowerup('attack', 40, 0, 40));
467
+ powerups.push(createPowerup('magic', -40, 0, -40));
468
+ powerups.push(createPowerup('armor', 40, 0, -40));
469
+ powerups.push(createPowerup('health', 0, 0, 0));
470
+ powerups.forEach(powerup => scene.add(powerup));
471
+
472
+
473
+ window.addEventListener('resize', onWindowResize, false);
474
+ document.addEventListener('keydown', onKeyDown, false);
475
+ document.addEventListener('keyup', onKeyUp, false);
476
+ resetButton.addEventListener('click', resetGame);
477
+
478
+ updateUI();
479
+ onWindowResize();
480
+ }
481
+
482
+ // --- Object Creation Functions ---
483
+
484
+ function createPlayer(color, x, y, z) {
485
+ const playerGroup = new THREE.Group();
486
+
487
+ // Body (Box)
488
+ const bodyGeometry = new THREE.BoxGeometry(4, 8, 4);
489
+ const bodyMaterial = new THREE.MeshLambertMaterial({ color: color });
490
+ const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
491
+ body.position.y = 4; // Center on ground
492
+ playerGroup.add(body);
493
+
494
+ // Head (Sphere)
495
+ const headGeometry = new THREE.SphereGeometry(2, 16, 16);
496
+ const headMaterial = new THREE.MeshLambertMaterial({ color: 0xffe0bd }); // Skin color
497
+ const head = new THREE.Mesh(headGeometry, headMaterial);
498
+ head.position.y = 10; // On top of body
499
+ playerGroup.add(head);
500
+
501
+ // Arms (Cylinders) - Now part of the player group for independent rotation
502
+ // Right arm (for weapon)
503
+ const armRightGroup = new THREE.Group();
504
+ const armGeometry = new THREE.CylinderGeometry(1, 1, 6, 8);
505
+ const armMaterial = new THREE.MeshLambertMaterial({ color: color });
506
+ const armRightMesh = new THREE.Mesh(armGeometry, armMaterial);
507
+ armRightMesh.position.set(0, 3, 0); // Position relative to arm group's pivot
508
+ armRightGroup.add(armRightMesh);
509
+ armRightGroup.position.set(3, 7, 0); // Position arm group relative to player body
510
+ armRightGroup.rotation.z = -Math.PI / 4; // Initial rotation
511
+ playerGroup.add(armRightGroup);
512
+ playerGroup.userData.armRight = armRightGroup; // Store reference for animation
513
+
514
+ // Weapon (simple box for now)
515
+ const weaponGeometry = new THREE.BoxGeometry(1, 1, 5);
516
+ const weaponMaterial = new THREE.MeshLambertMaterial({ color: 0x888888 });
517
+ const weapon = new THREE.Mesh(weaponGeometry, weaponMaterial);
518
+ weapon.position.set(0, 3, 2.5); // Position at the end of the arm
519
+ armRightGroup.add(weapon);
520
+ playerGroup.userData.weapon = weapon; // Store reference
521
+
522
+ // Left arm
523
+ const armLeft = new THREE.Mesh(armGeometry, armMaterial);
524
+ armLeft.position.set(-3, 7, 0);
525
+ armLeft.rotation.z = Math.PI / 4;
526
+ playerGroup.add(armLeft);
527
+
528
+ // Legs (Cylinders)
529
+ const legGeometry = new THREE.CylinderGeometry(1.5, 1.5, 4, 8);
530
+ const legMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 }); // Dark color for pants
531
+ const legLeft = new THREE.Mesh(legGeometry, legMaterial);
532
+ legLeft.position.set(-1.5, 2, 0);
533
+ playerGroup.add(legLeft);
534
+
535
+ const legRight = new THREE.Mesh(legGeometry, legMaterial);
536
+ legRight.position.set(1.5, 2, 0);
537
+ playerGroup.add(legRight);
538
+
539
+ playerGroup.position.set(x, y, z);
540
+ playerGroup.userData.health = MAX_HEALTH;
541
+ playerGroup.userData.isPlayer = true;
542
+ playerGroup.userData.incapacitated = false;
543
+ playerGroup.userData.isAttacking = false;
544
+ playerGroup.userData.attackBoost = 0; // No attack boost initially
545
+ playerGroup.userData.magicBoost = 0; // No magic boost initially
546
+ playerGroup.userData.armorBoost = 0; // No armor boost initially
547
+ return playerGroup;
548
+ }
549
+
550
+ function createEnemy(color, x, y, z) {
551
+ const enemyGroup = new THREE.Group();
552
+
553
+ // Main Body (Rounded Box)
554
+ const bodyGeometry = new THREE.BoxGeometry(6, 6, 6);
555
+ const bodyMaterial = new THREE.MeshLambertMaterial({ color: color });
556
+ const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
557
+ body.position.y = 3; // Center on ground
558
+ enemyGroup.add(body);
559
+
560
+ // Head (Octahedron for a more robotic/glitchy look)
561
+ const headGeometry = new THREE.OctahedronGeometry(3);
562
+ const headMaterial = new THREE.MeshLambertMaterial({ color: 0x888888 }); // Grey
563
+ const head = new THREE.Mesh(headGeometry, headMaterial);
564
+ head.position.y = 8; // On top of body
565
+ enemyGroup.add(head);
566
+
567
+ // Eyes (Small Spheres)
568
+ const eyeGeometry = new THREE.SphereGeometry(0.8, 8, 8);
569
+ const eyeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // Red eyes
570
+ const eyeLeft = new THREE.Mesh(eyeGeometry, eyeMaterial);
571
+ eyeLeft.position.set(-1.5, 9, 2.5);
572
+ head.add(eyeLeft);
573
+ const eyeRight = new THREE.Mesh(eyeGeometry, eyeMaterial);
574
+ eyeRight.position.set(1.5, 9, 2.5);
575
+ head.add(eyeRight);
576
+
577
+ // Legs (Thin Cylinders)
578
+ const legGeometry = new THREE.CylinderGeometry(0.8, 0.8, 4, 8);
579
+ const legMaterial = new THREE.MeshLambertMaterial({ color: 0x555555 });
580
+ const legFrontLeft = new THREE.Mesh(legGeometry, legMaterial);
581
+ legFrontLeft.position.set(-2, 0, -2);
582
+ enemyGroup.add(legFrontLeft);
583
+ const legFrontRight = new THREE.Mesh(legGeometry, legMaterial);
584
+ legFrontRight.position.set(2, 0, -2);
585
+ enemyGroup.add(legFrontRight);
586
+ const legBackLeft = new THREE.Mesh(legGeometry, legMaterial);
587
+ legBackLeft.position.set(-2, 0, 2);
588
+ enemyGroup.add(legBackLeft);
589
+ const legBackRight = new THREE.Mesh(legGeometry, legMaterial);
590
+ legBackRight.position.set(2, 0, 2);
591
+ enemyGroup.add(legBackRight);
592
+
593
+ // Antennas (Thin Cylinders on head)
594
+ const antennaGeometry = new THREE.CylinderGeometry(0.3, 0.3, 3, 8);
595
+ const antennaMaterial = new THREE.MeshLambertMaterial({ color: 0xaaaaaa });
596
+ const antennaLeft = new THREE.Mesh(antennaGeometry, antennaMaterial);
597
+ antennaLeft.position.set(-1.5, 11, 0);
598
+ antennaLeft.rotation.x = Math.PI / 4;
599
+ enemyGroup.add(antennaLeft);
600
+ const antennaRight = new THREE.Mesh(antennaGeometry, antennaMaterial);
601
+ antennaRight.position.set(1.5, 11, 0);
602
+ antennaRight.rotation.x = -Math.PI / 4;
603
+ enemyGroup.add(antennaRight);
604
+
605
+
606
+ enemyGroup.position.set(x, y, z);
607
+ enemyGroup.userData.health = 50; // Enemies have less health
608
+ enemyGroup.userData.isEnemy = true;
609
+ return enemyGroup;
610
+ }
611
+
612
+ function createMovableBlock(color, x, y, z) {
613
+ const geometry = new THREE.DodecahedronGeometry(6); // More interesting shape
614
+ const material = new THREE.MeshLambertMaterial({ color: color });
615
+ const block = new THREE.Mesh(geometry, material);
616
+ block.position.set(x, y + 6, z); // Center on ground
617
+ block.userData.isMovable = true;
618
+ return block;
619
+ }
620
+
621
+ function createPressurePlate(color, x, y, z) {
622
+ const geometry = new THREE.TorusGeometry(4, 1, 8, 32); // Flat torus shape
623
+ const material = new THREE.MeshLambertMaterial({ color: color });
624
+ const plate = new THREE.Mesh(geometry, material);
625
+ plate.rotation.x = Math.PI / 2; // Lay flat
626
+ plate.position.set(x, y + 0.5, z); // Slightly above ground
627
+ plate.userData.isPressurePlate = true;
628
+ return plate;
629
+ }
630
+
631
+ function createWall(color, x, y, z) {
632
+ // A more stylized barrier with multiple boxes
633
+ const wallGroup = new THREE.Group();
634
+ const segmentGeometry = new THREE.BoxGeometry(5, 15, 5);
635
+ const segmentMaterial = new THREE.MeshLambertMaterial({ color: color });
636
+
637
+ for (let i = -2; i <= 2; i++) {
638
+ const segment = new THREE.Mesh(segmentGeometry, segmentMaterial);
639
+ segment.position.set(i * 6, 7.5, 0); // Spaced segments
640
+ wallGroup.add(segment);
641
+ }
642
+ wallGroup.position.set(x, y, z);
643
+ wallGroup.userData.isWall = true;
644
+ return wallGroup;
645
+ }
646
+
647
+ function createPowerup(type, x, y, z) {
648
+ let geometry;
649
+ let material;
650
+ let powerupMesh;
651
+
652
+ switch (type) {
653
+ case 'health':
654
+ geometry = new THREE.SphereGeometry(3, 16, 16);
655
+ material = new THREE.MeshLambertMaterial({ color: 0xff0000 }); // Red sphere for health
656
+ powerupMesh = new THREE.Mesh(geometry, material);
657
+ break;
658
+ case 'attack':
659
+ geometry = new THREE.ConeGeometry(3, 6, 8);
660
+ material = new THREE.MeshLambertMaterial({ color: 0x00ffff }); // Cyan cone for attack boost
661
+ powerupMesh = new THREE.Mesh(geometry, material);
662
+ powerupMesh.rotation.x = Math.PI / 2; // Point it horizontally
663
+ break;
664
+ case 'magic':
665
+ geometry = new THREE.TetrahedronGeometry(4); // Pyramid for magic
666
+ material = new THREE.MeshLambertMaterial({ color: 0x8A2BE2 }); // Purple for magic
667
+ powerupMesh = new THREE.Mesh(geometry, material);
668
+ break;
669
+ case 'armor':
670
+ geometry = new THREE.BoxGeometry(5, 5, 5);
671
+ material = new THREE.MeshLambertMaterial({ color: 0x708090 }); // Slate gray for armor
672
+ powerupMesh = new THREE.Mesh(geometry, material);
673
+ break;
674
+ default:
675
+ geometry = new THREE.BoxGeometry(4, 4, 4);
676
+ material = new THREE.MeshLambertMaterial({ color: 0xcccccc });
677
+ powerupMesh = new THREE.Mesh(geometry, material);
678
+ break;
679
+ }
680
+
681
+ powerupMesh.position.set(x, y + (geometry.parameters.height ? geometry.parameters.height / 2 : 2), z);
682
+ powerupMesh.userData.isPowerup = true;
683
+ powerupMesh.userData.type = type;
684
+ return powerupMesh;
685
+ }
686
+
687
+ function createExplosionParticles(position, color) {
688
+ const particleCount = 50;
689
+ const positions = new Float32Array(particleCount * 3);
690
+ const colors = new Float32Array(particleCount * 3);
691
+ const sizes = new Float32Array(particleCount);
692
+
693
+ const pColor = new THREE.Color(color);
694
+
695
+ for (let i = 0; i < particleCount; i++) {
696
+ // Random position within a small sphere
697
+ positions[i * 3] = position.x + (Math.random() - 0.5) * 10;
698
+ positions[i * 3 + 1] = position.y + (Math.random() - 0.5) * 10 + 5; // Slightly above ground
699
+ positions[i * 3 + 2] = position.z + (Math.random() - 0.5) * 10;
700
+
701
+ colors[i * 3] = pColor.r;
702
+ colors[i * 3 + 1] = pColor.g;
703
+ colors[i * 3 + 2] = pColor.b;
704
+
705
+ sizes[i] = Math.random() * 2 + 1; // Random size
706
+ }
707
+
708
+ const geometry = new THREE.BufferGeometry();
709
+ geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
710
+ geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
711
+ geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); // Custom attribute for size
712
+
713
+ const material = new THREE.PointsMaterial({
714
+ size: 1, // Base size, actual size controlled by 'size' attribute
715
+ vertexColors: true,
716
+ transparent: true,
717
+ opacity: 1,
718
+ blending: THREE.AdditiveBlending,
719
+ sizeAttenuation: true // Particles closer to camera appear larger
720
+ });
721
+
722
+ const particles = new THREE.Points(geometry, material);
723
+ particles.userData.spawnTime = Date.now();
724
+ particles.userData.lifespan = PARTICLE_LIFESPAN;
725
+ particles.userData.velocity = [];
726
+ for (let i = 0; i < particleCount; i++) {
727
+ particles.userData.velocity.push(
728
+ new THREE.Vector3((Math.random() - 0.5) * 0.5, Math.random() * 0.5 + 0.1, (Math.random() - 0.5) * 0.5)
729
+ );
730
+ }
731
+ scene.add(particles);
732
+ activeExplosions.push(particles);
733
+ }
734
+
735
+ function createShieldHealingParticles(position) {
736
+ const particleCount = 5; // Fewer particles for healing
737
+ const positions = new Float32Array(particleCount * 3);
738
+ const colors = new Float32Array(particleCount * 3);
739
+ const sizes = new Float32Array(particleCount);
740
+
741
+ const pColor = new THREE.Color(0x00ff00); // Green for healing
742
+
743
+ for (let i = 0; i < particleCount; i++) {
744
+ positions[i * 3] = position.x + (Math.random() - 0.5) * 5;
745
+ positions[i * 3 + 1] = position.y + (Math.random() - 0.5) * 5 + 5;
746
+ positions[i * 3 + 2] = position.z + (Math.random() - 0.5) * 5;
747
+
748
+ colors[i * 3] = pColor.r;
749
+ colors[i * 3 + 1] = pColor.g;
750
+ colors[i * 3 + 2] = pColor.b;
751
+
752
+ sizes[i] = Math.random() * 1 + 0.5;
753
+ }
754
+
755
+ const geometry = new THREE.BufferGeometry();
756
+ geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
757
+ geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
758
+ geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
759
+
760
+ const material = new THREE.PointsMaterial({
761
+ size: 1,
762
+ vertexColors: true,
763
+ transparent: true,
764
+ opacity: 0.8,
765
+ blending: THREE.AdditiveBlending,
766
+ sizeAttenuation: true
767
+ });
768
+
769
+ const particles = new THREE.Points(geometry, material);
770
+ particles.userData.spawnTime = Date.now();
771
+ particles.userData.lifespan = PARTICLE_LIFESPAN;
772
+ particles.userData.velocity = [];
773
+ for (let i = 0; i < particleCount; i++) {
774
+ particles.userData.velocity.push(
775
+ new THREE.Vector3(0, Math.random() * 0.2 + 0.05, 0) // Move mostly upwards
776
+ );
777
+ }
778
+ scene.add(particles);
779
+ activeShieldParticles.push(particles);
780
+ }
781
+
782
+
783
+ // --- Game Logic Functions ---
784
+
785
+ function onWindowResize() {
786
+ const canvas = document.getElementById('gameCanvas');
787
+ const newWidth = canvas.clientWidth;
788
+ const newHeight = canvas.clientHeight;
789
+
790
+ console.log('Resizing - Canvas Width:', newWidth, 'Canvas Height:', newHeight);
791
+
792
+ if (newWidth > 0 && newHeight > 0) {
793
+ const aspect = newWidth / newHeight;
794
+ const frustumSize = 120;
795
+
796
+ camera.left = frustumSize * aspect / -2;
797
+ camera.right = frustumSize * aspect / 2;
798
+ camera.top = frustumSize / 2;
799
+ camera.bottom = frustumSize / -2;
800
+ camera.updateProjectionMatrix();
801
+
802
+ renderer.setSize(newWidth, newHeight);
803
+ }
804
+ }
805
+
806
+ function onKeyDown(event) {
807
+ switch (event.key) {
808
+ case 'w': keys.w = true; break; case 'a': keys.a = true; break;
809
+ case 's': keys.s = true; break; case 'd': keys.d = true; break;
810
+ case 'e': keys.e = true; break;
811
+
812
+ case 'i': keys.i = true; break; case 'j': keys.j = true; break;
813
+ case 'k': keys.k = true; break; case 'l': keys.l = true; break;
814
+ case 'u': keys.u = true; break;
815
+ }
816
+ }
817
+
818
+ function onKeyUp(event) {
819
+ switch (event.key) {
820
+ case 'w': keys.w = false; break; case 'a': keys.a = false; break;
821
+ case 's': keys.s = false; break; case 'd': keys.d = false; break;
822
+ case 'e': keys.e = false; break;
823
+
824
+ case 'i': keys.i = false; break; case 'j': keys.j = false; break;
825
+ case 'k': keys.k = false; break; case 'l': keys.l = false; break;
826
+ case 'u': keys.u = false; break;
827
+ }
828
+ }
829
+
830
+ function updatePlayerMovement(player, deltaX, deltaZ) {
831
+ if (player.userData.incapacitated) return;
832
+
833
+ const newX = player.position.x + deltaX;
834
+ const newZ = player.position.z + deltaZ;
835
+
836
+ const boundary = 70;
837
+ if (Math.abs(newX) < boundary && Math.abs(newZ) < boundary) {
838
+ player.position.x = newX;
839
+ player.position.z = newZ;
840
+ }
841
+ }
842
+
843
+ function handlePlayerActions() {
844
+ const currentTime = Date.now();
845
+
846
+ // Player 1 Action (E)
847
+ if (keys.e && !player1Incapacitated) {
848
+ if (player2Incapacitated && player1.position.distanceTo(player2.position) < 10) {
849
+ player2Incapacitated = false;
850
+ player2Health = Math.min(MAX_HEALTH, player2Health + MAX_HEALTH / 2); // Revive with half health
851
+ updateUI();
852
+ showMessage("Player 1 revived Player 2!");
853
+ } else if (!player1.userData.isAttacking && currentTime - player1LastAttackTime > ATTACK_COOLDOWN) {
854
+ player1.userData.isAttacking = true;
855
+ player1.userData.attackStartTime = currentTime;
856
+ player1LastAttackTime = currentTime;
857
+ }
858
+ }
859
+
860
+ // Player 2 Action (U)
861
+ if (keys.u && !player2Incapacitated) {
862
+ if (player1Incapacitated && player2.position.distanceTo(player1.position) < 10) {
863
+ player1Incapacitated = false;
864
+ player1Health = Math.min(MAX_HEALTH, player1Health + MAX_HEALTH / 2); // Revive with half health
865
+ updateUI();
866
+ showMessage("Player 2 revived Player 1!");
867
+ } else if (!player2.userData.isAttacking && currentTime - player2LastAttackTime > ATTACK_COOLDOWN) {
868
+ player2.userData.isAttacking = true;
869
+ player2.userData.attackStartTime = currentTime;
870
+ player2LastAttackTime = currentTime;
871
+ }
872
+ }
873
+ }
874
+
875
+ function animatePlayerAttack(player) {
876
+ if (!player.userData.isAttacking) return;
877
+
878
+ const currentTime = Date.now();
879
+ const elapsedTime = currentTime - player.userData.attackStartTime;
880
+ const progress = Math.min(1, elapsedTime / ATTACK_DURATION);
881
+
882
+ const startAngle = -Math.PI / 4;
883
+ const endAngle = Math.PI * 3 / 4;
884
+
885
+ if (progress < 0.5) {
886
+ player.userData.armRight.rotation.z = startAngle + (endAngle - startAngle) * (progress * 2);
887
+ } else {
888
+ player.userData.armRight.rotation.z = endAngle - (endAngle - startAngle) * ((progress - 0.5) * 2);
889
+ }
890
+
891
+ if (progress >= 0.25 && progress <= 0.75 && !player.userData.damageDealtThisSwing) {
892
+ let currentAttackRange = BASE_ATTACK_RANGE;
893
+ if (isShieldActive) {
894
+ currentAttackRange += COOP_ATTACK_RANGE_BOOST;
895
+ }
896
+ if (player.userData.magicBoost > currentTime) { // Magic boost increases range
897
+ currentAttackRange *= 1.5;
898
+ }
899
+
900
+ enemies.forEach(enemy => {
901
+ if (enemy.userData.health > 0 && player.position.distanceTo(enemy.position) < currentAttackRange) {
902
+ // Check for combined attack
903
+ const otherPlayer = (player === player1) ? player2 : player1;
904
+ const otherPlayerLastAttackTime = (player === player1) ? player2LastAttackTime : player1LastAttackTime;
905
+
906
+ if (isShieldActive && otherPlayer.userData.isAttacking && (currentTime - otherPlayerLastAttackTime < COOP_ATTACK_WINDOW)) {
907
+ showMessage("Combined Attack! Monster Instantly Defeated!");
908
+ enemy.userData.health = 0; // Instant kill
909
+ } else {
910
+ showMessage("Monster Instantly Defeated!");
911
+ enemy.userData.health = 0; // Instant kill
912
+ }
913
+
914
+ if (enemy.userData.health <= 0) {
915
+ scene.remove(enemy);
916
+ createExplosionParticles(enemy.position, 0xffa500); // Orange explosion
917
+ if (player === player1) player1KOs++;
918
+ else player2KOs++;
919
+ totalScore += scorePerEnemy; // Add score
920
+ enemiesDefeatedInWave++;
921
+ checkWaveCompletion();
922
+ }
923
+ updateUI();
924
+ }
925
+ });
926
+ player.userData.damageDealtThisSwing = true;
927
+ }
928
+
929
+ if (progress >= 1) {
930
+ player.userData.isAttacking = false;
931
+ player.userData.armRight.rotation.z = startAngle;
932
+ player.userData.damageDealtThisSwing = false;
933
+ }
934
+ }
935
+
936
+ function updateEnemyLogic() {
937
+ enemies.forEach(enemy => {
938
+ if (enemy.userData.health <= 0) return;
939
+
940
+ let targetPlayer = null;
941
+ const distToP1 = enemy.position.distanceTo(player1.position);
942
+ const distToP2 = enemy.position.distanceTo(player2.position);
943
+
944
+ if (!player1Incapacitated && !player2Incapacitated) {
945
+ targetPlayer = (distToP1 < distToP2) ? player1 : player2;
946
+ } else if (!player1Incapacitated) {
947
+ targetPlayer = player1;
948
+ } else if (!player2Incapacitated) {
949
+ targetPlayer = player2;
950
+ } else {
951
+ return;
952
+ }
953
+
954
+ if (targetPlayer) {
955
+ const direction = new THREE.Vector3().subVectors(targetPlayer.position, enemy.position).normalize();
956
+ enemy.position.addScaledVector(direction, ENEMY_SPEED);
957
+
958
+ if (enemy.position.distanceTo(targetPlayer.position) < 8) {
959
+ let damage = 0.5;
960
+ if (isShieldActive) {
961
+ damage *= 0.1; // Reduce damage significantly if shield is active
962
+ }
963
+ if (targetPlayer.userData.armorBoost > Date.now()) { // Armor boost reduces damage
964
+ damage *= 0.5;
965
+ }
966
+
967
+ if (targetPlayer === player1 && !player1Incapacitated) {
968
+ player1Health -= damage;
969
+ if (player1Health <= 0) {
970
+ player1Health = 0;
971
+ player1Incapacitated = true;
972
+ showMessage("Player 1 incapacitated! Player 2, revive them or reset!");
973
+ }
974
+ } else if (targetPlayer === player2 && !player2Incapacitated) {
975
+ player2Health -= damage;
976
+ if (player2Health <= 0) {
977
+ player2Health = 0;
978
+ player2Incapacitated = true;
979
+ showMessage("Player 2 incapacitated! Player 1, revive them or reset!");
980
+ }
981
+ }
982
+ updateUI();
983
+ }
984
+ }
985
+ });
986
+ }
987
+
988
+ function handleMovableBlock() {
989
+ // Simplified collision check for pushing block
990
+ const players = [player1, player2];
991
+ players.forEach(player => {
992
+ if (player.userData.incapacitated) return;
993
+ const distToBlock = player.position.distanceTo(movableBlock.position);
994
+ if (distToBlock < 10) {
995
+ const direction = new THREE.Vector3().subVectors(movableBlock.position, player.position).normalize();
996
+ movableBlock.position.addScaledVector(direction, PLAYER_SPEED * 0.5); // Push slower than player movement
997
+ // Basic boundary for block
998
+ const blockBoundary = 60;
999
+ movableBlock.position.x = Math.max(-blockBoundary, Math.min(blockBoundary, movableBlock.position.x));
1000
+ movableBlock.position.z = Math.max(-blockBoundary, Math.min(blockBoundary, movableBlock.position.z));
1001
+ }
1002
+ });
1003
+
1004
+ const distanceToPlate = movableBlock.position.distanceTo(pressurePlate.position);
1005
+ if (distanceToPlate < 5 && !pressurePlateActivated) {
1006
+ pressurePlateActivated = true;
1007
+ scene.remove(wallToOpen);
1008
+ showMessage("A path has opened!");
1009
+ } else if (distanceToPlate >= 5 && pressurePlateActivated) {
1010
+ // Optional: wall reappears if block leaves plate
1011
+ // if (!scene.children.includes(wallToOpen)) {
1012
+ // scene.add(wallToOpen);
1013
+ // }
1014
+ // pressurePlateActivated = false;
1015
+ }
1016
+ }
1017
+
1018
+ function checkPowerupCollisions() {
1019
+ const currentTime = Date.now();
1020
+ const players = [player1, player2];
1021
+
1022
+ for (let i = powerups.length - 1; i >= 0; i--) {
1023
+ const powerup = powerups[i];
1024
+ powerup.rotation.y += 0.02;
1025
+
1026
+ players.forEach(player => {
1027
+ if (player.position.distanceTo(powerup.position) < 5) {
1028
+ switch (powerup.userData.type) {
1029
+ case 'health':
1030
+ if (player === player1) player1Health = Math.min(MAX_HEALTH, player1Health + 30);
1031
+ else player2Health = Math.min(MAX_HEALTH, player2Health + 30);
1032
+ showMessage(`${player === player1 ? 'Player 1' : 'Player 2'} picked up Health!`);
1033
+ break;
1034
+ case 'attack':
1035
+ player.userData.attackBoost = currentTime + POWERUP_DURATION;
1036
+ showMessage(`${player === player1 ? 'Player 1' : 'Player 2'} picked up Attack Boost!`);
1037
+ break;
1038
+ case 'magic':
1039
+ player.userData.magicBoost = currentTime + POWERUP_DURATION;
1040
+ showMessage(`${player === player1 ? 'Player 1' : 'Player 2'} picked up Magic Boost!`);
1041
+ break;
1042
+ case 'armor':
1043
+ player.userData.armorBoost = currentTime + POWERUP_DURATION;
1044
+ showMessage(`${player === player1 ? 'Player 1' : 'Player 2'} picked up Armor Boost!`);
1045
+ break;
1046
+ }
1047
+ scene.remove(powerup);
1048
+ powerups.splice(i, 1);
1049
+ updateUI();
1050
+ }
1051
+ });
1052
+ }
1053
+
1054
+ // Decay boosts
1055
+ players.forEach(player => {
1056
+ if (player.userData.attackBoost > 0 && currentTime > player.userData.attackBoost) {
1057
+ player.userData.attackBoost = 0;
1058
+ showMessage(`${player === player1 ? 'Player 1' : 'Player 2'}'s Attack Boost expired!`);
1059
+ }
1060
+ if (player.userData.magicBoost > 0 && currentTime > player.userData.magicBoost) {
1061
+ player.userData.magicBoost = 0;
1062
+ showMessage(`${player === player1 ? 'Player 1' : 'Player 2'}'s Magic Boost expired!`);
1063
+ }
1064
+ if (player.userData.armorBoost > 0 && currentTime > player.userData.armorBoost) {
1065
+ player.userData.armorBoost = 0;
1066
+ showMessage(`${player === player1 ? 'Player 1' : 'Player 2'}'s Armor Boost expired!`);
1067
+ }
1068
+ });
1069
+ }
1070
+
1071
+ function updateCoopShield() {
1072
+ const distanceBetweenPlayers = player1.position.distanceTo(player2.position);
1073
+ const wasShieldActive = isShieldActive;
1074
+
1075
+ if (distanceBetweenPlayers < SHIELD_RANGE && !player1Incapacitated && !player2Incapacitated) {
1076
+ isShieldActive = true;
1077
+ shieldVisual.position.copy(player1.position).lerp(player2.position, 0.5);
1078
+ shieldVisual.visible = true;
1079
+
1080
+ // Continuously spawn healing particles
1081
+ if (Math.random() < 0.1) { // Spawn rate
1082
+ createShieldHealingParticles(player1.position);
1083
+ createShieldHealingParticles(player2.position);
1084
+ }
1085
+
1086
+ if (!wasShieldActive) {
1087
+ showMessage("Co-op Shield Activated!");
1088
+ }
1089
+ } else {
1090
+ isShieldActive = false;
1091
+ shieldVisual.visible = false;
1092
+ if (wasShieldActive) {
1093
+ showMessage("Co-op Shield Deactivated.");
1094
+ }
1095
+ }
1096
+ }
1097
+
1098
+ function updateParticleSystems() {
1099
+ const currentTime = Date.now();
1100
+
1101
+ // Update explosion particles
1102
+ for (let i = activeExplosions.length - 1; i >= 0; i--) {
1103
+ const particles = activeExplosions[i];
1104
+ const elapsedTime = currentTime - particles.userData.spawnTime;
1105
+ const progress = elapsedTime / particles.userData.lifespan;
1106
+
1107
+ if (progress >= 1) {
1108
+ scene.remove(particles);
1109
+ activeExplosions.splice(i, 1);
1110
+ continue;
1111
+ }
1112
+
1113
+ // Update particle positions and opacity
1114
+ const positions = particles.geometry.attributes.position.array;
1115
+ const sizes = particles.geometry.attributes.size.array;
1116
+ const velocities = particles.userData.velocity;
1117
+ const material = particles.material;
1118
+
1119
+ material.opacity = 1 - progress; // Fade out
1120
+
1121
+ for (let j = 0; j < positions.length / 3; j++) {
1122
+ positions[j * 3] += velocities[j].x;
1123
+ positions[j * 3 + 1] += velocities[j].y;
1124
+ positions[j * 3 + 2] += velocities[j].z;
1125
+ // Make particles shrink
1126
+ sizes[j] = (1 - progress) * (particles.userData.initialSizes ? particles.userData.initialSizes[j] : sizes[j]);
1127
+ }
1128
+ particles.geometry.attributes.position.needsUpdate = true;
1129
+ particles.geometry.attributes.size.needsUpdate = true;
1130
+ }
1131
+
1132
+ // Update shield healing particles
1133
+ for (let i = activeShieldParticles.length - 1; i >= 0; i--) {
1134
+ const particles = activeShieldParticles[i];
1135
+ const elapsedTime = currentTime - particles.userData.spawnTime;
1136
+ const progress = elapsedTime / particles.userData.lifespan;
1137
+
1138
+ if (progress >= 1) {
1139
+ scene.remove(particles);
1140
+ activeShieldParticles.splice(i, 1);
1141
+ continue;
1142
+ }
1143
+
1144
+ const positions = particles.geometry.attributes.position.array;
1145
+ const velocities = particles.userData.velocity;
1146
+ const material = particles.material;
1147
+
1148
+ material.opacity = 1 - progress;
1149
+
1150
+ for (let j = 0; j < positions.length / 3; j++) {
1151
+ positions[j * 3] += velocities[j].x;
1152
+ positions[j * 3 + 1] += velocities[j].y;
1153
+ positions[j * 3 + 2] += velocities[j].z;
1154
+ }
1155
+ particles.geometry.attributes.position.needsUpdate = true;
1156
+ }
1157
+ }
1158
+
1159
+
1160
+ function updateUI() {
1161
+ player1LifeSpan.textContent = Math.max(0, Math.floor(player1Health));
1162
+ player2LifeSpan.textContent = Math.max(0, Math.floor(player2Health));
1163
+ // For now, let's just use player1KOs as total score
1164
+ document.getElementById('player1KOs').textContent = totalScore;
1165
+ document.getElementById('player2KOs').textContent = `Wave: ${currentWave}`;
1166
+
1167
+
1168
+ player1HealthBar.style.width = `${(player1Health / MAX_HEALTH) * 100}%`;
1169
+ player2HealthBar.style.width = `${(player2Health / MAX_HEALTH) * 100}%`;
1170
+
1171
+ player1.visible = !player1Incapacitated;
1172
+ player2.visible = !player2Incapacitated;
1173
+
1174
+ if (player1Incapacitated && player2Incapacitated) {
1175
+ showMessage("Game Over! Both players incapacitated. Press Reset to restart.");
1176
+ // Prevent further game logic until reset
1177
+ return;
1178
+ }
1179
+ }
1180
+
1181
+ function resetGame() {
1182
+ player1Health = MAX_HEALTH;
1183
+ player2Health = MAX_HEALTH;
1184
+ player1KOs = 0;
1185
+ player2KOs = 0;
1186
+ totalScore = 0; // Reset total score
1187
+ currentWave = 1; // Reset wave
1188
+ player1Incapacitated = false;
1189
+ player2Incapacitated = false;
1190
+ pressurePlateActivated = false;
1191
+ isShieldActive = false;
1192
+
1193
+ player1.position.set(-20, 0, 0);
1194
+ player2.position.set(20, 0, 0);
1195
+ player1.userData.isAttacking = false;
1196
+ player2.userData.isAttacking = false;
1197
+ player1.userData.attackBoost = 0;
1198
+ player2.userData.attackBoost = 0;
1199
+ player1.userData.magicBoost = 0;
1200
+ player2.userData.magicBoost = 0;
1201
+ player1.userData.armorBoost = 0;
1202
+ player2.userData.armorBoost = 0;
1203
+ player1.userData.armRight.rotation.z = -Math.PI / 4;
1204
+ player2.userData.armRight.rotation.z = -Math.PI / 4;
1205
+
1206
+ enemies.forEach(enemy => scene.remove(enemy));
1207
+ enemies = [];
1208
+ powerups.forEach(powerup => scene.remove(powerup));
1209
+ powerups = [];
1210
+ activeExplosions.forEach(p => scene.remove(p));
1211
+ activeExplosions = [];
1212
+ activeShieldParticles.forEach(p => scene.remove(p));
1213
+ activeShieldParticles = [];
1214
+
1215
+ // Remove old puzzle elements from scene if they exist
1216
+ if (movableBlock && movableBlock.parent) scene.remove(movableBlock);
1217
+ if (pressurePlate && pressurePlate.parent) scene.remove(pressurePlate);
1218
+ if (wallToOpen && wallToOpen.parent) scene.remove(wallToOpen);
1219
+
1220
+ // Re-create and add initial puzzle elements
1221
+ movableBlock = createMovableBlock(0xffff00, -10, 0, -10);
1222
+ scene.add(movableBlock);
1223
+ pressurePlate = createPressurePlate(0x888888, 10, 0, -10);
1224
+ scene.add(pressurePlate);
1225
+ wallToOpen = createWall(0x663300, 10, 0, -20);
1226
+ scene.add(wallToOpen);
1227
+ pressurePlateActivated = false; // Ensure wall is reset to its original state
1228
+
1229
+ powerups.push(createPowerup('health', -40, 0, 40));
1230
+ powerups.push(createPowerup('attack', 40, 0, 40));
1231
+ powerups.push(createPowerup('magic', -40, 0, -40));
1232
+ powerups.push(createPowerup('armor', 40, 0, -40));
1233
+ powerups.push(createPowerup('health', 0, 0, 0));
1234
+ powerups.forEach(powerup => scene.add(powerup));
1235
+
1236
+ shieldVisual.visible = false;
1237
+
1238
+ spawnEnemiesForWave(currentWave); // Start the first wave again
1239
+ updateUI();
1240
+ }
1241
+
1242
+ // Animation loop
1243
+ function animate() {
1244
+ requestAnimationFrame(animate);
1245
+
1246
+ // Only update game logic if not game over
1247
+ if (!(player1Incapacitated && player2Incapacitated)) {
1248
+ if (keys.w) updatePlayerMovement(player1, 0, -PLAYER_SPEED);
1249
+ if (keys.s) updatePlayerMovement(player1, 0, PLAYER_SPEED);
1250
+ if (keys.a) updatePlayerMovement(player1, -PLAYER_SPEED, 0);
1251
+ if (keys.d) updatePlayerMovement(player1, PLAYER_SPEED, 0);
1252
+
1253
+ if (keys.i) updatePlayerMovement(player2, 0, -PLAYER_SPEED);
1254
+ if (keys.k) updatePlayerMovement(player2, 0, PLAYER_SPEED);
1255
+ if (keys.j) updatePlayerMovement(player2, -PLAYER_SPEED, 0);
1256
+ if (keys.l) updatePlayerMovement(player2, PLAYER_SPEED);
1257
+
1258
+ handlePlayerActions();
1259
+ animatePlayerAttack(player1);
1260
+ animatePlayerAttack(player2);
1261
+ updateEnemyLogic();
1262
+ handleMovableBlock();
1263
+ checkPowerupCollisions();
1264
+ updateCoopShield();
1265
+ }
1266
+ updateParticleSystems(); // Always update particles, even if game over
1267
+ updateUI();
1268
+
1269
+ renderer.render(scene, camera);
1270
+ }
1271
+ </script>
1272
+ </body>
1273
  </html>