Spaces:

awacke1
/

ByteSizeBrawlCodeChaosGame

Running

File size: 58,257 Bytes

<!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>