Spaces:

AINPI
/

AIDemo1

Running

App Files Files Community

awacke1 commited on May 29

Commit

3b226b3

verified ·

1 Parent(s): 5a86419

Update index.html

Browse files

Files changed (1) hide show

index.html +585 -18

index.html CHANGED Viewed

@@ -1,19 +1,586 @@
-<!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: Brick Assault</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 advancingBricks = []; // Renamed from neutralZoneBlocks
+        let qotile;
+        const keysPressed = {};
+        const gameSettings = {
+            playerSpeed: 10,
+            projectileSpeed: 30,
+            playerSize: 1,
+            projectileSize: 0.2,
+            brickSize: 2, // Size of individual bricks
+            brickDepth: 1, // Thickness of bricks (Z-dimension)
+            qotileSize: 4,
+            playAreaWidth: 30,
+            playAreaHeight: 20,
+            playerShootCooldown: 0.2,
+            initialPlayerLives: 3,
+            qotileInitialHealth: 100,
+            pointsPerBrick: 10, // Renamed from pointsPerNeutralBlock
+            pointsPerQotileHit: 50,
+            brickLayerSpeed: 1.5, // How fast layers move towards player
+            newLayerSpawnInterval: 5.0, // Seconds between new layers
+            brickSpawnStartZ: -12, // Z-position where new brick layers spawn (behind Qotile or far back)
+            initialBrickLayers: 3, // Number of layers to start with
+            rowsPerLayer: 5, // Bricks vertically in a layer
+            colsPerLayer: 10, // Bricks horizontally in a layer
+            gapBetweenInitialLayers: 2.5, // Z-gap for initial setup
+            playerInvincibilityDuration: 1.5, // seconds
+        };
+        let gameActive = true;
+        let newLayerTimer = 0;
+        // Initialization function
+        function init() {
+            gameActive = true;
+            newLayerTimer = 0;
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x111122);
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 5, 25);
+            camera.lookAt(0, 0, 0);
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            document.body.appendChild(renderer.domElement);
+            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 = new THREE.Clock();
+            createPlayers();
+            createInitialBrickLayers(); // New function to set up starting bricks
+            createQotile();
+            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();
+        }
+        function createPlayers() {
+            players = [];
+            playerProjectiles = [];
+            const playerGeometry = new THREE.BoxGeometry(gameSettings.playerSize, gameSettings.playerSize, gameSettings.playerSize);
+            const player1Material = new THREE.MeshStandardMaterial({ color: 0x0099ff });
+            const player1Mesh = new THREE.Mesh(playerGeometry, player1Material);
+            player1Mesh.position.set(-gameSettings.playAreaWidth / 4, 0, 15); // Player Z position
+            scene.add(player1Mesh);
+            players.push({
+                mesh: player1Mesh,
+                isPlayer2: false,
+                controls: { up: 'KeyW', down: 'KeyS', left: 'KeyA', right: 'KeyD', shoot: 'KeyE' },
+                shootCooldownTimer: 0,
+                score: 0,
+                lives: gameSettings.initialPlayerLives,
+                projectiles: [],
+                invincibleTimer: 0,
+                originalColor: player1Material.color.getHex()
+            });
+            const player2Material = new THREE.MeshStandardMaterial({ color: 0xff6600 });
+            const player2Mesh = new THREE.Mesh(playerGeometry, player2Material);
+            player2Mesh.position.set(gameSettings.playAreaWidth / 4, 0, 15); // Player Z position
+            scene.add(player2Mesh);
+            players.push({
+                mesh: player2Mesh,
+                isPlayer2: true,
+                controls: { up: 'KeyI', down: 'KeyK', left: 'KeyJ', right: 'KeyL', shoot: 'KeyU' },
+                shootCooldownTimer: 0,
+                score: 0,
+                lives: gameSettings.initialPlayerLives,
+                projectiles: [],
+                invincibleTimer: 0,
+                originalColor: player2Material.color.getHex()
+            });
+        }
+        // Creates the initial set of brick layers at the start of the game
+        function createInitialBrickLayers() {
+            advancingBricks.forEach(brick => {
+                if (brick && scene.getObjectById(brick.id)) scene.remove(brick);
+                if (brick && brick.geometry) brick.geometry.dispose();
+                if (brick && brick.material) brick.material.dispose();
+            });
+            advancingBricks = [];
+            for (let i = 0; i < gameSettings.initialBrickLayers; i++) {
+                // Stagger initial layers further back
+                const spawnZ = gameSettings.brickSpawnStartZ - (i * gameSettings.gapBetweenInitialLayers);
+                spawnNewBrickLayer(spawnZ);
+            }
+        }
+        // Spawns a single new layer of bricks at a given Z depth
+        function spawnNewBrickLayer(spawnZ) {
+            const brickGeometry = new THREE.BoxGeometry(
+                gameSettings.brickSize,
+                gameSettings.brickSize,
+                gameSettings.brickDepth
+            );
+            // Give bricks varied, but generally dull/rocky colors
+            const colors = [0x888888, 0x777777, 0x666666, 0x807060, 0x706050];
+            const layerWidth = gameSettings.colsPerLayer * gameSettings.brickSize;
+            const layerHeight = gameSettings.rowsPerLayer * gameSettings.brickSize;
+            for (let r = 0; r < gameSettings.rowsPerLayer; r++) {
+                for (let c = 0; c < gameSettings.colsPerLayer; c++) {
+                    const randomColor = colors[Math.floor(Math.random() * colors.length)];
+                    const brickMaterial = new THREE.MeshStandardMaterial({
+                        color: randomColor,
+                        roughness: 0.8,
+                        metalness: 0.2
+                    });
+                    const brick = new THREE.Mesh(brickGeometry.clone(), brickMaterial.clone());
+                    brick.position.set(
+                        (c - gameSettings.colsPerLayer / 2 + 0.5) * gameSettings.brickSize,
+                        (r - gameSettings.rowsPerLayer / 2 + 0.5) * gameSettings.brickSize,
+                        spawnZ
+                    );
+                    brick.userData = { type: 'brick' }; // Identify object type
+                    scene.add(brick);
+                    advancingBricks.push(brick);
+                }
+            }
+        }
+        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); // Qotile is further back
+            scene.add(qotileMesh);
+            qotile = {
+                mesh: qotileMesh,
+                health: gameSettings.qotileInitialHealth,
+                hitTimer: 0
+            };
+        }
+        function handlePlayerMovement(player, delta) {
+            if (!player.mesh.visible) return; // Cannot move if not visible (e.g. after losing life briefly)
+            const moveDistance = gameSettings.playerSpeed * delta;
+            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;
+            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));
+        }
+        function updatePlayerInvincibility(player, delta) {
+            if (player.invincibleTimer > 0) {
+                player.invincibleTimer -= delta;
+                // Blink effect
+                const blinkSpeed = 10; // Blinks per second
+                player.mesh.visible = Math.floor(player.invincibleTimer * blinkSpeed) % 2 === 0;
+                if (player.invincibleTimer <= 0) {
+                    player.mesh.visible = true; // Ensure visible
+                    player.mesh.material.color.setHex(player.originalColor); // Restore color
+                    player.invincibleTimer = 0; // Clamp to zero
+                }
+            } else {
+                 if(player.lives > 0) player.mesh.visible = true; // Ensure player is visible if they have lives
+            }
+        }
+        function handlePlayerShooting(player, delta) {
+            if (!player.mesh.visible) return;
+            if (player.shootCooldownTimer > 0) {
+                player.shootCooldownTimer -= delta;
+            }
+            if (keysPressed[player.controls.shoot] && player.shootCooldownTimer <= 0) {
+                player.shootCooldownTimer = gameSettings.playerShootCooldown;
+                createProjectile(player);
+            }
+        }
+        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 + gameSettings.projectileSize;
+            projectile.userData = {
+                owner: player,
+                velocity: new THREE.Vector3(0, 0, -gameSettings.projectileSpeed)
+            };
+            scene.add(projectile);
+            playerProjectiles.push(projectile);
+        }
+        function updateProjectiles(delta) {
+            for (let i = playerProjectiles.length - 1; i >= 0; i--) {
+                const projectile = playerProjectiles[i];
+                if (!projectile || !projectile.userData) {
+                    if (projectile && scene.getObjectById(projectile.id)) scene.remove(projectile);
+                    playerProjectiles.splice(i, 1);
+                    continue;
+                }
+                projectile.position.addScaledVector(projectile.userData.velocity, delta);
+                if (projectile.position.z < -gameSettings.playAreaWidth || projectile.position.z > gameSettings.playAreaWidth * 2 || // Extended bounds
+                    Math.abs(projectile.position.x) > gameSettings.playAreaWidth ||
+                    Math.abs(projectile.position.y) > gameSettings.playAreaHeight) {
+                    scene.remove(projectile);
+                    if (projectile.geometry) projectile.geometry.dispose();
+                    if (projectile.material) projectile.material.dispose();
+                    playerProjectiles.splice(i, 1);
+                    continue;
+                }
+                checkProjectileCollisions(projectile, i);
+            }
+        }
+        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 Advancing Bricks
+            for (let j = advancingBricks.length - 1; j >= 0; j--) {
+                const brick = advancingBricks[j];
+                if (!brick || !brick.geometry) continue; // Skip if brick already removed or invalid
+                const brickBox = new THREE.Box3().setFromObject(brick);
+                if (projectileBox.intersectsBox(brickBox)) {
+                    scene.remove(brick); // Remove brick from scene
+                    if (brick.geometry) brick.geometry.dispose();
+                    if (brick.material) brick.material.dispose();
+                    advancingBricks.splice(j, 1); // Remove brick from array
+                    scene.remove(projectile); // Remove projectile from scene
+                    if (projectile.geometry) projectile.geometry.dispose();
+                    if (projectile.material) projectile.material.dispose();
+                    playerProjectiles.splice(projectileIndex, 1); // Remove projectile from array
+                    projectile.userData.owner.score += gameSettings.pointsPerBrick;
+                    updateUI();
+                    return; // Projectile is gone, stop further checks for it
+                }
+            }
+            // 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! Players win!");
+                    }
+                    return;
+                }
+            }
+        }
+        // Moves bricks and checks for collisions with players
+        function updateBricks(delta) {
+            for (let i = advancingBricks.length - 1; i >= 0; i--) {
+                const brick = advancingBricks[i];
+                if (!brick || !brick.geometry) { // Safety check / already removed
+                    advancingBricks.splice(i,1);
+                    continue;
+                }
+                brick.position.z += gameSettings.brickLayerSpeed * delta;
+                // Brick is past the player's general Z plane - remove it
+                // Player Z is 15. Brick depth is 1. Player Size is 1.
+                // If brick's front (brick.position.z - brickDepth/2) is > player's back (15 + playerSize/2)
+                if (brick.position.z - gameSettings.brickDepth / 2 > players[0].mesh.position.z + gameSettings.playerSize / 2 + 2) { // Added buffer
+                    scene.remove(brick);
+                    if (brick.geometry) brick.geometry.dispose();
+                    if (brick.material) brick.material.dispose();
+                    advancingBricks.splice(i, 1);
+                    // console.log("Brick passed player zone and removed");
+                    continue;
+                }
+                // Check collision with players
+                const brickBox = new THREE.Box3().setFromObject(brick);
+                for (const player of players) {
+                    if (player.lives <= 0 || !player.mesh.visible || player.invincibleTimer > 0) continue;
+                    const playerBox = new THREE.Box3().setFromObject(player.mesh);
+                    if (brickBox.intersectsBox(playerBox)) {
+                        player.lives--;
+                        player.invincibleTimer = gameSettings.playerInvincibilityDuration;
+                        player.mesh.material.color.setHex(0xff3333); // Flash red
+                        // Destroy the brick that hit the player
+                        scene.remove(brick);
+                        if (brick.geometry) brick.geometry.dispose();
+                        if (brick.material) brick.material.dispose();
+                        advancingBricks.splice(i, 1);
+                        updateUI();
+                        if (player.lives <= 0) {
+                            player.mesh.visible = false; // Hide player mesh when out of lives
+                        }
+                        checkOverallGameOver();
+                        break; // Brick is gone, stop checking it against other players
+                    }
+                }
+            }
+        }
+        function updateQotile(delta) {
+            if (qotile && qotile.hitTimer > 0) {
+                qotile.hitTimer -= delta;
+                if (qotile.hitTimer <= 0) {
+                    qotile.mesh.material.emissive.setHex(0x330000);
+                }
+            }
+        }
+        function updateUI() {
+            const p1 = players && players[0] ? players[0] : { score: 0, lives: 0 };
+            const p2 = players && players[1] ? players[1] : { score: 0, lives: 0 };
+            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 checkOverallGameOver() {
+            if (!gameActive) return;
+            const activePlayers = players.filter(p => p.lives > 0).length;
+            if (activePlayers === 0) {
+                endGame("All players are out of lives! Game Over.");
+            }
+        }
+        function endGame(message) {
+            if (!gameActive) return;
+            gameActive = false;
+            console.log("Game Over:", message);
+            document.getElementById('gameOverMessage').textContent = message;
+            document.getElementById('gameOverScreen').style.display = 'flex';
+            // Clear remaining projectiles (bricks are cleared by their own logic or restart)
+            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() {
+            // Clean up existing meshes from scene
+            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();
+            });
+            advancingBricks.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();
+            }
+            // Reset arrays
+            players = [];
+            playerProjectiles = [];
+            advancingBricks = [];
+            qotile = null;
+            // Re-initialize game elements
+            createPlayers(); // This will reset player scores, lives, positions, visibility
+            createInitialBrickLayers();
+            createQotile();
+            // Reset game state variables
+            gameActive = true;
+            newLayerTimer = 0;
+            players.forEach(p => { // Ensure players are visible and not invincible
+                p.mesh.visible = true;
+                p.invincibleTimer = 0;
+                p.mesh.material.color.setHex(p.originalColor);
+            });
+            document.getElementById('gameOverScreen').style.display = 'none';
+            updateUI();
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            const delta = clock.getDelta();
+            if (gameActive) {
+                players.forEach(player => {
+                    if (player.mesh && player.lives > 0) {
+                        handlePlayerMovement(player, delta);
+                        handlePlayerShooting(player, delta);
+                    }
+                    // Invincibility update happens regardless of player input if timer is active
+                    updatePlayerInvincibility(player, delta);
+                });
+                updateProjectiles(delta);
+                updateBricks(delta); // Handles brick movement and collision with players
+                updateQotile(delta);
+                // Spawn new brick layers
+                newLayerTimer += delta;
+                if (newLayerTimer >= gameSettings.newLayerSpawnInterval) {
+                    spawnNewBrickLayer(gameSettings.brickSpawnStartZ);
+                    newLayerTimer = 0;
+                }
+            }
+            updateUI();
+            renderer.render(scene, camera);
+        }
+        function onKeyDown(event) {
+            keysPressed[event.code] = true;
+            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>