Spaces:

awacke1
/

YarsRevengeTwoPlayers

Running

File size: 20,632 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yar's Revenge 3D</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        body { margin: 0; overflow: hidden; font-family: 'Arial', sans-serif; background-color: #000; color: #fff; }
        canvas { display: block; }
        #infoPanel {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 10px;
            background-color: rgba(0,0,0,0.7);
            border-radius: 8px;
            color: #fff;
            font-size: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .player-info {
            padding: 5px;
            border-radius: 4px;
        }
        .player1 { background-color: rgba(0, 150, 255, 0.5); }
        .player2 { background-color: rgba(255, 100, 0, 0.5); }
        #gameOverScreen {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 30px;
            background-color: rgba(20, 20, 20, 0.9);
            border: 2px solid #555;
            border-radius: 15px;
            text-align: center;
            display: none; /* Hidden by default */
            z-index: 100;
        }
        #gameOverScreen h2 { margin-top: 0; font-size: 28px; color: #ff4444; }
        #gameOverScreen p { font-size: 18px; }
        #gameOverScreen button {
            padding: 12px 25px;
            font-size: 18px;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin-top: 20px;
            transition: background-color 0.3s ease;
        }
        #gameOverScreen button:hover { background-color: #0056b3; }
    </style>
</head>
<body>
    <div id="infoPanel">
        <div id="player1Info" class="player-info player1">Player 1 (WASD, E): Score 0 | Lives 3</div>
        <div id="player2Info" class="player-info player2">Player 2 (IJKL, U): Score 0 | Lives 3</div>
        <div id="qotileInfo">Qotile Health: 100</div>
    </div>

    <div id="gameOverScreen">
        <h2>Game Over!</h2>
        <p id="gameOverMessage"></p>
        <button id="restartButton">Restart Game</button>
    </div>

    <script>
        let scene, camera, renderer, clock;
        let players = [];
        let playerProjectiles = [];
        let neutralZoneBlocks = [];
        let qotile;

        const keysPressed = {}; // Stores the state of currently pressed keys using event.code
        const gameSettings = {
            playerSpeed: 10,
            projectileSpeed: 30,
            playerSize: 1,
            projectileSize: 0.2,
            neutralZoneBlockSize: 2,
            qotileSize: 4,
            playAreaWidth: 30,
            playAreaHeight: 20,
            playerShootCooldown: 0.2, // seconds
            initialPlayerLives: 3,
            qotileInitialHealth: 100,
            pointsPerNeutralBlock: 10,
            pointsPerQotileHit: 50,
        };
        let gameActive = true;

        // Initialization function
        function init() {
            gameActive = true;
            // Scene
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x111122);

            // Camera
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 5, 25); // Positioned to see the play area
            camera.lookAt(0, 0, 0);

            // Renderer
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            // Lighting
            const ambientLight = new THREE.AmbientLight(0x606060);
            scene.add(ambientLight);
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
            directionalLight.position.set(5, 10, 7.5);
            scene.add(directionalLight);

            // Clock for delta time
            clock = new THREE.Clock();

            // Create game elements
            createPlayers();
            createNeutralZone();
            createQotile();

            // Event Listeners
            document.addEventListener('keydown', onKeyDown);
            document.addEventListener('keyup', onKeyUp);
            window.addEventListener('resize', onWindowResize);
            document.getElementById('restartButton').addEventListener('click', restartGame);
            
            document.getElementById('gameOverScreen').style.display = 'none';
            updateUI();
            animate();
        }

        // Create Player objects
        function createPlayers() {
            players = []; // Clear existing players if any (for restart)
            playerProjectiles = []; // Clear existing projectiles

            const playerGeometry = new THREE.BoxGeometry(gameSettings.playerSize, gameSettings.playerSize, gameSettings.playerSize);
            
            // Player 1
            const player1Material = new THREE.MeshStandardMaterial({ color: 0x0099ff });
            const player1Mesh = new THREE.Mesh(playerGeometry, player1Material);
            player1Mesh.position.set(-gameSettings.playAreaWidth / 4, 0, 15);
            scene.add(player1Mesh);
            players.push({
                mesh: player1Mesh,
                isPlayer2: false,
                // ******** UPDATED FIRE KEY FOR PLAYER 1 ********
                controls: { up: 'KeyW', down: 'KeyS', left: 'KeyA', right: 'KeyD', shoot: 'KeyE' },
                shootCooldownTimer: 0,
                score: 0,
                lives: gameSettings.initialPlayerLives,
                projectiles: []
            });

            // Player 2
            const player2Material = new THREE.MeshStandardMaterial({ color: 0xff6600 });
            const player2Mesh = new THREE.Mesh(playerGeometry, player2Material);
            player2Mesh.position.set(gameSettings.playAreaWidth / 4, 0, 15);
            scene.add(player2Mesh);
            players.push({
                mesh: player2Mesh,
                isPlayer2: true,
                // ******** UPDATED FIRE KEY FOR PLAYER 2 ********
                controls: { up: 'KeyI', down: 'KeyK', left: 'KeyJ', right: 'KeyL', shoot: 'KeyU' },
                shootCooldownTimer: 0,
                score: 0,
                lives: gameSettings.initialPlayerLives,
                projectiles: []
            });
        }

        // Create Neutral Zone blocks
        function createNeutralZone() {
            // Remove existing blocks from scene before clearing array
            neutralZoneBlocks.forEach(block => {
                if (block && scene.getObjectById(block.id)) scene.remove(block);
                if (block && block.geometry) block.geometry.dispose();
                if (block && block.material) block.material.dispose();
            });
            neutralZoneBlocks = []; // Clear for restart


            const blockGeometry = new THREE.BoxGeometry(
                gameSettings.neutralZoneBlockSize, 
                gameSettings.neutralZoneBlockSize, 
                gameSettings.neutralZoneBlockSize / 2 // Thinner blocks
            );
            const blockMaterial = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.7, metalness: 0.3 });
            
            const numX = Math.floor(gameSettings.playAreaWidth / gameSettings.neutralZoneBlockSize);
            const numY = Math.floor(gameSettings.playAreaHeight / gameSettings.neutralZoneBlockSize);

            for (let i = 0; i < numX; i++) {
                for (let j = 0; j < numY; j++) {
                    const block = new THREE.Mesh(blockGeometry.clone(), blockMaterial.clone());
                    block.position.set(
                        (i - numX / 2 + 0.5) * gameSettings.neutralZoneBlockSize,
                        (j - numY / 2 + 0.5) * gameSettings.neutralZoneBlockSize,
                        0 // Z-position of the neutral zone
                    );
                    block.userData = { health: 1 }; // Simple health for blocks
                    scene.add(block);
                    neutralZoneBlocks.push(block);
                }
            }
        }

        // Create Qotile (enemy base)
        function createQotile() {
            if (qotile && qotile.mesh) {
                if (scene.getObjectById(qotile.mesh.id)) scene.remove(qotile.mesh);
                if (qotile.mesh.geometry) qotile.mesh.geometry.dispose();
                if (qotile.mesh.material) qotile.mesh.material.dispose();
            }

            const qotileGeometry = new THREE.BoxGeometry(gameSettings.qotileSize, gameSettings.qotileSize, gameSettings.qotileSize);
            const qotileMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, emissive: 0x330000 });
            const qotileMesh = new THREE.Mesh(qotileGeometry, qotileMaterial);
            qotileMesh.position.set(0, 0, -15); // Positioned behind the neutral zone
            scene.add(qotileMesh);
            qotile = {
                mesh: qotileMesh,
                health: gameSettings.qotileInitialHealth,
                hitTimer: 0 // For visual feedback on hit
            };
        }

        // Handle player movement
        function handlePlayerMovement(player, delta) {
            const moveDistance = gameSettings.playerSpeed * delta;
            // Check against the correct event.code strings stored in player.controls
            if (keysPressed[player.controls.up]) player.mesh.position.y += moveDistance;
            if (keysPressed[player.controls.down]) player.mesh.position.y -= moveDistance;
            if (keysPressed[player.controls.left]) player.mesh.position.x -= moveDistance;
            if (keysPressed[player.controls.right]) player.mesh.position.x += moveDistance;

            // Boundary checks
            const halfWidth = gameSettings.playAreaWidth / 2 - gameSettings.playerSize / 2;
            const halfHeight = gameSettings.playAreaHeight / 2 - gameSettings.playerSize / 2;
            player.mesh.position.x = Math.max(-halfWidth, Math.min(halfWidth, player.mesh.position.x));
            player.mesh.position.y = Math.max(-halfHeight, Math.min(halfHeight, player.mesh.position.y));
        }

        // Handle player shooting
        function handlePlayerShooting(player, delta) {
            if (player.shootCooldownTimer > 0) {
                player.shootCooldownTimer -= delta;
            }
            // Check against the correct event.code string for shooting
            if (keysPressed[player.controls.shoot] && player.shootCooldownTimer <= 0) {
                player.shootCooldownTimer = gameSettings.playerShootCooldown;
                createProjectile(player);
            }
        }

        // Create a projectile
        function createProjectile(player) {
            const projectileGeometry = new THREE.SphereGeometry(gameSettings.projectileSize, 8, 8);
            const projectileMaterial = new THREE.MeshBasicMaterial({ color: player.isPlayer2 ? 0xffaa33 : 0x66ccff });
            const projectile = new THREE.Mesh(projectileGeometry, projectileMaterial);
            
            projectile.position.copy(player.mesh.position);
            projectile.position.z -= gameSettings.playerSize / 2; // Start in front of player
            
            projectile.userData = { 
                owner: player,
                velocity: new THREE.Vector3(0, 0, -gameSettings.projectileSpeed) // Shoots "into" the screen
            };
            
            scene.add(projectile);
            playerProjectiles.push(projectile);
        }

        // Update projectiles
        function updateProjectiles(delta) {
            for (let i = playerProjectiles.length - 1; i >= 0; i--) {
                const projectile = playerProjectiles[i];
                if (!projectile || !projectile.userData) { // Safety check
                    if (projectile && scene.getObjectById(projectile.id)) scene.remove(projectile); // Clean up from scene if partially added
                    playerProjectiles.splice(i, 1);
                    continue;
                }
                projectile.position.addScaledVector(projectile.userData.velocity, delta);

                // Remove if out of bounds
                if (projectile.position.z < -30 || projectile.position.z > 30 || 
                    Math.abs(projectile.position.x) > gameSettings.playAreaWidth / 2 + 5 || // Added some buffer
                    Math.abs(projectile.position.y) > gameSettings.playAreaHeight / 2 + 5) {
                    scene.remove(projectile);
                    if (projectile.geometry) projectile.geometry.dispose();
                    if (projectile.material) projectile.material.dispose();
                    playerProjectiles.splice(i, 1);
                    continue;
                }
                checkProjectileCollisions(projectile, i);
            }
        }
        
        // Check projectile collisions
        function checkProjectileCollisions(projectile, projectileIndex) {
            if (!projectile || !projectile.userData || !projectile.userData.owner) { 
                 if (projectile && scene.getObjectById(projectile.id)) scene.remove(projectile);
                 if(playerProjectiles[projectileIndex] === projectile) playerProjectiles.splice(projectileIndex, 1);
                 return;
            }
            const projectileBox = new THREE.Box3().setFromObject(projectile);

            // Collision with Neutral Zone blocks
            for (let j = neutralZoneBlocks.length - 1; j >= 0; j--) {
                const block = neutralZoneBlocks[j];
                const blockBox = new THREE.Box3().setFromObject(block);
                if (projectileBox.intersectsBox(blockBox)) {
                    scene.remove(block);
                    if (block.geometry) block.geometry.dispose();
                    if (block.material) block.material.dispose();
                    neutralZoneBlocks.splice(j, 1);

                    scene.remove(projectile);
                    if (projectile.geometry) projectile.geometry.dispose();
                    if (projectile.material) projectile.material.dispose();
                    playerProjectiles.splice(projectileIndex, 1);
                    
                    projectile.userData.owner.score += gameSettings.pointsPerNeutralBlock;
                    updateUI(); 
                    return; 
                }
            }

            // Collision with Qotile
            if (qotile && qotile.mesh && qotile.health > 0) { 
                const qotileBox = new THREE.Box3().setFromObject(qotile.mesh);
                if (projectileBox.intersectsBox(qotileBox)) {
                    scene.remove(projectile);
                    if (projectile.geometry) projectile.geometry.dispose();
                    if (projectile.material) projectile.material.dispose();
                    playerProjectiles.splice(projectileIndex, 1);

                    qotile.health -= 10; 
                    qotile.mesh.material.emissive.setHex(0xffffff); 
                    qotile.hitTimer = 0.1; 
                    projectile.userData.owner.score += gameSettings.pointsPerQotileHit;
                    updateUI(); 

                    if (qotile.health <= 0) {
                        const winnerName = projectile.userData.owner.isPlayer2 ? "Player 2" : "Player 1";
                        endGame(winnerName + " destroyed the Qotile!");
                    }
                    return; 
                }
            }
        }

        function updateQotile(delta) {
            if (qotile && qotile.hitTimer > 0) {
                qotile.hitTimer -= delta;
                if (qotile.hitTimer <= 0) {
                    qotile.mesh.material.emissive.setHex(0x330000); 
                }
            }
        }

        // Update UI elements
        function updateUI() {
            const p1 = players && players[0] ? players[0] : { score: 0, lives: 0 };
            const p2 = players && players[1] ? players[1] : { score: 0, lives: 0 };
            
            // ******** UPDATED UI TEXT FOR NEW FIRE KEYS ********
            document.getElementById('player1Info').textContent = `Player 1 (WASD, E): Score ${p1.score} | Lives ${p1.lives}`;
            document.getElementById('player2Info').textContent = `Player 2 (IJKL, U): Score ${p2.score} | Lives ${p2.lives}`;
            
            if (qotile) {
                document.getElementById('qotileInfo').textContent = `Qotile Health: ${Math.max(0, qotile.health)}`;
            } else {
                document.getElementById('qotileInfo').textContent = `Qotile Health: N/A`;
            }
        }
        
        function checkGameOver() {
            if (!gameActive) return;
        }


        function endGame(message) {
            if (!gameActive) return;
            gameActive = false;
            console.log("Game Over:", message);
            document.getElementById('gameOverMessage').textContent = message;
            document.getElementById('gameOverScreen').style.display = 'flex';

            playerProjectiles.forEach(p => {
                if (p && scene.getObjectById(p.id)) scene.remove(p);
                if (p && p.geometry) p.geometry.dispose();
                if (p && p.material) p.material.dispose();
            });
            playerProjectiles = [];
        }

        function restartGame() {
            players.forEach(p => {
                if (p.mesh && scene.getObjectById(p.mesh.id)) scene.remove(p.mesh);
                if (p.mesh && p.mesh.geometry) p.mesh.geometry.dispose();
                if (p.mesh && p.mesh.material) p.mesh.material.dispose();
            });
            playerProjectiles.forEach(p => {
                if (p && scene.getObjectById(p.id)) scene.remove(p);
                if (p && p.geometry) p.geometry.dispose();
                if (p && p.material) p.material.dispose();
            });
            neutralZoneBlocks.forEach(b => {
                if (b && scene.getObjectById(b.id)) scene.remove(b);
                if (b && b.geometry) b.geometry.dispose();
                if (b && b.material) b.material.dispose();
            });
            if (qotile && qotile.mesh) {
                 if (scene.getObjectById(qotile.mesh.id)) scene.remove(qotile.mesh);
                 if (qotile.mesh.geometry) qotile.mesh.geometry.dispose();
                 if (qotile.mesh.material) qotile.mesh.material.dispose();
            }
            
            players = [];
            playerProjectiles = [];
            neutralZoneBlocks = []; 
            qotile = null;

            createPlayers();
            createNeutralZone(); 
            createQotile();

            gameActive = true;
            document.getElementById('gameOverScreen').style.display = 'none';
            updateUI();
        }


        // Animation loop
        function animate() {
            requestAnimationFrame(animate); 
            const delta = clock.getDelta(); 

            if (gameActive) {
                players.forEach(player => {
                    if (player && player.mesh) { 
                        handlePlayerMovement(player, delta);
                        handlePlayerShooting(player, delta);
                    }
                });
                updateProjectiles(delta);
                updateQotile(delta);
            }
            
            updateUI(); 
            renderer.render(scene, camera); 
        }

        // Event handlers
        function onKeyDown(event) {
            keysPressed[event.code] = true; 
            
            // ******** UPDATED GAMEKEYS FOR PREVENTDEFAULT ********
            const gameKeys = ['KeyW', 'KeyA', 'KeyS', 'KeyD', 'KeyI', 'KeyJ', 'KeyK', 'KeyL', 'KeyE', 'KeyU', 'Space'];
            if (gameKeys.includes(event.code)) {
                event.preventDefault();
            }
        }
        function onKeyUp(event) {
            keysPressed[event.code] = false;
        }
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        window.onload = function() {
            init();
        };
    </script>
</body>
</html>