Spaces:

awacke1
/

ByteSizeBrawlCodeChaosGame

Running

App Files Files Community

awacke1 commited on 9 days ago

Commit

8cdfdf8

verified ·

1 Parent(s): 4dda8ae

Update index.html

Browse files

Files changed (1) hide show

index.html +1272 -18

index.html CHANGED Viewed

@@ -1,19 +1,1273 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Byte-Sized Brawl: Code Chaos</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Inter', sans-serif;
+            background-color: #1a1a2e; /* Dark background */
+            color: #e0e0e0; /* Light text */
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start; /* Align items to the top to ensure space for description */
+            min-height: 100vh;
+        }
+        #game-container {
+            position: relative;
+            width: 100vw;
+            height: 80vh; /* Make game container take 80% of viewport height */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #1f1f3f; /* Slightly different background to see container boundaries */
+        }
+        canvas {
+            display: block;
+            background-color: #2a2a4a; /* Slightly lighter dark blue for canvas */
+            border-radius: 15px; /* Rounded corners for canvas */
+            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); /* Glowing effect */
+            width: 100%; /* Ensure canvas fills container width */
+            height: 100%; /* Ensure canvas fills container height */
+        }
+        #ui-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none; /* Allow mouse events to pass through to canvas */
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+        .player-stats {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+        }
+        .player-info {
+            background-color: rgba(0, 0, 0, 0.6);
+            padding: 10px 15px;
+            border-radius: 10px;
+            border: 1px solid #00ffff; /* Cyan border */
+            box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+            pointer-events: auto; /* Allow interaction with these elements */
+            font-size: 1.1em;
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            min-width: 150px;
+            text-align: center;
+        }
+        .health-bar-container {
+            width: 100%;
+            background-color: #555;
+            border-radius: 5px;
+            height: 10px;
+            overflow: hidden;
+            border: 1px solid #00ffff;
+        }
+        .health-bar {
+            height: 100%;
+            background-color: #00ff00; /* Green health */
+            width: 100%; /* Will be updated by JS */
+            transition: width 0.2s ease-out;
+        }
+        #reset-button-container {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            pointer-events: auto; /* Allow interaction with button */
+        }
+        #resetButton {
+            background-color: #4CAF50; /* Green */
+            color: white;
+            padding: 12px 25px;
+            border: none;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 1.2em;
+            box-shadow: 0 5px #388e3c; /* Darker green shadow */
+            transition: all 0.2s ease;
+            pointer-events: auto; /* Allow interaction */
+        }
+        #resetButton:hover {
+            background-color: #45a049;
+            box-shadow: 0 3px #388e3c;
+            transform: translateY(2px);
+        }
+        #resetButton:active {
+            background-color: #3e8e41;
+            box-shadow: 0 0 #388e3c;
+            transform: translateY(5px);
+        }
+        #floating-message {
+            position: absolute;
+            top: 20%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: rgba(0, 0, 0, 0.8);
+            padding: 15px 25px;
+            border-radius: 10px;
+            border: 2px solid #00ffff;
+            box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
+            text-align: center;
+            font-size: 1.3em;
+            color: #ffffff;
+            z-index: 1000;
+            opacity: 0; /* Hidden by default */
+            transition: opacity 0.3s ease-in-out;
+            pointer-events: none; /* Allow mouse events to pass through */
+        }
+        .game-description-container {
+            width: 80%;
+            max-width: 900px;
+            background-color: rgba(0, 0, 0, 0.6);
+            padding: 20px;
+            border-radius: 15px;
+            border: 1px solid #00ffff;
+            box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
+            margin-top: 20px;
+            text-align: left;
+            overflow-y: auto; /* Enable scrolling for long descriptions */
+            max-height: 18vh; /* Adjust max-height to fit remaining space */
+            margin-bottom: 20px; /* Add some margin at the bottom */
+        }
+        .game-description-container h2 {
+            color: #00ffff;
+            margin-top: 0;
+            text-align: center;
+        }
+        .game-description-container h3 {
+            color: #99ffff;
+            margin-top: 15px;
+        }
+        .game-description-container ul {
+            list-style-type: disc;
+            margin-left: 20px;
+        }
+        .game-description-container li {
+            margin-bottom: 5px;
+        }
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .player-info {
+                font-size: 0.9em;
+                padding: 8px 10px;
+                min-width: unset;
+            }
+            #resetButton {
+                padding: 10px 20px;
+                font-size: 1em;
+            }
+            .game-description-container {
+                width: 95%;
+                padding: 15px;
+                font-size: 0.9em;
+                max-height: 25vh; /* Adjust max-height for smaller screens */
+            }
+            #game-container {
+                height: 65vh; /* Adjust game container height for smaller screens */
+            }
+            #floating-message {
+                font-size: 1em;
+                padding: 10px 15px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <canvas id="gameCanvas"></canvas>
+        <div id="ui-overlay">
+            <div class="player-stats">
+                <div class="player-info">
+                    Player 1 (WASD/E)<br>
+                    Life: <span id="player1Life">100</span>
+                    <div class="health-bar-container"><div id="player1HealthBar" class="health-bar"></div></div>
+                    KOs: <span id="player1KOs">0</span>
+                </div>
+                <div class="player-info">
+                    Player 2 (IJKL/U)<br>
+                    Life: <span id="player2Life">100</span>
+                    <div class="health-bar-container"><div id="player2HealthBar" class="health-bar"></div></div>
+                    KOs: <span id="player2KOs">0</span>
+                </div>
+            </div>
+            <div id="reset-button-container">
+                <button id="resetButton">Reset Game</button>
+            </div>
+        </div>
+        <div id="floating-message"></div>
+    </div>
+    <div class="game-description-container">
+        <h2>Byte-Sized Brawl: Code Chaos</h2>
+        <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>
+        <h3>Game Parts:</h3>
+        <ul>
+            <li><strong>Playable Characters:</strong> Two stylized humanoid figures (Player 1 and Player 2), assembled from 3D primitives, ready for action.</li>
+            <li><strong>Glitch Bots:</strong> Various enemies constructed from primitive shapes, each with unique (and sometimes buggy) attack patterns.</li>
+            <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>
+            <li><strong>NPCs (Non-Playable Code):</strong> Simple primitive figures offering cryptic quests and dialogue that might just make sense in the matrix.</li>
+            <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>
+            <li><strong>Digital Loot:</strong> Primitive-assembled items and equipment to boost your stats.</li>
+            <li><strong>Life/Score Display:</strong> Keep track of your vital signs and KOs with clear displays at the top of the screen.</li>
+            <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>
+        </ul>
+        <h3>Method Steps:</h3>
+        <ul>
+            <li><strong>Explore the Digital Frontier:</strong> Navigate the top-down, full-screen 3D scene.</li>
+            <li><strong>Player 1 Controls (WASD):</strong> Move your character with precision.</li>
+            <li><strong>Player 2 Controls (IJKL):</strong> Guide your companion through the chaos.</li>
+            <li><strong>Left Player Action (E):</strong> Unleash a digital attack, activate objects, or try to understand the NPCs.</li>
+            <li><strong>Right Player Action (U):</strong> Perform your own digital assault, interact with the environment, or just flail wildly.</li>
+            <li><strong>Solve Byte-Sized Puzzles:</strong> Push blocks, activate pressure plates, and bypass laser grids (if they were here!).</li>
+            <li><strong>Complete Quests (Theoretically):</strong> Accept challenges from NPCs and try not to break the simulation.</li>
+            <li><strong>Level Up (Imagination Required):</strong> Gain experience and unlock new skills from your conceptual skill tree.</li>
+            <li><strong>Hit the Reset Button:</strong> When all else fails, use the "Reset Game" button to get a fresh start.</li>
+        </ul>
+        <h3>Rules of Engagement:</h3>
+        <ul>
+            <li><strong>Combat Rewards:</strong> Defeat Glitch Bots to earn experience and digital loot.</li>
+            <li><strong>Skill Gates:</strong> Certain areas or puzzles might require specific skills or items (in a full version!).</li>
+            <li><strong>Narrative Glitches:</strong> Dialogue choices might impact the story (or just confuse you further).</li>
+            <li><strong>Co-op or Compete:</strong> Work together to achieve common goals, or compete for the most KOs and resources.</li>
+            <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>
+        </ul>
+        <h3>What Makes It Fun:</h3>
+        <ul>
+            <li><strong>Retro-Futuristic Mashup:</strong> A unique blend of nostalgic 2D action-RPG vibes with modern 3D chaos.</li>
+            <li><strong>Dynamic Duo Gameplay:</strong> The cooperative/competitive modes add layers of strategy and hilarious interactions.</li>
+            <li><strong>Varied Digital Mayhem:</strong> From combat to puzzles and the promise of skill progression, there's always something to do.</li>
+            <li><strong>Witty Narrative:</strong> The "futuristic MMO testing ground" setting provides a fun, self-aware backdrop for your adventures.</li>
+        </ul>
+    </div>
+    <script>
+        // Global variables for Three.js
+        let scene, camera, renderer;
+        let player1, player2;
+        let enemies = [];
+        let movableBlock;
+        let pressurePlate;
+        let wallToOpen; // The wall that opens when pressure plate is activated
+        let powerups = []; // Array to hold power-up objects
+        let shieldVisual; // Visual representation of the co-op shield
+        let activeExplosions = []; // To manage particle explosions
+        let activeShieldParticles = []; // To manage shield healing particles
+        // Game state variables
+        const MAX_HEALTH = 100;
+        let player1Health = MAX_HEALTH;
+        let player2Health = MAX_HEALTH;
+        let player1KOs = 0;
+        let player2KOs = 0;
+        let player1Incapacitated = false;
+        let player2Incapacitated = false;
+        let pressurePlateActivated = false;
+        let isShieldActive = false; // New: Co-op shield state
+        // Wave and Scoring
+        let currentWave = 1;
+        let enemiesInCurrentWave = 0;
+        let enemiesDefeatedInWave = 0;
+        let scorePerEnemy = 10;
+        let totalScore = 0;
+        // Player movement and action states
+        const keys = {
+            w: false, a: false, s: false, d: false, e: false, // Player 1
+            i: false, j: false, k: false, l: false, u: false  // Player 2
+        };
+        const PLAYER_SPEED = 0.5;
+        const BASE_ATTACK_RANGE = 10; // Base attack range
+        const COOP_ATTACK_RANGE_BOOST = 15; // Additional range when co-op shield is active
+        const ATTACK_COOLDOWN = 500; // milliseconds
+        const ATTACK_DURATION = 200; // milliseconds for attack animation
+        let player1LastAttackTime = 0;
+        let player2LastAttackTime = 0;
+        const ENEMY_SPEED = 0.1; // Slower enemy speed
+        const POWERUP_DURATION = 5000; // 5 seconds for attack/magic/armor boost
+        const SHIELD_RANGE = 20; // Distance for co-op shield activation
+        const COOP_ATTACK_WINDOW = 300; // Time window for combined attack (milliseconds)
+        const PARTICLE_LIFESPAN = 1000; // Particle system lifespan in ms
+        // UI elements
+        const player1LifeSpan = document.getElementById('player1Life');
+        const player2LifeSpan = document.getElementById('player2Life');
+        const player1KOsSpan = document.getElementById('player1KOs');
+        const player2KOsSpan = document.getElementById('player2KOs');
+        const player1HealthBar = document.getElementById('player1HealthBar');
+        const player2HealthBar = document.getElementById('player2HealthBar');
+        const resetButton = document.getElementById('resetButton');
+        const floatingMessage = document.getElementById('floating-message');
+        let messageTimeout; // To clear previous message timeouts
+        // Function to show a custom message box (now disappearing text)
+        function showMessage(message) {
+            clearTimeout(messageTimeout); // Clear any existing timeout
+            floatingMessage.textContent = message;
+            floatingMessage.style.opacity = 1;
+            messageTimeout = setTimeout(() => {
+                floatingMessage.style.opacity = 0;
+            }, 2000); // Disappear after 2 seconds
+        }
+        // --- Wave and Enemy Spawning Functions ---
+        function spawnEnemiesForWave(waveNumber) {
+            // Clear existing enemies
+            enemies.forEach(enemy => scene.remove(enemy));
+            enemies = [];
+            const numEnemies = Math.min(15, 3 + waveNumber * 2); // Max 15 enemies, scaling
+            scorePerEnemy = 10 * waveNumber; // Score increases per wave
+            for (let i = 0; i < numEnemies; i++) {
+                const x = (Math.random() - 0.5) * 100;
+                const z = (Math.random() - 0.5) * 100;
+                enemies.push(createEnemy(0x00ff00, x, 0, z));
+            }
+            enemies.forEach(enemy => scene.add(enemy));
+            enemiesInCurrentWave = numEnemies;
+            enemiesDefeatedInWave = 0;
+            showMessage(`Wave ${waveNumber} started! Score per enemy: ${scorePerEnemy}`);
+        }
+        function checkWaveCompletion() {
+            if (enemiesDefeatedInWave >= enemiesInCurrentWave) {
+                currentWave++;
+                showMessage(`Wave ${currentWave - 1} completed! Preparing Wave ${currentWave}...`);
+                setTimeout(() => spawnEnemiesForWave(currentWave), 2000); // Delay for next wave
+            }
+        }
+        // --- End Wave and Enemy Spawning Functions ---
+        // Initialize the game
+        window.onload = function() {
+            checkCanvasDimensions();
+        };
+        function checkCanvasDimensions() {
+            const canvas = document.getElementById('gameCanvas');
+            if (canvas.clientWidth > 0 && canvas.clientHeight > 0) {
+                console.log('Canvas dimensions are valid. Initializing Three.js...');
+                initThreeJS();
+                spawnEnemiesForWave(1); // Start the first wave
+                animate();
+            } else {
+                console.log('Canvas dimensions not yet valid. Retrying in 100ms...');
+                setTimeout(checkCanvasDimensions, 100);
+            }
+        }
+        function initThreeJS() {
+            console.log('initThreeJS called.');
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x2a2a4a);
+            const canvas = document.getElementById('gameCanvas');
+            const canvasWidth = canvas.clientWidth;
+            const canvasHeight = canvas.clientHeight;
+            console.log('initThreeJS - Canvas Width:', canvasWidth, 'Canvas Height:', canvasHeight);
+            const aspect = canvasWidth / canvasHeight;
+            const frustumSize = 120;
+            camera = new THREE.OrthographicCamera(
+                frustumSize * aspect / -2,
+                frustumSize * aspect / 2,
+                frustumSize / 2,
+                frustumSize / -2,
+                1,
+                1000
+            );
+            camera.position.set(0, 70, 0);
+            camera.lookAt(0, 0, 0);
+            renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
+            renderer.setSize(canvasWidth, canvasHeight);
+            renderer.setPixelRatio(window.devicePixelRatio);
+            const ambientLight = new THREE.AmbientLight(0x606060);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+            directionalLight.position.set(1, 1, 1).normalize();
+            scene.add(directionalLight);
+            const groundGeometry = new THREE.PlaneGeometry(150, 150);
+            const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x4a4a6a, side: THREE.DoubleSide });
+            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+            ground.rotation.x = Math.PI / 2;
+            scene.add(ground);
+            const gridHelper = new THREE.GridHelper(100, 10, 0x00ffff, 0x888888);
+            scene.add(gridHelper);
+            const axesHelper = new THREE.AxesHelper(50);
+            scene.add(axesHelper);
+            player1 = createPlayer(0xff0000, -20, 0, 0);
+            player2 = createPlayer(0x0000ff, 20, 0, 0);
+            scene.add(player1);
+            scene.add(player2);
+            // Create shield visual (initially hidden)
+            const shieldGeometry = new THREE.CylinderGeometry(SHIELD_RANGE, SHIELD_RANGE, 1, 32);
+            const shieldMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.2 });
+            shieldVisual = new THREE.Mesh(shieldGeometry, shieldMaterial);
+            shieldVisual.position.y = 5; // Place slightly above ground
+            shieldVisual.visible = false; // Hide initially
+            scene.add(shieldVisual);
+            // Initialize puzzle elements and powerups here, so they are always defined
+            movableBlock = createMovableBlock(0xffff00, -10, 0, -10);
+            scene.add(movableBlock);
+            pressurePlate = createPressurePlate(0x888888, 10, 0, -10);
+            scene.add(pressurePlate);
+            wallToOpen = createWall(0x663300, 10, 0, -20);
+            scene.add(wallToOpen);
+            powerups.push(createPowerup('health', -40, 0, 40));
+            powerups.push(createPowerup('attack', 40, 0, 40));
+            powerups.push(createPowerup('magic', -40, 0, -40));
+            powerups.push(createPowerup('armor', 40, 0, -40));
+            powerups.push(createPowerup('health', 0, 0, 0));
+            powerups.forEach(powerup => scene.add(powerup));
+            window.addEventListener('resize', onWindowResize, false);
+            document.addEventListener('keydown', onKeyDown, false);
+            document.addEventListener('keyup', onKeyUp, false);
+            resetButton.addEventListener('click', resetGame);
+            updateUI();
+            onWindowResize();
+        }
+        // --- Object Creation Functions ---
+        function createPlayer(color, x, y, z) {
+            const playerGroup = new THREE.Group();
+            // Body (Box)
+            const bodyGeometry = new THREE.BoxGeometry(4, 8, 4);
+            const bodyMaterial = new THREE.MeshLambertMaterial({ color: color });
+            const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+            body.position.y = 4; // Center on ground
+            playerGroup.add(body);
+            // Head (Sphere)
+            const headGeometry = new THREE.SphereGeometry(2, 16, 16);
+            const headMaterial = new THREE.MeshLambertMaterial({ color: 0xffe0bd }); // Skin color
+            const head = new THREE.Mesh(headGeometry, headMaterial);
+            head.position.y = 10; // On top of body
+            playerGroup.add(head);
+            // Arms (Cylinders) - Now part of the player group for independent rotation
+            // Right arm (for weapon)
+            const armRightGroup = new THREE.Group();
+            const armGeometry = new THREE.CylinderGeometry(1, 1, 6, 8);
+            const armMaterial = new THREE.MeshLambertMaterial({ color: color });
+            const armRightMesh = new THREE.Mesh(armGeometry, armMaterial);
+            armRightMesh.position.set(0, 3, 0); // Position relative to arm group's pivot
+            armRightGroup.add(armRightMesh);
+            armRightGroup.position.set(3, 7, 0); // Position arm group relative to player body
+            armRightGroup.rotation.z = -Math.PI / 4; // Initial rotation
+            playerGroup.add(armRightGroup);
+            playerGroup.userData.armRight = armRightGroup; // Store reference for animation
+            // Weapon (simple box for now)
+            const weaponGeometry = new THREE.BoxGeometry(1, 1, 5);
+            const weaponMaterial = new THREE.MeshLambertMaterial({ color: 0x888888 });
+            const weapon = new THREE.Mesh(weaponGeometry, weaponMaterial);
+            weapon.position.set(0, 3, 2.5); // Position at the end of the arm
+            armRightGroup.add(weapon);
+            playerGroup.userData.weapon = weapon; // Store reference
+            // Left arm
+            const armLeft = new THREE.Mesh(armGeometry, armMaterial);
+            armLeft.position.set(-3, 7, 0);
+            armLeft.rotation.z = Math.PI / 4;
+            playerGroup.add(armLeft);
+            // Legs (Cylinders)
+            const legGeometry = new THREE.CylinderGeometry(1.5, 1.5, 4, 8);
+            const legMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 }); // Dark color for pants
+            const legLeft = new THREE.Mesh(legGeometry, legMaterial);
+            legLeft.position.set(-1.5, 2, 0);
+            playerGroup.add(legLeft);
+            const legRight = new THREE.Mesh(legGeometry, legMaterial);
+            legRight.position.set(1.5, 2, 0);
+            playerGroup.add(legRight);
+            playerGroup.position.set(x, y, z);
+            playerGroup.userData.health = MAX_HEALTH;
+            playerGroup.userData.isPlayer = true;
+            playerGroup.userData.incapacitated = false;
+            playerGroup.userData.isAttacking = false;
+            playerGroup.userData.attackBoost = 0; // No attack boost initially
+            playerGroup.userData.magicBoost = 0; // No magic boost initially
+            playerGroup.userData.armorBoost = 0; // No armor boost initially
+            return playerGroup;
+        }
+        function createEnemy(color, x, y, z) {
+            const enemyGroup = new THREE.Group();
+            // Main Body (Rounded Box)
+            const bodyGeometry = new THREE.BoxGeometry(6, 6, 6);
+            const bodyMaterial = new THREE.MeshLambertMaterial({ color: color });
+            const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+            body.position.y = 3; // Center on ground
+            enemyGroup.add(body);
+            // Head (Octahedron for a more robotic/glitchy look)
+            const headGeometry = new THREE.OctahedronGeometry(3);
+            const headMaterial = new THREE.MeshLambertMaterial({ color: 0x888888 }); // Grey
+            const head = new THREE.Mesh(headGeometry, headMaterial);
+            head.position.y = 8; // On top of body
+            enemyGroup.add(head);
+            // Eyes (Small Spheres)
+            const eyeGeometry = new THREE.SphereGeometry(0.8, 8, 8);
+            const eyeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // Red eyes
+            const eyeLeft = new THREE.Mesh(eyeGeometry, eyeMaterial);
+            eyeLeft.position.set(-1.5, 9, 2.5);
+            head.add(eyeLeft);
+            const eyeRight = new THREE.Mesh(eyeGeometry, eyeMaterial);
+            eyeRight.position.set(1.5, 9, 2.5);
+            head.add(eyeRight);
+            // Legs (Thin Cylinders)
+            const legGeometry = new THREE.CylinderGeometry(0.8, 0.8, 4, 8);
+            const legMaterial = new THREE.MeshLambertMaterial({ color: 0x555555 });
+            const legFrontLeft = new THREE.Mesh(legGeometry, legMaterial);
+            legFrontLeft.position.set(-2, 0, -2);
+            enemyGroup.add(legFrontLeft);
+            const legFrontRight = new THREE.Mesh(legGeometry, legMaterial);
+            legFrontRight.position.set(2, 0, -2);
+            enemyGroup.add(legFrontRight);
+            const legBackLeft = new THREE.Mesh(legGeometry, legMaterial);
+            legBackLeft.position.set(-2, 0, 2);
+            enemyGroup.add(legBackLeft);
+            const legBackRight = new THREE.Mesh(legGeometry, legMaterial);
+            legBackRight.position.set(2, 0, 2);
+            enemyGroup.add(legBackRight);
+            // Antennas (Thin Cylinders on head)
+            const antennaGeometry = new THREE.CylinderGeometry(0.3, 0.3, 3, 8);
+            const antennaMaterial = new THREE.MeshLambertMaterial({ color: 0xaaaaaa });
+            const antennaLeft = new THREE.Mesh(antennaGeometry, antennaMaterial);
+            antennaLeft.position.set(-1.5, 11, 0);
+            antennaLeft.rotation.x = Math.PI / 4;
+            enemyGroup.add(antennaLeft);
+            const antennaRight = new THREE.Mesh(antennaGeometry, antennaMaterial);
+            antennaRight.position.set(1.5, 11, 0);
+            antennaRight.rotation.x = -Math.PI / 4;
+            enemyGroup.add(antennaRight);
+            enemyGroup.position.set(x, y, z);
+            enemyGroup.userData.health = 50; // Enemies have less health
+            enemyGroup.userData.isEnemy = true;
+            return enemyGroup;
+        }
+        function createMovableBlock(color, x, y, z) {
+            const geometry = new THREE.DodecahedronGeometry(6); // More interesting shape
+            const material = new THREE.MeshLambertMaterial({ color: color });
+            const block = new THREE.Mesh(geometry, material);
+            block.position.set(x, y + 6, z); // Center on ground
+            block.userData.isMovable = true;
+            return block;
+        }
+        function createPressurePlate(color, x, y, z) {
+            const geometry = new THREE.TorusGeometry(4, 1, 8, 32); // Flat torus shape
+            const material = new THREE.MeshLambertMaterial({ color: color });
+            const plate = new THREE.Mesh(geometry, material);
+            plate.rotation.x = Math.PI / 2; // Lay flat
+            plate.position.set(x, y + 0.5, z); // Slightly above ground
+            plate.userData.isPressurePlate = true;
+            return plate;
+        }
+        function createWall(color, x, y, z) {
+            // A more stylized barrier with multiple boxes
+            const wallGroup = new THREE.Group();
+            const segmentGeometry = new THREE.BoxGeometry(5, 15, 5);
+            const segmentMaterial = new THREE.MeshLambertMaterial({ color: color });
+            for (let i = -2; i <= 2; i++) {
+                const segment = new THREE.Mesh(segmentGeometry, segmentMaterial);
+                segment.position.set(i * 6, 7.5, 0); // Spaced segments
+                wallGroup.add(segment);
+            }
+            wallGroup.position.set(x, y, z);
+            wallGroup.userData.isWall = true;
+            return wallGroup;
+        }
+        function createPowerup(type, x, y, z) {
+            let geometry;
+            let material;
+            let powerupMesh;
+            switch (type) {
+                case 'health':
+                    geometry = new THREE.SphereGeometry(3, 16, 16);
+                    material = new THREE.MeshLambertMaterial({ color: 0xff0000 }); // Red sphere for health
+                    powerupMesh = new THREE.Mesh(geometry, material);
+                    break;
+                case 'attack':
+                    geometry = new THREE.ConeGeometry(3, 6, 8);
+                    material = new THREE.MeshLambertMaterial({ color: 0x00ffff }); // Cyan cone for attack boost
+                    powerupMesh = new THREE.Mesh(geometry, material);
+                    powerupMesh.rotation.x = Math.PI / 2; // Point it horizontally
+                    break;
+                case 'magic':
+                    geometry = new THREE.TetrahedronGeometry(4); // Pyramid for magic
+                    material = new THREE.MeshLambertMaterial({ color: 0x8A2BE2 }); // Purple for magic
+                    powerupMesh = new THREE.Mesh(geometry, material);
+                    break;
+                case 'armor':
+                    geometry = new THREE.BoxGeometry(5, 5, 5);
+                    material = new THREE.MeshLambertMaterial({ color: 0x708090 }); // Slate gray for armor
+                    powerupMesh = new THREE.Mesh(geometry, material);
+                    break;
+                default:
+                    geometry = new THREE.BoxGeometry(4, 4, 4);
+                    material = new THREE.MeshLambertMaterial({ color: 0xcccccc });
+                    powerupMesh = new THREE.Mesh(geometry, material);
+                    break;
+            }
+            powerupMesh.position.set(x, y + (geometry.parameters.height ? geometry.parameters.height / 2 : 2), z);
+            powerupMesh.userData.isPowerup = true;
+            powerupMesh.userData.type = type;
+            return powerupMesh;
+        }
+        function createExplosionParticles(position, color) {
+            const particleCount = 50;
+            const positions = new Float32Array(particleCount * 3);
+            const colors = new Float32Array(particleCount * 3);
+            const sizes = new Float32Array(particleCount);
+            const pColor = new THREE.Color(color);
+            for (let i = 0; i < particleCount; i++) {
+                // Random position within a small sphere
+                positions[i * 3] = position.x + (Math.random() - 0.5) * 10;
+                positions[i * 3 + 1] = position.y + (Math.random() - 0.5) * 10 + 5; // Slightly above ground
+                positions[i * 3 + 2] = position.z + (Math.random() - 0.5) * 10;
+                colors[i * 3] = pColor.r;
+                colors[i * 3 + 1] = pColor.g;
+                colors[i * 3 + 2] = pColor.b;
+                sizes[i] = Math.random() * 2 + 1; // Random size
+            }
+            const geometry = new THREE.BufferGeometry();
+            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); // Custom attribute for size
+            const material = new THREE.PointsMaterial({
+                size: 1, // Base size, actual size controlled by 'size' attribute
+                vertexColors: true,
+                transparent: true,
+                opacity: 1,
+                blending: THREE.AdditiveBlending,
+                sizeAttenuation: true // Particles closer to camera appear larger
+            });
+            const particles = new THREE.Points(geometry, material);
+            particles.userData.spawnTime = Date.now();
+            particles.userData.lifespan = PARTICLE_LIFESPAN;
+            particles.userData.velocity = [];
+            for (let i = 0; i < particleCount; i++) {
+                particles.userData.velocity.push(
+                    new THREE.Vector3((Math.random() - 0.5) * 0.5, Math.random() * 0.5 + 0.1, (Math.random() - 0.5) * 0.5)
+                );
+            }
+            scene.add(particles);
+            activeExplosions.push(particles);
+        }
+        function createShieldHealingParticles(position) {
+            const particleCount = 5; // Fewer particles for healing
+            const positions = new Float32Array(particleCount * 3);
+            const colors = new Float32Array(particleCount * 3);
+            const sizes = new Float32Array(particleCount);
+            const pColor = new THREE.Color(0x00ff00); // Green for healing
+            for (let i = 0; i < particleCount; i++) {
+                positions[i * 3] = position.x + (Math.random() - 0.5) * 5;
+                positions[i * 3 + 1] = position.y + (Math.random() - 0.5) * 5 + 5;
+                positions[i * 3 + 2] = position.z + (Math.random() - 0.5) * 5;
+                colors[i * 3] = pColor.r;
+                colors[i * 3 + 1] = pColor.g;
+                colors[i * 3 + 2] = pColor.b;
+                sizes[i] = Math.random() * 1 + 0.5;
+            }
+            const geometry = new THREE.BufferGeometry();
+            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
+            const material = new THREE.PointsMaterial({
+                size: 1,
+                vertexColors: true,
+                transparent: true,
+                opacity: 0.8,
+                blending: THREE.AdditiveBlending,
+                sizeAttenuation: true
+            });
+            const particles = new THREE.Points(geometry, material);
+            particles.userData.spawnTime = Date.now();
+            particles.userData.lifespan = PARTICLE_LIFESPAN;
+            particles.userData.velocity = [];
+            for (let i = 0; i < particleCount; i++) {
+                particles.userData.velocity.push(
+                    new THREE.Vector3(0, Math.random() * 0.2 + 0.05, 0) // Move mostly upwards
+                );
+            }
+            scene.add(particles);
+            activeShieldParticles.push(particles);
+        }
+        // --- Game Logic Functions ---
+        function onWindowResize() {
+            const canvas = document.getElementById('gameCanvas');
+            const newWidth = canvas.clientWidth;
+            const newHeight = canvas.clientHeight;
+            console.log('Resizing - Canvas Width:', newWidth, 'Canvas Height:', newHeight);
+            if (newWidth > 0 && newHeight > 0) {
+                const aspect = newWidth / newHeight;
+                const frustumSize = 120;
+                camera.left = frustumSize * aspect / -2;
+                camera.right = frustumSize * aspect / 2;
+                camera.top = frustumSize / 2;
+                camera.bottom = frustumSize / -2;
+                camera.updateProjectionMatrix();
+                renderer.setSize(newWidth, newHeight);
+            }
+        }
+        function onKeyDown(event) {
+            switch (event.key) {
+                case 'w': keys.w = true; break; case 'a': keys.a = true; break;
+                case 's': keys.s = true; break; case 'd': keys.d = true; break;
+                case 'e': keys.e = true; break;
+                case 'i': keys.i = true; break; case 'j': keys.j = true; break;
+                case 'k': keys.k = true; break; case 'l': keys.l = true; break;
+                case 'u': keys.u = true; break;
+            }
+        }
+        function onKeyUp(event) {
+            switch (event.key) {
+                case 'w': keys.w = false; break; case 'a': keys.a = false; break;
+                case 's': keys.s = false; break; case 'd': keys.d = false; break;
+                case 'e': keys.e = false; break;
+                case 'i': keys.i = false; break; case 'j': keys.j = false; break;
+                case 'k': keys.k = false; break; case 'l': keys.l = false; break;
+                case 'u': keys.u = false; break;
+            }
+        }
+        function updatePlayerMovement(player, deltaX, deltaZ) {
+            if (player.userData.incapacitated) return;
+            const newX = player.position.x + deltaX;
+            const newZ = player.position.z + deltaZ;
+            const boundary = 70;
+            if (Math.abs(newX) < boundary && Math.abs(newZ) < boundary) {
+                player.position.x = newX;
+                player.position.z = newZ;
+            }
+        }
+        function handlePlayerActions() {
+            const currentTime = Date.now();
+            // Player 1 Action (E)
+            if (keys.e && !player1Incapacitated) {
+                if (player2Incapacitated && player1.position.distanceTo(player2.position) < 10) {
+                    player2Incapacitated = false;
+                    player2Health = Math.min(MAX_HEALTH, player2Health + MAX_HEALTH / 2); // Revive with half health
+                    updateUI();
+                    showMessage("Player 1 revived Player 2!");
+                } else if (!player1.userData.isAttacking && currentTime - player1LastAttackTime > ATTACK_COOLDOWN) {
+                    player1.userData.isAttacking = true;
+                    player1.userData.attackStartTime = currentTime;
+                    player1LastAttackTime = currentTime;
+                }
+            }
+            // Player 2 Action (U)
+            if (keys.u && !player2Incapacitated) {
+                if (player1Incapacitated && player2.position.distanceTo(player1.position) < 10) {
+                    player1Incapacitated = false;
+                    player1Health = Math.min(MAX_HEALTH, player1Health + MAX_HEALTH / 2); // Revive with half health
+                    updateUI();
+                    showMessage("Player 2 revived Player 1!");
+                } else if (!player2.userData.isAttacking && currentTime - player2LastAttackTime > ATTACK_COOLDOWN) {
+                    player2.userData.isAttacking = true;
+                    player2.userData.attackStartTime = currentTime;
+                    player2LastAttackTime = currentTime;
+                }
+            }
+        }
+        function animatePlayerAttack(player) {
+            if (!player.userData.isAttacking) return;
+            const currentTime = Date.now();
+            const elapsedTime = currentTime - player.userData.attackStartTime;
+            const progress = Math.min(1, elapsedTime / ATTACK_DURATION);
+            const startAngle = -Math.PI / 4;
+            const endAngle = Math.PI * 3 / 4;
+            if (progress < 0.5) {
+                player.userData.armRight.rotation.z = startAngle + (endAngle - startAngle) * (progress * 2);
+            } else {
+                player.userData.armRight.rotation.z = endAngle - (endAngle - startAngle) * ((progress - 0.5) * 2);
+            }
+            if (progress >= 0.25 && progress <= 0.75 && !player.userData.damageDealtThisSwing) {
+                let currentAttackRange = BASE_ATTACK_RANGE;
+                if (isShieldActive) {
+                    currentAttackRange += COOP_ATTACK_RANGE_BOOST;
+                }
+                if (player.userData.magicBoost > currentTime) { // Magic boost increases range
+                    currentAttackRange *= 1.5;
+                }
+                enemies.forEach(enemy => {
+                    if (enemy.userData.health > 0 && player.position.distanceTo(enemy.position) < currentAttackRange) {
+                        // Check for combined attack
+                        const otherPlayer = (player === player1) ? player2 : player1;
+                        const otherPlayerLastAttackTime = (player === player1) ? player2LastAttackTime : player1LastAttackTime;
+                        if (isShieldActive && otherPlayer.userData.isAttacking && (currentTime - otherPlayerLastAttackTime < COOP_ATTACK_WINDOW)) {
+                            showMessage("Combined Attack! Monster Instantly Defeated!");
+                            enemy.userData.health = 0; // Instant kill
+                        } else {
+                            showMessage("Monster Instantly Defeated!");
+                            enemy.userData.health = 0; // Instant kill
+                        }
+                        if (enemy.userData.health <= 0) {
+                            scene.remove(enemy);
+                            createExplosionParticles(enemy.position, 0xffa500); // Orange explosion
+                            if (player === player1) player1KOs++;
+                            else player2KOs++;
+                            totalScore += scorePerEnemy; // Add score
+                            enemiesDefeatedInWave++;
+                            checkWaveCompletion();
+                        }
+                        updateUI();
+                    }
+                });
+                player.userData.damageDealtThisSwing = true;
+            }
+            if (progress >= 1) {
+                player.userData.isAttacking = false;
+                player.userData.armRight.rotation.z = startAngle;
+                player.userData.damageDealtThisSwing = false;
+            }
+        }
+        function updateEnemyLogic() {
+            enemies.forEach(enemy => {
+                if (enemy.userData.health <= 0) return;
+                let targetPlayer = null;
+                const distToP1 = enemy.position.distanceTo(player1.position);
+                const distToP2 = enemy.position.distanceTo(player2.position);
+                if (!player1Incapacitated && !player2Incapacitated) {
+                    targetPlayer = (distToP1 < distToP2) ? player1 : player2;
+                } else if (!player1Incapacitated) {
+                    targetPlayer = player1;
+                } else if (!player2Incapacitated) {
+                    targetPlayer = player2;
+                } else {
+                    return;
+                }
+                if (targetPlayer) {
+                    const direction = new THREE.Vector3().subVectors(targetPlayer.position, enemy.position).normalize();
+                    enemy.position.addScaledVector(direction, ENEMY_SPEED);
+                    if (enemy.position.distanceTo(targetPlayer.position) < 8) {
+                        let damage = 0.5;
+                        if (isShieldActive) {
+                            damage *= 0.1; // Reduce damage significantly if shield is active
+                        }
+                        if (targetPlayer.userData.armorBoost > Date.now()) { // Armor boost reduces damage
+                            damage *= 0.5;
+                        }
+                        if (targetPlayer === player1 && !player1Incapacitated) {
+                            player1Health -= damage;
+                            if (player1Health <= 0) {
+                                player1Health = 0;
+                                player1Incapacitated = true;
+                                showMessage("Player 1 incapacitated! Player 2, revive them or reset!");
+                            }
+                        } else if (targetPlayer === player2 && !player2Incapacitated) {
+                            player2Health -= damage;
+                            if (player2Health <= 0) {
+                                player2Health = 0;
+                                player2Incapacitated = true;
+                                showMessage("Player 2 incapacitated! Player 1, revive them or reset!");
+                            }
+                        }
+                        updateUI();
+                    }
+                }
+            });
+        }
+        function handleMovableBlock() {
+            // Simplified collision check for pushing block
+            const players = [player1, player2];
+            players.forEach(player => {
+                if (player.userData.incapacitated) return;
+                const distToBlock = player.position.distanceTo(movableBlock.position);
+                if (distToBlock < 10) {
+                    const direction = new THREE.Vector3().subVectors(movableBlock.position, player.position).normalize();
+                    movableBlock.position.addScaledVector(direction, PLAYER_SPEED * 0.5); // Push slower than player movement
+                    // Basic boundary for block
+                    const blockBoundary = 60;
+                    movableBlock.position.x = Math.max(-blockBoundary, Math.min(blockBoundary, movableBlock.position.x));
+                    movableBlock.position.z = Math.max(-blockBoundary, Math.min(blockBoundary, movableBlock.position.z));
+                }
+            });
+            const distanceToPlate = movableBlock.position.distanceTo(pressurePlate.position);
+            if (distanceToPlate < 5 && !pressurePlateActivated) {
+                pressurePlateActivated = true;
+                scene.remove(wallToOpen);
+                showMessage("A path has opened!");
+            } else if (distanceToPlate >= 5 && pressurePlateActivated) {
+                // Optional: wall reappears if block leaves plate
+                // if (!scene.children.includes(wallToOpen)) {
+                //     scene.add(wallToOpen);
+                // }
+                // pressurePlateActivated = false;
+            }
+        }
+        function checkPowerupCollisions() {
+            const currentTime = Date.now();
+            const players = [player1, player2];
+            for (let i = powerups.length - 1; i >= 0; i--) {
+                const powerup = powerups[i];
+                powerup.rotation.y += 0.02;
+                players.forEach(player => {
+                    if (player.position.distanceTo(powerup.position) < 5) {
+                        switch (powerup.userData.type) {
+                            case 'health':
+                                if (player === player1) player1Health = Math.min(MAX_HEALTH, player1Health + 30);
+                                else player2Health = Math.min(MAX_HEALTH, player2Health + 30);
+                                showMessage(`${player === player1 ? 'Player 1' : 'Player 2'} picked up Health!`);
+                                break;
+                            case 'attack':
+                                player.userData.attackBoost = currentTime + POWERUP_DURATION;
+                                showMessage(`${player === player1 ? 'Player 1' : 'Player 2'} picked up Attack Boost!`);
+                                break;
+                            case 'magic':
+                                player.userData.magicBoost = currentTime + POWERUP_DURATION;
+                                showMessage(`${player === player1 ? 'Player 1' : 'Player 2'} picked up Magic Boost!`);
+                                break;
+                            case 'armor':
+                                player.userData.armorBoost = currentTime + POWERUP_DURATION;
+                                showMessage(`${player === player1 ? 'Player 1' : 'Player 2'} picked up Armor Boost!`);
+                                break;
+                        }
+                        scene.remove(powerup);
+                        powerups.splice(i, 1);
+                        updateUI();
+                    }
+                });
+            }
+            // Decay boosts
+            players.forEach(player => {
+                if (player.userData.attackBoost > 0 && currentTime > player.userData.attackBoost) {
+                    player.userData.attackBoost = 0;
+                    showMessage(`${player === player1 ? 'Player 1' : 'Player 2'}'s Attack Boost expired!`);
+                }
+                if (player.userData.magicBoost > 0 && currentTime > player.userData.magicBoost) {
+                    player.userData.magicBoost = 0;
+                    showMessage(`${player === player1 ? 'Player 1' : 'Player 2'}'s Magic Boost expired!`);
+                }
+                if (player.userData.armorBoost > 0 && currentTime > player.userData.armorBoost) {
+                    player.userData.armorBoost = 0;
+                    showMessage(`${player === player1 ? 'Player 1' : 'Player 2'}'s Armor Boost expired!`);
+                }
+            });
+        }
+        function updateCoopShield() {
+            const distanceBetweenPlayers = player1.position.distanceTo(player2.position);
+            const wasShieldActive = isShieldActive;
+            if (distanceBetweenPlayers < SHIELD_RANGE && !player1Incapacitated && !player2Incapacitated) {
+                isShieldActive = true;
+                shieldVisual.position.copy(player1.position).lerp(player2.position, 0.5);
+                shieldVisual.visible = true;
+                // Continuously spawn healing particles
+                if (Math.random() < 0.1) { // Spawn rate
+                    createShieldHealingParticles(player1.position);
+                    createShieldHealingParticles(player2.position);
+                }
+                if (!wasShieldActive) {
+                    showMessage("Co-op Shield Activated!");
+                }
+            } else {
+                isShieldActive = false;
+                shieldVisual.visible = false;
+                if (wasShieldActive) {
+                    showMessage("Co-op Shield Deactivated.");
+                }
+            }
+        }
+        function updateParticleSystems() {
+            const currentTime = Date.now();
+            // Update explosion particles
+            for (let i = activeExplosions.length - 1; i >= 0; i--) {
+                const particles = activeExplosions[i];
+                const elapsedTime = currentTime - particles.userData.spawnTime;
+                const progress = elapsedTime / particles.userData.lifespan;
+                if (progress >= 1) {
+                    scene.remove(particles);
+                    activeExplosions.splice(i, 1);
+                    continue;
+                }
+                // Update particle positions and opacity
+                const positions = particles.geometry.attributes.position.array;
+                const sizes = particles.geometry.attributes.size.array;
+                const velocities = particles.userData.velocity;
+                const material = particles.material;
+                material.opacity = 1 - progress; // Fade out
+                for (let j = 0; j < positions.length / 3; j++) {
+                    positions[j * 3] += velocities[j].x;
+                    positions[j * 3 + 1] += velocities[j].y;
+                    positions[j * 3 + 2] += velocities[j].z;
+                    // Make particles shrink
+                    sizes[j] = (1 - progress) * (particles.userData.initialSizes ? particles.userData.initialSizes[j] : sizes[j]);
+                }
+                particles.geometry.attributes.position.needsUpdate = true;
+                particles.geometry.attributes.size.needsUpdate = true;
+            }
+            // Update shield healing particles
+            for (let i = activeShieldParticles.length - 1; i >= 0; i--) {
+                const particles = activeShieldParticles[i];
+                const elapsedTime = currentTime - particles.userData.spawnTime;
+                const progress = elapsedTime / particles.userData.lifespan;
+                if (progress >= 1) {
+                    scene.remove(particles);
+                    activeShieldParticles.splice(i, 1);
+                    continue;
+                }
+                const positions = particles.geometry.attributes.position.array;
+                const velocities = particles.userData.velocity;
+                const material = particles.material;
+                material.opacity = 1 - progress;
+                for (let j = 0; j < positions.length / 3; j++) {
+                    positions[j * 3] += velocities[j].x;
+                    positions[j * 3 + 1] += velocities[j].y;
+                    positions[j * 3 + 2] += velocities[j].z;
+                }
+                particles.geometry.attributes.position.needsUpdate = true;
+            }
+        }
+        function updateUI() {
+            player1LifeSpan.textContent = Math.max(0, Math.floor(player1Health));
+            player2LifeSpan.textContent = Math.max(0, Math.floor(player2Health));
+            // For now, let's just use player1KOs as total score
+            document.getElementById('player1KOs').textContent = totalScore;
+            document.getElementById('player2KOs').textContent = `Wave: ${currentWave}`;
+            player1HealthBar.style.width = `${(player1Health / MAX_HEALTH) * 100}%`;
+            player2HealthBar.style.width = `${(player2Health / MAX_HEALTH) * 100}%`;
+            player1.visible = !player1Incapacitated;
+            player2.visible = !player2Incapacitated;
+            if (player1Incapacitated && player2Incapacitated) {
+                showMessage("Game Over! Both players incapacitated. Press Reset to restart.");
+                // Prevent further game logic until reset
+                return;
+            }
+        }
+        function resetGame() {
+            player1Health = MAX_HEALTH;
+            player2Health = MAX_HEALTH;
+            player1KOs = 0;
+            player2KOs = 0;
+            totalScore = 0; // Reset total score
+            currentWave = 1; // Reset wave
+            player1Incapacitated = false;
+            player2Incapacitated = false;
+            pressurePlateActivated = false;
+            isShieldActive = false;
+            player1.position.set(-20, 0, 0);
+            player2.position.set(20, 0, 0);
+            player1.userData.isAttacking = false;
+            player2.userData.isAttacking = false;
+            player1.userData.attackBoost = 0;
+            player2.userData.attackBoost = 0;
+            player1.userData.magicBoost = 0;
+            player2.userData.magicBoost = 0;
+            player1.userData.armorBoost = 0;
+            player2.userData.armorBoost = 0;
+            player1.userData.armRight.rotation.z = -Math.PI / 4;
+            player2.userData.armRight.rotation.z = -Math.PI / 4;
+            enemies.forEach(enemy => scene.remove(enemy));
+            enemies = [];
+            powerups.forEach(powerup => scene.remove(powerup));
+            powerups = [];
+            activeExplosions.forEach(p => scene.remove(p));
+            activeExplosions = [];
+            activeShieldParticles.forEach(p => scene.remove(p));
+            activeShieldParticles = [];
+            // Remove old puzzle elements from scene if they exist
+            if (movableBlock && movableBlock.parent) scene.remove(movableBlock);
+            if (pressurePlate && pressurePlate.parent) scene.remove(pressurePlate);
+            if (wallToOpen && wallToOpen.parent) scene.remove(wallToOpen);
+            // Re-create and add initial puzzle elements
+            movableBlock = createMovableBlock(0xffff00, -10, 0, -10);
+            scene.add(movableBlock);
+            pressurePlate = createPressurePlate(0x888888, 10, 0, -10);
+            scene.add(pressurePlate);
+            wallToOpen = createWall(0x663300, 10, 0, -20);
+            scene.add(wallToOpen);
+            pressurePlateActivated = false; // Ensure wall is reset to its original state
+            powerups.push(createPowerup('health', -40, 0, 40));
+            powerups.push(createPowerup('attack', 40, 0, 40));
+            powerups.push(createPowerup('magic', -40, 0, -40));
+            powerups.push(createPowerup('armor', 40, 0, -40));
+            powerups.push(createPowerup('health', 0, 0, 0));
+            powerups.forEach(powerup => scene.add(powerup));
+            shieldVisual.visible = false;
+            spawnEnemiesForWave(currentWave); // Start the first wave again
+            updateUI();
+        }
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            // Only update game logic if not game over
+            if (!(player1Incapacitated && player2Incapacitated)) {
+                if (keys.w) updatePlayerMovement(player1, 0, -PLAYER_SPEED);
+                if (keys.s) updatePlayerMovement(player1, 0, PLAYER_SPEED);
+                if (keys.a) updatePlayerMovement(player1, -PLAYER_SPEED, 0);
+                if (keys.d) updatePlayerMovement(player1, PLAYER_SPEED, 0);
+                if (keys.i) updatePlayerMovement(player2, 0, -PLAYER_SPEED);
+                if (keys.k) updatePlayerMovement(player2, 0, PLAYER_SPEED);
+                if (keys.j) updatePlayerMovement(player2, -PLAYER_SPEED, 0);
+                if (keys.l) updatePlayerMovement(player2, PLAYER_SPEED);
+                handlePlayerActions();
+                animatePlayerAttack(player1);
+                animatePlayerAttack(player2);
+                updateEnemyLogic();
+                handleMovableBlock();
+                checkPowerupCollisions();
+                updateCoopShield();
+            }
+            updateParticleSystems(); // Always update particles, even if game over
+            updateUI();
+            renderer.render(scene, camera);
+        }
+    </script>
+</body>
 </html>