Spaces:

awacke1
/

YarsRevengeTwoPlayers

Running

App Files Files Community

awacke1 commited on May 26

Commit

27d34dd

verified ·

1 Parent(s): a75555f

Update index.html

Browse files

Files changed (1) hide show

index.html +486 -18

index.html CHANGED Viewed

@@ -1,19 +1,487 @@
-<!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>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>