Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on Nov 30, 2025

Commit

aa4bb9d

verified ·

1 Parent(s): e0245e2

Update index.html

Browse files

Files changed (1) hide show

index.html +1368 -560

index.html CHANGED Viewed

@@ -1,11 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Doom-Style 3D Shooter</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/PointerLockControls.min.js"></script>
     <style>
         * {
             margin: 0;
@@ -13,6 +12,9 @@
             box-sizing: border-box;
             font-family: 'Courier New', monospace;
             touch-action: none;
         }
         body {
@@ -20,13 +22,14 @@
             background: #000;
             color: #ff5555;
             height: 100vh;
-            perspective: 1px;
         }
         #gameContainer {
             position: relative;
             width: 100%;
             height: 100vh;
             overflow: hidden;
         }
@@ -54,84 +57,164 @@
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            width: 30px;
-            height: 30px;
-            border: 2px solid #ff5555;
             border-radius: 50%;
-            pointer-events: none;
         }
         #crosshair::before, #crosshair::after {
             content: '';
             position: absolute;
             background: #ff5555;
         }
         #crosshair::before {
             width: 2px;
-            height: 10px;
-            top: -12px;
             left: 50%;
             transform: translateX(-50%);
         }
         #crosshair::after {
-            width: 10px;
             height: 2px;
             top: 50%;
-            right: -12px;
             transform: translateY(-50%);
         }
         #healthBar {
             position: absolute;
             bottom: 30px;
             left: 30px;
-            width: 200px;
-            height: 30px;
-            background: rgba(0, 0, 0, 0.7);
-            border: 2px solid #ff5555;
-            border-radius: 5px;
             overflow: hidden;
         }
         #healthFill {
             height: 100%;
             width: 100%;
-            background: linear-gradient(90deg, #ff0000, #ff5555);
-            transition: width 0.3s;
         }
         #ammoCounter {
             position: absolute;
             bottom: 30px;
             right: 30px;
-            font-size: 24px;
-            color: #ff5555;
-            text-shadow: 0 0 5px #ff0000;
-            background: rgba(0, 0, 0, 0.7);
-            padding: 10px 20px;
-            border: 2px solid #ff5555;
             border-radius: 5px;
         }
         #score {
             position: absolute;
             top: 30px;
             left: 30px;
-            font-size: 24px;
             color: #ff5555;
             text-shadow: 0 0 5px #ff0000;
         }
         #startScreen {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(20, 0, 0, 0.9)),
-                        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23110000"/><path d="M0 0L100 100M100 0L0 100" stroke="%23300" stroke-width="1"/></svg>');
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -141,38 +224,45 @@
         }
         #title {
-            font-size: 72px;
-            margin-bottom: 30px;
-            text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
-            letter-spacing: 5px;
         }
         #subtitle {
             font-size: 24px;
-            margin-bottom: 50px;
             color: #ff9999;
         }
         #startButton {
-            background: #ff0000;
             color: #fff;
             border: none;
-            padding: 15px 50px;
-            font-size: 24px;
             cursor: pointer;
             border-radius: 5px;
             text-transform: uppercase;
-            letter-spacing: 3px;
             font-weight: bold;
-            box-shadow: 0 0 15px #ff0000;
             transition: all 0.3s;
             pointer-events: auto;
         }
         #startButton:hover {
-            background: #ff5555;
-            transform: scale(1.05);
-            box-shadow: 0 0 25px #ff0000;
         }
         #gameOverScreen {
@@ -181,7 +271,7 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.85);
             display: none;
             flex-direction: column;
             justify-content: center;
@@ -190,129 +280,174 @@
         }
         #gameOverTitle {
-            font-size: 60px;
-            margin-bottom: 20px;
             color: #ff0000;
-            text-shadow: 0 0 10px #ff0000;
         }
         #finalScore {
-            font-size: 36px;
             margin-bottom: 40px;
             color: #ff9999;
         }
         #restartButton {
-            background: #ff0000;
             color: #fff;
             border: none;
-            padding: 15px 50px;
-            font-size: 24px;
             cursor: pointer;
             border-radius: 5px;
             text-transform: uppercase;
-            letter-spacing: 3px;
             font-weight: bold;
-            box-shadow: 0 0 15px #ff0000;
             transition: all 0.3s;
         }
         #restartButton:hover {
-            background: #ff5555;
-            transform: scale(1.05);
-            box-shadow: 0 0 25px #ff0000;
-        }
-        #weapon {
-            position: absolute;
-            bottom: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 300px;
-            height: 200px;
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200"><rect x="50" y="100" width="200" height="30" fill="%23333"/><rect x="100" y="50" width="100" height="50" fill="%23444"/><rect x="130" y="30" width="40" height="20" fill="%23555"/><circle cx="150" cy="115" r="15" fill="%23222"/></svg>') no-repeat center bottom;
-            background-size: contain;
-            z-index: 3;
-            transition: transform 0.1s;
         }
-        .hitEffect {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(255, 0, 0, 0.3);
             pointer-events: none;
             opacity: 0;
             z-index: 4;
         }
-        #bloodEffect {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: radial-gradient(circle, rgba(255,0,0,0.7) 0%, rgba(255,0,0,0) 70%);
             pointer-events: none;
             opacity: 0;
-            z-index: 5;
         }
-        /* Mobile Controls */
         #mobileControls {
             position: absolute;
-            bottom: 20px;
             width: 100%;
             display: none;
             justify-content: space-between;
-            padding: 0 20px;
             z-index: 10;
             pointer-events: none;
         }
-        .controlPad {
-            width: 120px;
-            height: 120px;
-            background: rgba(255, 0, 0, 0.3);
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
             pointer-events: auto;
         }
-        .controlStick {
-            width: 50px;
-            height: 50px;
-            background: rgba(255, 85, 85, 0.7);
             border-radius: 50%;
-            position: relative;
         }
         #shootButton {
-            width: 80px;
-            height: 80px;
-            background: rgba(255, 0, 0, 0.5);
             border-radius: 50%;
             display: flex;
             justify-content: center;
             align-items: center;
-            font-size: 24px;
             color: white;
             pointer-events: auto;
-            border: 2px solid #ff5555;
         }
-        #instructions {
             position: absolute;
             bottom: 160px;
             width: 100%;
-            text-align: center;
-            color: #ff9999;
-            font-size: 18px;
-            padding: 0 20px;
         }
         @media (max-width: 768px) {
@@ -320,17 +455,60 @@
                 display: flex;
             }
-            #instructions {
-                display: block;
-            }
             #title {
                 font-size: 48px;
             }
             #subtitle {
                 font-size: 18px;
             }
         }
     </style>
 </head>
@@ -339,525 +517,1082 @@
         <div id="gameCanvas"></div>
         <div id="ui">
-            <div id="crosshair"></div>
             <div id="healthBar">
                 <div id="healthFill"></div>
             </div>
-            <div id="ammoCounter">AMMO: 30</div>
-            <div id="score">SCORE: 0</div>
-            <div id="weapon"></div>
-            <div class="hitEffect" id="hitEffect"></div>
-            <div id="bloodEffect"></div>
         </div>
         <div id="mobileControls">
-            <div class="controlPad" id="movementPad">
-                <div class="controlStick" id="movementStick"></div>
             </div>
             <div id="shootButton">FIRE</div>
         </div>
-        <div id="instructions">Use joystick to move, tap FIRE to shoot</div>
         <div id="startScreen">
             <h1 id="title">DEMON SLAYER</h1>
-            <p id="subtitle">Eliminate all demons to survive</p>
             <button id="startButton">START MISSION</button>
         </div>
         <div id="gameOverScreen">
             <h1 id="gameOverTitle">MISSION FAILED</h1>
-            <p id="finalScore">SCORE: 0</p>
             <button id="restartButton">TRY AGAIN</button>
         </div>
     </div>
-    <script>
-        // Game variables
-        let scene, camera, renderer, controls;
-        let player, enemies = [], bullets = [];
-        let playerHealth = 100;
-        let ammo = 30;
-        let score = 0;
-        let gameActive = false;
-        let moveForward = false;
-        let moveBackward = false;
-        let moveLeft = false;
-        let moveRight = false;
-        let canShoot = true;
-        let lastShotTime = 0;
-        let shotCooldown = 300; // ms
-        let enemySpawnTimer = 0;
         let clock = new THREE.Clock();
         let isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-        // Mobile controls
-        let movementStickActive = false;
-        let movementStickPosition = { x: 0, y: 0 };
-        let movementStickRadius = 35;
-        // Initialize the game
         function init() {
-            // Create scene
             scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x110000);
-            scene.fog = new THREE.Fog(0x110000, 10, 50);
-            // Create camera
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.y = 1.6;
-            // Create renderer
-            renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.shadowMap.enabled = true;
             document.getElementById('gameCanvas').appendChild(renderer.domElement);
-            // Add lighting
-            const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
-            scene.add(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xff5555, 0.8);
-            directionalLight.position.set(10, 20, 10);
-            directionalLight.castShadow = true;
-            scene.add(directionalLight);
-            // Create floor
-            const floorGeometry = new THREE.PlaneGeometry(100, 100);
-            const floorMaterial = new THREE.MeshStandardMaterial({
-                color: 0x222222,
-                roughness: 0.8,
-                metalness: 0.2
-            });
-            const floor = new THREE.Mesh(floorGeometry, floorMaterial);
-            floor.rotation.x = -Math.PI / 2;
-            floor.receiveShadow = true;
-            scene.add(floor);
-            // Create walls
-            createWalls();
-            // Create pillars
-            createPillars();
-            // Create player
-            player = new THREE.Object3D();
-            player.position.set(0, 1.6, 0);
-            scene.add(player);
-            player.add(camera);
-            // Add pointer lock controls for desktop
-            if (!isMobile) {
-                controls = new THREE.PointerLockControls(camera, document.body);
-            }
-            // Event listeners
-            if (!isMobile) {
-                document.addEventListener('keydown', onKeyDown, false);
-                document.addEventListener('keyup', onKeyUp, false);
-                document.addEventListener('mousedown', onMouseDown, false);
-                document.addEventListener('mousemove', onMouseMove, false);
-            } else {
-                setupMobileControls();
             }
-            window.addEventListener('resize', onWindowResize, false);
-            // Start button event
-            document.getElementById('startButton').addEventListener('click', startGame);
-            document.getElementById('restartButton').addEventListener('click', restartGame);
-            // Start animation loop
-            animate();
         }
-        function createWalls() {
-            const wallMaterial = new THREE.MeshStandardMaterial({
-                color: 0x330000,
                 roughness: 0.9,
-                metalness: 0.1
             });
-            // Create a simple maze-like structure
             const walls = [
-                // Outer walls
-                { x: 0, y: 2, z: -25, width: 50, height: 4, depth: 1 },
-                { x: 0, y: 2, z: 25, width: 50, height: 4, depth: 1 },
-                { x: -25, y: 2, z: 0, width: 1, height: 4, depth: 50 },
-                { x: 25, y: 2, z: 0, width: 1, height: 4, depth: 50 },
-                // Inner walls
-                { x: -10, y: 2, z: -10, width: 1, height: 4, depth: 20 },
-                { x: 10, y: 2, z: 10, width: 1, height: 4, depth: 20 },
-                { x: 0, y: 2, z: 0, width: 20, height: 4, depth: 1 },
-                { x: 0, y: 2, z: -20, width: 20, height: 4, depth: 1 }
             ];
-            walls.forEach(wall => {
-                const wallGeometry = new THREE.BoxGeometry(wall.width, wall.height, wall.depth);
-                const wallMesh = new THREE.Mesh(wallGeometry, wallMaterial);
-                wallMesh.position.set(wall.x, wall.y, wall.z);
-                wallMesh.castShadow = true;
-                wallMesh.receiveShadow = true;
-                scene.add(wallMesh);
             });
         }
         function createPillars() {
-            const pillarMaterial = new THREE.MeshStandardMaterial({
-                color: 0x440000,
                 roughness: 0.7,
                 metalness: 0.3
             });
-            const pillarGeometry = new THREE.CylinderGeometry(1, 1, 4, 16);
             const positions = [
-                { x: -20, z: -20 },
-                { x: 20, z: -20 },
-                { x: -20, z: 20 },
-                { x: 20, z: 20 },
-                { x: 0, z: -15 },
-                { x: 0, z: 15 },
-                { x: -15, z: 0 },
-                { x: 15, z: 0 }
             ];
             positions.forEach(pos => {
                 const pillar = new THREE.Mesh(pillarGeometry, pillarMaterial);
-                pillar.position.set(pos.x, 2, pos.z);
                 pillar.castShadow = true;
                 pillar.receiveShadow = true;
                 scene.add(pillar);
             });
         }
-        // Create a detailed demon model
-        function createDemon() {
-            const demonGroup = new THREE.Group();
-            // Body
-            const bodyGeometry = new THREE.SphereGeometry(0.8, 16, 16);
-            const bodyMaterial = new THREE.MeshStandardMaterial({
-                color: 0x880000,
-                roughness: 0.7,
-                metalness: 0.3
             });
-            const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
-            body.position.y = 1;
-            body.castShadow = true;
-            demonGroup.add(body);
-            // Head
-            const headGeometry = new THREE.SphereGeometry(0.6, 16, 16);
-            const headMaterial = new THREE.MeshStandardMaterial({
-                color: 0xaa0000,
-                roughness: 0.7,
-                metalness: 0.3
-            });
-            const head = new THREE.Mesh(headGeometry, headMaterial);
-            head.position.y = 1.8;
-            head.castShadow = true;
-            demonGroup.add(head);
-            // Horns
-            const hornGeometry = new THREE.ConeGeometry(0.1, 0.8, 8);
-            const hornMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
-            const horn1 = new THREE.Mesh(hornGeometry, hornMaterial);
-            horn1.position.set(-0.2, 2.3, 0);
-            horn1.rotation.z = Math.PI / 6;
-            horn1.castShadow = true;
-            demonGroup.add(horn1);
-            const horn2 = new THREE.Mesh(hornGeometry, hornMaterial);
-            horn2.position.set(0.2, 2.3, 0);
-            horn2.rotation.z = -Math.PI / 6;
-            horn2.castShadow = true;
-            demonGroup.add(horn2);
-            // Eyes
-            const eyeGeometry = new THREE.SphereGeometry(0.15, 8, 8);
-            const eyeMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00 });
-            const eye1 = new THREE.Mesh(eyeGeometry, eyeMaterial);
-            eye1.position.set(-0.25, 1.9, 0.4);
-            demonGroup.add(eye1);
-            const eye2 = new THREE.Mesh(eyeGeometry, eyeMaterial);
-            eye2.position.set(0.25, 1.9, 0.4);
-            demonGroup.add(eye2);
-            // Arms
-            const armGeometry = new THREE.CylinderGeometry(0.15, 0.15, 1.2, 8);
-            const armMaterial = new THREE.MeshStandardMaterial({ color: 0x770000 });
-            const arm1 = new THREE.Mesh(armGeometry, armMaterial);
-            arm1.position.set(-0.9, 1, 0);
-            arm1.rotation.z = Math.PI / 4;
-            arm1.castShadow = true;
-            demonGroup.add(arm1);
-            const arm2 = new THREE.Mesh(armGeometry, armMaterial);
-            arm2.position.set(0.9, 1, 0);
-            arm2.rotation.z = -Math.PI / 4;
-            arm2.castShadow = true;
-            demonGroup.add(arm2);
-            // Legs
-            const legGeometry = new THREE.CylinderGeometry(0.2, 0.2, 1, 8);
-            const legMaterial = new THREE.MeshStandardMaterial({ color: 0x660000 });
-            const leg1 = new THREE.Mesh(legGeometry, legMaterial);
-            leg1.position.set(-0.4, 0.3, 0);
-            leg1.castShadow = true;
-            demonGroup.add(leg1);
-            const leg2 = new THREE.Mesh(legGeometry, legMaterial);
-            leg2.position.set(0.4, 0.3, 0);
-            leg2.castShadow = true;
-            demonGroup.add(leg2);
-            return demonGroup;
-        }
-        function spawnEnemy() {
-            const demon = createDemon();
-            demon.position.set(
-                (Math.random() - 0.5) * 40,
-                0,
-                (Math.random() - 0.5) * 40
-            );
-            demon.rotation.y = Math.random() * Math.PI * 2;
-            scene.add(demon);
-            enemies.push({
-                mesh: demon,
-                health: 100,
-                speed: 0.02 + Math.random() * 0.03,
-                lastAttack: 0,
-                attackCooldown: 1000 + Math.random() * 2000
             });
         }
-        function startGame() {
-            document.getElementById('startScreen').style.display = 'none';
             if (!isMobile) {
-                controls.lock();
-            }
-            gameActive = true;
-            // Spawn initial enemies
-            for (let i = 0; i < 5; i++) {
-                spawnEnemy();
             }
         }
-        function restartGame() {
-            document.getElementById('gameOverScreen').style.display = 'none';
-            playerHealth = 100;
-            ammo = 30;
-            score = 0;
-            updateUI();
-            // Remove all enemies
-            enemies.forEach(enemy => {
-                scene.remove(enemy.mesh);
             });
-            enemies = [];
-            // Remove all bullets
-            bullets.forEach(bullet => {
-                scene.remove(bullet.mesh);
             });
-            bullets = [];
-            // Reset player position
-            player.position.set(0, 1.6, 0);
-            // Spawn initial enemies
-            for (let i = 0; i < 5; i++) {
-                spawnEnemy();
-            }
-            if (!isMobile) {
-                controls.lock();
             }
-            gameActive = true;
         }
-        function gameOver() {
-            gameActive = false;
-            if (!isMobile) {
-                controls.unlock();
             }
-            document.getElementById('finalScore').textContent = `SCORE: ${score}`;
-            document.getElementById('gameOverScreen').style.display = 'flex';
-        }
-        function updateUI() {
-            document.getElementById('healthFill').style.width = `${playerHealth}%`;
-            document.getElementById('ammoCounter').textContent = `AMMO: ${ammo}`;
-            document.getElementById('score').textContent = `SCORE: ${score}`;
         }
-        function onKeyDown(event) {
-            switch (event.code) {
-                case 'KeyW': moveForward = true; break;
-                case 'KeyS': moveBackward = true; break;
-                case 'KeyA': moveLeft = true; break;
-                case 'KeyD': moveRight = true; break;
             }
         }
-        function onKeyUp(event) {
-            switch (event.code) {
-                case 'KeyW': moveForward = false; break;
-                case 'KeyS': moveBackward = false; break;
-                case 'KeyA': moveLeft = false; break;
-                case 'KeyD': moveRight = false; break;
-            }
         }
-        function onMouseDown() {
-            if (!gameActive) return;
-            if (ammo > 0 && canShoot) {
-                shoot();
-                canShoot = false;
-                setTimeout(() => { canShoot = true; }, shotCooldown);
-            }
-        }
-        function onMouseMove(event) {
-            if (!gameActive || isMobile) return;
-            // Add weapon sway effect
-            const weapon = document.getElementById('weapon');
-            const moveX = (event.movementX || 0) * 0.05;
-            const moveY = (event.movementY || 0) * 0.05;
-            weapon.style.transform = `translateX(calc(-50% + ${moveX}px)) translateY(${moveY}px)`;
         }
         function shoot() {
             ammo--;
             updateUI();
-            // Create bullet
-            const bulletGeometry = new THREE.SphereGeometry(0.1, 8, 8);
-            const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
             const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
-            // Position bullet at camera
-            bullet.position.set(0, 0, 0);
-            camera.getWorldPosition(bullet.position);
-            // Direction vector
             const direction = new THREE.Vector3(0, 0, -1);
             direction.applyQuaternion(camera.quaternion);
             scene.add(bullet);
             bullets.push({
                 mesh: bullet,
                 direction: direction,
-                speed: 1.0,
                 distance: 0
             });
-            // Weapon recoil effect
-            const weapon = document.getElementById('weapon');
-            weapon.style.transform = 'translateX(-50%) translateY(20px)';
-            setTimeout(() => {
-                weapon.style.transform = 'translateX(-50%) translateY(0)';
-            }, 100);
-            // Muzzle flash effect
-            const flash = document.createElement('div');
-            flash.style.position = 'absolute';
-            flash.style.width = '50px';
-            flash.style.height = '50px';
-            flash.style.background = 'radial-gradient(circle, #ffff00, #ff5500, transparent)';
-            flash.style.borderRadius = '50%';
-            flash.style.top = '50%';
-            flash.style.left = '50%';
-            flash.style.transform = 'translate(-50%, -50%)';
-            flash.style.pointerEvents = 'none';
-            flash.style.zIndex = '10';
-            document.getElementById('ui').appendChild(flash);
-            setTimeout(() => {
-                document.getElementById('ui').removeChild(flash);
-            }, 50);
         }
-        function setupMobileControls() {
-            const movementPad = document.getElementById('movementPad');
-            const movementStick = document.getElementById('movementStick');
-            const shootButton = document.getElementById('shootButton');
-            // Movement pad touch events
-            movementPad.addEventListener('touchstart', (e) => {
-                movementStickActive = true;
-                updateMovementStick(e.touches[0]);
             });
-            movementPad.addEventListener('touchmove', (e) => {
-                if (movementStickActive) {
-                    e.preventDefault();
-                    updateMovementStick(e.touches[0]);
                 }
             });
-            movementPad.addEventListener('touchend', () => {
-                movementStickActive = false;
-                movementStickPosition = { x: 0, y: 0 };
-                movementStick.style.transform = 'translate(0, 0)';
-                moveForward = false;
-                moveBackward = false;
-                moveLeft = false;
-                moveRight = false;
             });
-            // Shoot button touch events
-            shootButton.addEventListener('touchstart', (e) => {
-                e.preventDefault();
-                if (gameActive && ammo > 0 && canShoot) {
-                    shoot();
-                    canShoot = false;
-                    setTimeout(() => { canShoot = true; }, shotCooldown);
-                }
             });
-            function updateMovementStick(touch) {
-                const padRect = movementPad.getBoundingClientRect();
-                const centerX = padRect.left + padRect.width / 2;
-                const centerY = padRect.top + padRect.height / 2;
-                let deltaX = touch.clientX - centerX;
-                let deltaY = touch.clientY - centerY;
-                // Limit to pad radius
-                const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-                if (distance > movementStickRadius) {
-                    deltaX = deltaX * movementStickRadius / distance;
-                    deltaY = deltaY * movementStickRadius / distance;
-                }
-                movementStickPosition = { x: deltaX, y: deltaY };
-                movementStick.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
-                // Update movement flags
-                moveForward = deltaY < -10;
-                moveBackward = deltaY > 10;
-                moveLeft = deltaX < -10;
-                moveRight = deltaX > 10;
             }
         }
-        function onWindowResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
         }
         function animate() {
@@ -866,129 +1601,202 @@
             const delta = clock.getDelta();
             if (gameActive) {
-                // Player movement
-                const speed = 0.1;
-                if (isMobile) {
-                    // Mobile movement based on joystick
-                    if (moveForward) player.translateZ(-speed);
-                    if (moveBackward) player.translateZ(speed);
-                    if (moveLeft) player.translateX(-speed);
-                    if (moveRight) player.translateX(speed);
-                } else {
-                    // Desktop movement
-                    if (moveForward) player.translateZ(-speed);
-                    if (moveBackward) player.translateZ(speed);
-                    if (moveLeft) player.translateX(-speed);
-                    if (moveRight) player.translateX(speed);
                 }
-                // Keep player within bounds
-                player.position.x = Math.max(-24, Math.min(24, player.position.x));
-                player.position.z = Math.max(-24, Math.min(24, player.position.z));
-                // Enemy AI
-                enemies.forEach((enemy, index) => {
-                    // Move towards player
-                    const direction = new THREE.Vector3();
-                    direction.subVectors(player.position, enemy.mesh.position).normalize();
-                    enemy.mesh.position.add(direction.multiplyScalar(enemy.speed));
-                    // Rotate to face player
-                    enemy.mesh.lookAt(player.position);
-                    enemy.mesh.rotation.x = 0; // Keep upright
-                    enemy.mesh.rotation.z = 0;
-                    // Attack player if close
-                    const distance = player.position.distanceTo(enemy.mesh.position);
-                    if (distance < 3 && Date.now() - enemy.lastAttack > enemy.attackCooldown) {
-                        playerHealth -= 10;
-                        updateUI();
-                        enemy.lastAttack = Date.now();
-                        // Show hit effect
-                        const hitEffect = document.getElementById('hitEffect');
-                        hitEffect.style.opacity = '1';
-                        setTimeout(() => {
-                            hitEffect.style.opacity = '0';
-                        }, 100);
-                        // Show blood effect
-                        const bloodEffect = document.getElementById('bloodEffect');
-                        bloodEffect.style.opacity = '0.7';
-                        setTimeout(() => {
-                            bloodEffect.style.opacity = '0';
-                        }, 200);
-                        if (playerHealth <= 0) {
-                            gameOver();
-                        }
                     }
-                    // Remove dead enemies
-                    if (enemy.health <= 0) {
-                        scene.remove(enemy.mesh);
-                        enemies.splice(index, 1);
-                        score += 100;
-                        updateUI();
-                        // Spawn new enemy
-                        if (Math.random() > 0.7) {
-                            spawnEnemy();
-                        }
-                    }
-                });
-                // Update bullets
                 for (let i = bullets.length - 1; i >= 0; i--) {
                     const bullet = bullets[i];
                     bullet.mesh.position.add(bullet.direction.clone().multiplyScalar(bullet.speed));
                     bullet.distance += bullet.speed;
-                    // Remove bullets that travel too far
-                    if (bullet.distance > 50) {
                         scene.remove(bullet.mesh);
                         bullets.splice(i, 1);
                         continue;
                     }
-                    // Check for collisions with enemies
                     for (let j = enemies.length - 1; j >= 0; j--) {
                         const enemy = enemies[j];
-                        const distance = bullet.mesh.position.distanceTo(enemy.mesh.position);
-                        if (distance < 1.5) {
-                            // Hit enemy
-                            enemy.health -= 25;
                             scene.remove(bullet.mesh);
                             bullets.splice(i, 1);
-                            // Enemy hit effect
-                            enemy.mesh.children[0].material.color.set(0xff0000);
-                            setTimeout(() => {
-                                if (enemy.mesh && enemy.mesh.children[0]) {
-                                    enemy.mesh.children[0].material.color.set(0x880000);
-                                }
-                            }, 100);
                             break;
                         }
                     }
                 }
-                // Spawn enemies periodically
-                enemySpawnTimer += delta;
-                if (enemySpawnTimer > 5) {
-                    spawnEnemy();
-                    enemySpawnTimer = 0;
                 }
             }
-            renderer.render(scene, camera);
         }
-        // Initialize the game when the page loads
-        window.onload = init;
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>DEMON SLAYER - AAA Edition</title>
     <style>
         * {
             margin: 0;
             box-sizing: border-box;
             font-family: 'Courier New', monospace;
             touch-action: none;
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            user-select: none;
         }
         body {
             background: #000;
             color: #ff5555;
             height: 100vh;
+            height: 100dvh;
         }
         #gameContainer {
             position: relative;
             width: 100%;
             height: 100vh;
+            height: 100dvh;
             overflow: hidden;
         }
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            width: 4px;
+            height: 4px;
+            background: #ff0000;
             border-radius: 50%;
+            box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
         }
         #crosshair::before, #crosshair::after {
             content: '';
             position: absolute;
             background: #ff5555;
+            box-shadow: 0 0 5px #ff0000;
         }
         #crosshair::before {
             width: 2px;
+            height: 15px;
+            top: -20px;
             left: 50%;
             transform: translateX(-50%);
         }
         #crosshair::after {
+            width: 15px;
+            height: 2px;
+            top: 50%;
+            left: 15px;
+            transform: translateY(-50%);
+        }
+        .crosshair-left {
+            position: absolute;
+            width: 15px;
             height: 2px;
+            background: #ff5555;
             top: 50%;
+            right: 15px;
             transform: translateY(-50%);
+            box-shadow: 0 0 5px #ff0000;
+        }
+        .crosshair-bottom {
+            position: absolute;
+            width: 2px;
+            height: 15px;
+            background: #ff5555;
+            bottom: -20px;
+            left: 50%;
+            transform: translateX(-50%);
+            box-shadow: 0 0 5px #ff0000;
         }
         #healthBar {
             position: absolute;
             bottom: 30px;
             left: 30px;
+            width: 250px;
+            height: 25px;
+            background: rgba(0, 0, 0, 0.8);
+            border: 2px solid #ff3333;
+            border-radius: 3px;
             overflow: hidden;
+            box-shadow: 0 0 15px rgba(255, 0, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.5);
         }
         #healthFill {
             height: 100%;
             width: 100%;
+            background: linear-gradient(180deg, #ff6666 0%, #cc0000 50%, #990000 100%);
+            transition: width 0.3s ease-out;
+            box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.3);
+        }
+        #healthText {
+            position: absolute;
+            bottom: 60px;
+            left: 30px;
+            font-size: 14px;
+            color: #ff9999;
+            text-shadow: 0 0 5px #ff0000;
+            letter-spacing: 2px;
+        }
+        #armorBar {
+            position: absolute;
+            bottom: 70px;
+            left: 30px;
+            width: 200px;
+            height: 15px;
+            background: rgba(0, 0, 0, 0.8);
+            border: 2px solid #3366ff;
+            border-radius: 3px;
+            overflow: hidden;
+            box-shadow: 0 0 15px rgba(0, 100, 255, 0.5);
+        }
+        #armorFill {
+            height: 100%;
+            width: 50%;
+            background: linear-gradient(180deg, #6699ff 0%, #0033cc 50%, #002299 100%);
+            transition: width 0.3s ease-out;
         }
         #ammoCounter {
             position: absolute;
             bottom: 30px;
             right: 30px;
+            font-size: 36px;
+            color: #ffcc00;
+            text-shadow: 0 0 10px #ff6600, 0 0 20px #ff3300;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 15px 25px;
+            border: 2px solid #ff6600;
             border-radius: 5px;
+            box-shadow: 0 0 20px rgba(255, 100, 0, 0.5);
+        }
+        #ammoLabel {
+            font-size: 12px;
+            color: #ff9966;
+            letter-spacing: 2px;
         }
         #score {
             position: absolute;
             top: 30px;
             left: 30px;
+            font-size: 28px;
             color: #ff5555;
+            text-shadow: 0 0 10px #ff0000;
+        }
+        #killCount {
+            position: absolute;
+            top: 70px;
+            left: 30px;
+            font-size: 18px;
+            color: #ff9999;
             text-shadow: 0 0 5px #ff0000;
         }
+        #waveInfo {
+            position: absolute;
+            top: 30px;
+            right: 30px;
+            font-size: 24px;
+            color: #ff6666;
+            text-shadow: 0 0 10px #ff0000;
+            text-align: right;
+        }
         #startScreen {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            background: radial-gradient(ellipse at center, rgba(30, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.95) 100%);
             display: flex;
             flex-direction: column;
             justify-content: center;
         }
         #title {
+            font-size: 80px;
+            margin-bottom: 20px;
+            text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000;
+            letter-spacing: 10px;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000; }
+            50% { text-shadow: 0 0 30px #ff0000, 0 0 60px #ff0000, 0 0 80px #ff0000; }
         }
         #subtitle {
             font-size: 24px;
+            margin-bottom: 60px;
             color: #ff9999;
+            letter-spacing: 5px;
         }
         #startButton {
+            background: linear-gradient(180deg, #ff3333 0%, #cc0000 100%);
             color: #fff;
             border: none;
+            padding: 20px 60px;
+            font-size: 28px;
             cursor: pointer;
             border-radius: 5px;
             text-transform: uppercase;
+            letter-spacing: 5px;
             font-weight: bold;
+            box-shadow: 0 0 30px #ff0000, inset 0 2px 10px rgba(255, 255, 255, 0.3);
             transition: all 0.3s;
             pointer-events: auto;
         }
         #startButton:hover {
+            background: linear-gradient(180deg, #ff5555 0%, #ee2222 100%);
+            transform: scale(1.1);
+            box-shadow: 0 0 50px #ff0000;
         }
         #gameOverScreen {
             left: 0;
             width: 100%;
             height: 100%;
+            background: rgba(0, 0, 0, 0.9);
             display: none;
             flex-direction: column;
             justify-content: center;
         }
         #gameOverTitle {
+            font-size: 70px;
+            margin-bottom: 30px;
             color: #ff0000;
+            text-shadow: 0 0 20px #ff0000;
+            animation: flicker 0.5s infinite;
+        }
+        @keyframes flicker {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.8; }
         }
         #finalScore {
+            font-size: 40px;
+            margin-bottom: 20px;
+            color: #ffcc00;
+        }
+        #finalKills {
+            font-size: 24px;
             margin-bottom: 40px;
             color: #ff9999;
         }
         #restartButton {
+            background: linear-gradient(180deg, #ff3333 0%, #cc0000 100%);
             color: #fff;
             border: none;
+            padding: 20px 60px;
+            font-size: 28px;
             cursor: pointer;
             border-radius: 5px;
             text-transform: uppercase;
+            letter-spacing: 5px;
             font-weight: bold;
+            box-shadow: 0 0 30px #ff0000;
             transition: all 0.3s;
+            pointer-events: auto;
         }
         #restartButton:hover {
+            background: linear-gradient(180deg, #ff5555 0%, #ee2222 100%);
+            transform: scale(1.1);
         }
+        #hitEffect {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            background: radial-gradient(ellipse at center, transparent 0%, rgba(255, 0, 0, 0.4) 100%);
             pointer-events: none;
             opacity: 0;
             z-index: 4;
+            transition: opacity 0.1s;
         }
+        #damageVignette {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            background: radial-gradient(ellipse at center, transparent 40%, rgba(100, 0, 0, 0.8) 100%);
             pointer-events: none;
             opacity: 0;
+            z-index: 3;
+            transition: opacity 0.5s;
         }
         #mobileControls {
             position: absolute;
+            bottom: 0;
             width: 100%;
+            height: 200px;
             display: none;
             justify-content: space-between;
+            padding: 20px 30px;
             z-index: 10;
             pointer-events: none;
         }
+        .joystickContainer {
+            width: 150px;
+            height: 150px;
+            position: relative;
             pointer-events: auto;
         }
+        .joystickBase {
+            width: 150px;
+            height: 150px;
+            background: radial-gradient(circle, rgba(255, 50, 50, 0.3) 0%, rgba(255, 0, 0, 0.1) 100%);
+            border: 3px solid rgba(255, 50, 50, 0.5);
             border-radius: 50%;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        .joystickStick {
+            width: 60px;
+            height: 60px;
+            background: radial-gradient(circle, rgba(255, 100, 100, 0.9) 0%, rgba(200, 50, 50, 0.8) 100%);
+            border: 2px solid rgba(255, 150, 150, 0.8);
+            border-radius: 50%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
         }
         #shootButton {
+            width: 100px;
+            height: 100px;
+            background: radial-gradient(circle, rgba(255, 100, 0, 0.8) 0%, rgba(200, 50, 0, 0.6) 100%);
+            border: 3px solid rgba(255, 150, 50, 0.8);
             border-radius: 50%;
             display: flex;
             justify-content: center;
             align-items: center;
+            font-size: 16px;
+            font-weight: bold;
             color: white;
+            text-shadow: 0 0 10px #ff6600;
             pointer-events: auto;
+            box-shadow: 0 0 30px rgba(255, 100, 0, 0.5);
+            position: absolute;
+            bottom: 50px;
+            right: 180px;
         }
+        #reloadButton {
+            width: 70px;
+            height: 70px;
+            background: radial-gradient(circle, rgba(100, 100, 255, 0.8) 0%, rgba(50, 50, 200, 0.6) 100%);
+            border: 3px solid rgba(150, 150, 255, 0.8);
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 12px;
+            font-weight: bold;
+            color: white;
+            pointer-events: auto;
+            box-shadow: 0 0 20px rgba(100, 100, 255, 0.5);
             position: absolute;
             bottom: 160px;
+            right: 200px;
+        }
+        #minimap {
+            position: absolute;
+            top: 100px;
+            right: 30px;
+            width: 150px;
+            height: 150px;
+            background: rgba(0, 0, 0, 0.7);
+            border: 2px solid #ff5555;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+        #minimapCanvas {
             width: 100%;
+            height: 100%;
         }
         @media (max-width: 768px) {
                 display: flex;
             }
             #title {
                 font-size: 48px;
             }
             #subtitle {
+                font-size: 16px;
+                padding: 0 20px;
+            }
+            #startButton, #restartButton {
+                padding: 15px 40px;
+                font-size: 20px;
+            }
+            #healthBar {
+                width: 150px;
+                height: 20px;
+                bottom: 220px;
+                left: 20px;
+            }
+            #armorBar {
+                width: 120px;
+                height: 12px;
+                bottom: 250px;
+                left: 20px;
+            }
+            #ammoCounter {
+                bottom: 220px;
+                right: 20px;
+                font-size: 24px;
+                padding: 10px 15px;
+            }
+            #score {
+                top: 20px;
+                left: 20px;
+                font-size: 20px;
+            }
+            #killCount {
+                top: 50px;
+                font-size: 14px;
+            }
+            #waveInfo {
+                top: 20px;
                 font-size: 18px;
             }
+            #minimap {
+                display: none;
+            }
         }
     </style>
 </head>
         <div id="gameCanvas"></div>
         <div id="ui">
+            <div id="crosshair">
+                <div class="crosshair-left"></div>
+                <div class="crosshair-bottom"></div>
+            </div>
+            <div id="healthText">HEALTH</div>
             <div id="healthBar">
                 <div id="healthFill"></div>
             </div>
+            <div id="armorBar">
+                <div id="armorFill"></div>
+            </div>
+            <div id="ammoCounter">
+                <div id="ammoLabel">AMMO</div>
+                <span id="ammoValue">30</span> / <span id="ammoMax">30</span>
+            </div>
+            <div id="score">SCORE: <span id="scoreValue">0</span></div>
+            <div id="killCount">KILLS: <span id="killValue">0</span></div>
+            <div id="waveInfo">WAVE: <span id="waveValue">1</span></div>
+            <div id="hitEffect"></div>
+            <div id="damageVignette"></div>
+            <div id="minimap">
+                <canvas id="minimapCanvas"></canvas>
+            </div>
         </div>
         <div id="mobileControls">
+            <div class="joystickContainer" id="moveJoystick">
+                <div class="joystickBase"></div>
+                <div class="joystickStick" id="moveStick"></div>
+            </div>
+            <div class="joystickContainer" id="lookJoystick">
+                <div class="joystickBase"></div>
+                <div class="joystickStick" id="lookStick"></div>
             </div>
             <div id="shootButton">FIRE</div>
+            <div id="reloadButton">R</div>
         </div>
         <div id="startScreen">
             <h1 id="title">DEMON SLAYER</h1>
+            <p id="subtitle">SURVIVE THE ENDLESS HORDE</p>
             <button id="startButton">START MISSION</button>
         </div>
         <div id="gameOverScreen">
             <h1 id="gameOverTitle">MISSION FAILED</h1>
+            <p id="finalScore">SCORE: <span id="finalScoreValue">0</span></p>
+            <p id="finalKills">DEMONS SLAIN: <span id="finalKillValue">0</span></p>
             <button id="restartButton">TRY AGAIN</button>
         </div>
     </div>
+    <script type="importmap">
+    {
+        "imports": {
+            "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+            "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
+        }
+    }
+    </script>
+    <script type="module">
+        import * as THREE from 'three';
+        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+        import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+        import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+        import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
+        import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js';
+        let scene, camera, renderer, composer;
+        let player, enemies = [], bullets = [], particles = [], decals = [];
+        let playerHealth = 100, playerArmor = 50, ammo = 30, maxAmmo = 30, reserveAmmo = 120;
+        let score = 0, kills = 0, wave = 1;
+        let gameActive = false, isReloading = false;
+        let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
+        let canShoot = true, lastShotTime = 0, shotCooldown = 100;
         let clock = new THREE.Clock();
         let isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        let screenShake = { intensity: 0, decay: 0.9 };
+        let playerVelocity = new THREE.Vector3();
+        let cameraShakeOffset = new THREE.Vector3();
+        let weaponBob = 0, weaponRecoil = 0;
+        let moveJoystickData = { active: false, x: 0, y: 0 };
+        let lookJoystickData = { active: false, x: 0, y: 0, lastX: 0, lastY: 0 };
+        let mouseMovement = { x: 0, y: 0 };
+        let isPointerLocked = false;
+        let floorTexture, wallTexture, ceilingTexture;
+        let pointLights = [];
+        let ambientParticles = [];
+        let minimapCtx;
+        let collisionObjects = [];
         function init() {
             scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x050505);
+            scene.fog = new THREE.FogExp2(0x0a0505, 0.02);
+            camera = new THREE.PerspectiveCamera(85, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 1.7, 0);
+            renderer = new THREE.WebGLRenderer({
+                antialias: true,
+                powerPreference: "high-performance"
+            });
             renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
             renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            renderer.toneMapping = THREE.ACESFilmicToneMapping;
+            renderer.toneMappingExposure = 0.8;
             document.getElementById('gameCanvas').appendChild(renderer.domElement);
+            setupPostProcessing();
+            createTextures();
+            createLevel();
+            createLighting();
+            createAmbientParticles();
+            setupControls();
+            setupMinimap();
+            player = new THREE.Object3D();
+            player.position.set(0, 1.7, 0);
+            player.add(camera);
+            scene.add(player);
+            document.getElementById('startButton').addEventListener('click', startGame);
+            document.getElementById('startButton').addEventListener('touchend', startGame);
+            document.getElementById('restartButton').addEventListener('click', restartGame);
+            document.getElementById('restartButton').addEventListener('touchend', restartGame);
+            window.addEventListener('resize', onWindowResize);
+            animate();
+        }
+        function setupPostProcessing() {
+            composer = new EffectComposer(renderer);
+            const renderPass = new RenderPass(scene, camera);
+            composer.addPass(renderPass);
+            const bloomPass = new UnrealBloomPass(
+                new THREE.Vector2(window.innerWidth, window.innerHeight),
+                0.5, 0.4, 0.85
+            );
+            composer.addPass(bloomPass);
+            const smaaPass = new SMAAPass(window.innerWidth, window.innerHeight);
+            composer.addPass(smaaPass);
+            const vignetteShader = {
+                uniforms: {
+                    tDiffuse: { value: null },
+                    darkness: { value: 1.0 },
+                    offset: { value: 1.0 }
+                },
+                vertexShader: `
+                    varying vec2 vUv;
+                    void main() {
+                        vUv = uv;
+                        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                    }
+                `,
+                fragmentShader: `
+                    uniform sampler2D tDiffuse;
+                    uniform float darkness;
+                    uniform float offset;
+                    varying vec2 vUv;
+                    void main() {
+                        vec4 texel = texture2D(tDiffuse, vUv);
+                        vec2 uv = (vUv - vec2(0.5)) * vec2(offset);
+                        float vignette = 1.0 - dot(uv, uv);
+                        texel.rgb *= mix(1.0 - darkness, 1.0, vignette);
+                        gl_FragColor = texel;
+                    }
+                `
+            };
+            const vignettePass = new ShaderPass(vignetteShader);
+            vignettePass.uniforms.darkness.value = 0.6;
+            vignettePass.uniforms.offset.value = 1.2;
+            composer.addPass(vignettePass);
+        }
+        function createTextures() {
+            const canvas = document.createElement('canvas');
+            canvas.width = 512;
+            canvas.height = 512;
+            const ctx = canvas.getContext('2d');
+            ctx.fillStyle = '#1a1a1a';
+            ctx.fillRect(0, 0, 512, 512);
+            for (let i = 0; i < 512; i += 64) {
+                for (let j = 0; j < 512; j += 64) {
+                    ctx.fillStyle = `rgb(${20 + Math.random() * 10}, ${15 + Math.random() * 10}, ${15 + Math.random() * 10})`;
+                    ctx.fillRect(i, j, 62, 62);
+                    for (let k = 0; k < 20; k++) {
+                        ctx.fillStyle = `rgba(0, 0, 0, ${Math.random() * 0.3})`;
+                        ctx.fillRect(i + Math.random() * 60, j + Math.random() * 60, 2, 2);
+                    }
+                }
             }
+            floorTexture = new THREE.CanvasTexture(canvas);
+            floorTexture.wrapS = THREE.RepeatWrapping;
+            floorTexture.wrapT = THREE.RepeatWrapping;
+            floorTexture.repeat.set(20, 20);
+            const wallCanvas = document.createElement('canvas');
+            wallCanvas.width = 256;
+            wallCanvas.height = 256;
+            const wallCtx = wallCanvas.getContext('2d');
+            const gradient = wallCtx.createLinearGradient(0, 0, 0, 256);
+            gradient.addColorStop(0, '#2a1515');
+            gradient.addColorStop(0.5, '#1a0a0a');
+            gradient.addColorStop(1, '#0a0505');
+            wallCtx.fillStyle = gradient;
+            wallCtx.fillRect(0, 0, 256, 256);
+            for (let i = 0; i < 50; i++) {
+                wallCtx.fillStyle = `rgba(${Math.random() * 50}, 0, 0, ${Math.random() * 0.2})`;
+                wallCtx.fillRect(Math.random() * 256, Math.random() * 256, Math.random() * 20, Math.random() * 20);
+            }
+            wallTexture = new THREE.CanvasTexture(wallCanvas);
+            wallTexture.wrapS = THREE.RepeatWrapping;
+            wallTexture.wrapT = THREE.RepeatWrapping;
         }
+        function createLevel() {
+            const floorGeometry = new THREE.PlaneGeometry(100, 100, 50, 50);
+            const floorMaterial = new THREE.MeshStandardMaterial({
+                map: floorTexture,
                 roughness: 0.9,
+                metalness: 0.1,
+                bumpScale: 0.02
+            });
+            const positions = floorGeometry.attributes.position;
+            for (let i = 0; i < positions.count; i++) {
+                positions.setZ(i, Math.random() * 0.05);
+            }
+            floorGeometry.computeVertexNormals();
+            const floor = new THREE.Mesh(floorGeometry, floorMaterial);
+            floor.rotation.x = -Math.PI / 2;
+            floor.receiveShadow = true;
+            scene.add(floor);
+            const ceilingGeometry = new THREE.PlaneGeometry(100, 100);
+            const ceilingMaterial = new THREE.MeshStandardMaterial({
+                color: 0x0a0505,
+                roughness: 1,
+                metalness: 0
+            });
+            const ceiling = new THREE.Mesh(ceilingGeometry, ceilingMaterial);
+            ceiling.rotation.x = Math.PI / 2;
+            ceiling.position.y = 5;
+            scene.add(ceiling);
+            const wallMaterial = new THREE.MeshStandardMaterial({
+                map: wallTexture,
+                roughness: 0.85,
+                metalness: 0.15,
+                side: THREE.DoubleSide
             });
             const walls = [
+                { x: 0, z: -50, rx: 0, ry: 0, w: 100, h: 5 },
+                { x: 0, z: 50, rx: 0, ry: Math.PI, w: 100, h: 5 },
+                { x: -50, z: 0, rx: 0, ry: Math.PI / 2, w: 100, h: 5 },
+                { x: 50, z: 0, rx: 0, ry: -Math.PI / 2, w: 100, h: 5 },
+                { x: -20, z: -20, rx: 0, ry: 0, w: 30, h: 5 },
+                { x: 20, z: 20, rx: 0, ry: Math.PI, w: 30, h: 5 },
+                { x: 0, z: 0, rx: 0, ry: Math.PI / 2, w: 20, h: 5 },
+                { x: -30, z: 10, rx: 0, ry: 0, w: 15, h: 5 },
+                { x: 30, z: -10, rx: 0, ry: Math.PI, w: 15, h: 5 }
             ];
+            walls.forEach(w => {
+                const wallGeometry = new THREE.PlaneGeometry(w.w, w.h);
+                const wall = new THREE.Mesh(wallGeometry, wallMaterial);
+                wall.position.set(w.x, 2.5, w.z);
+                wall.rotation.y = w.ry;
+                wall.castShadow = true;
+                wall.receiveShadow = true;
+                scene.add(wall);
+                collisionObjects.push({
+                    position: new THREE.Vector3(w.x, 2.5, w.z),
+                    rotation: w.ry,
+                    width: w.w,
+                    depth: 0.5
+                });
             });
+            createPillars();
+            createDecorations();
         }
         function createPillars() {
+            const pillarGeometry = new THREE.CylinderGeometry(0.8, 1, 5, 12);
+            const pillarMaterial = new THREE.MeshStandardMaterial({
+                color: 0x2a1010,
                 roughness: 0.7,
                 metalness: 0.3
             });
             const positions = [
+                [-15, -15], [15, -15], [-15, 15], [15, 15],
+                [-30, -30], [30, -30], [-30, 30], [30, 30],
+                [0, -30], [0, 30], [-30, 0], [30, 0],
+                [-8, 8], [8, -8]
             ];
             positions.forEach(pos => {
                 const pillar = new THREE.Mesh(pillarGeometry, pillarMaterial);
+                pillar.position.set(pos[0], 2.5, pos[1]);
                 pillar.castShadow = true;
                 pillar.receiveShadow = true;
                 scene.add(pillar);
+                const topGeometry = new THREE.CylinderGeometry(1.2, 0.8, 0.5, 12);
+                const top = new THREE.Mesh(topGeometry, pillarMaterial);
+                top.position.set(pos[0], 5, pos[1]);
+                scene.add(top);
+                collisionObjects.push({
+                    position: new THREE.Vector3(pos[0], 2.5, pos[1]),
+                    radius: 1.2
+                });
             });
         }
+        function createDecorations() {
+            const skullGeometry = new THREE.SphereGeometry(0.3, 8, 8);
+            const boneMaterial = new THREE.MeshStandardMaterial({
+                color: 0xd4c4a8,
+                roughness: 0.9
             });
+            for (let i = 0; i < 30; i++) {
+                const skull = new THREE.Mesh(skullGeometry, boneMaterial);
+                skull.position.set(
+                    (Math.random() - 0.5) * 80,
+                    0.15,
+                    (Math.random() - 0.5) * 80
+                );
+                skull.rotation.set(Math.random() * 0.5, Math.random() * Math.PI * 2, 0);
+                skull.scale.setScalar(0.5 + Math.random() * 0.5);
+                scene.add(skull);
+            }
+            const torchPositions = [
+                [-20, 2.5, -19], [20, 2.5, 21], [-29, 2.5, 10], [29, 2.5, -9],
+                [-48, 2.5, -48], [48, 2.5, -48], [-48, 2.5, 48], [48, 2.5, 48]
+            ];
+            torchPositions.forEach(pos => {
+                const torchLight = new THREE.PointLight(0xff4400, 2, 15);
+                torchLight.position.set(pos[0], pos[1] + 1, pos[2]);
+                scene.add(torchLight);
+                pointLights.push(torchLight);
+                const flameGeometry = new THREE.ConeGeometry(0.15, 0.4, 8);
+                const flameMaterial = new THREE.MeshBasicMaterial({
+                    color: 0xff6600,
+                    transparent: true,
+                    opacity: 0.8
+                });
+                const flame = new THREE.Mesh(flameGeometry, flameMaterial);
+                flame.position.set(pos[0], pos[1] + 1.2, pos[2]);
+                scene.add(flame);
+            });
+        }
+        function createLighting() {
+            const ambientLight = new THREE.AmbientLight(0x201010, 0.3);
+            scene.add(ambientLight);
+            const mainLight = new THREE.DirectionalLight(0xff6644, 0.4);
+            mainLight.position.set(10, 20, 10);
+            mainLight.castShadow = true;
+            mainLight.shadow.mapSize.width = 2048;
+            mainLight.shadow.mapSize.height = 2048;
+            mainLight.shadow.camera.near = 0.5;
+            mainLight.shadow.camera.far = 50;
+            mainLight.shadow.camera.left = -30;
+            mainLight.shadow.camera.right = 30;
+            mainLight.shadow.camera.top = 30;
+            mainLight.shadow.camera.bottom = -30;
+            mainLight.shadow.bias = -0.0001;
+            scene.add(mainLight);
+            const hemisphereLight = new THREE.HemisphereLight(0x443322, 0x111111, 0.3);
+            scene.add(hemisphereLight);
+        }
+        function createAmbientParticles() {
+            const particleCount = 200;
+            const geometry = new THREE.BufferGeometry();
+            const positions = new Float32Array(particleCount * 3);
+            for (let i = 0; i < particleCount * 3; i += 3) {
+                positions[i] = (Math.random() - 0.5) * 100;
+                positions[i + 1] = Math.random() * 5;
+                positions[i + 2] = (Math.random() - 0.5) * 100;
+            }
+            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            const material = new THREE.PointsMaterial({
+                color: 0xff3300,
+                size: 0.05,
+                transparent: true,
+                opacity: 0.6,
+                blending: THREE.AdditiveBlending
+            });
+            const particleSystem = new THREE.Points(geometry, material);
+            scene.add(particleSystem);
+            ambientParticles.push(particleSystem);
+        }
+        function setupMinimap() {
+            const canvas = document.getElementById('minimapCanvas');
+            canvas.width = 150;
+            canvas.height = 150;
+            minimapCtx = canvas.getContext('2d');
+        }
+        function updateMinimap() {
+            if (!minimapCtx) return;
+            minimapCtx.fillStyle = 'rgba(0, 0, 0, 0.8)';
+            minimapCtx.fillRect(0, 0, 150, 150);
+            minimapCtx.strokeStyle = '#330000';
+            minimapCtx.lineWidth = 1;
+            minimapCtx.strokeRect(0, 0, 150, 150);
+            const scale = 1.5;
+            const offsetX = 75 - player.position.x * scale;
+            const offsetZ = 75 - player.position.z * scale;
+            minimapCtx.fillStyle = '#00ff00';
+            minimapCtx.beginPath();
+            minimapCtx.arc(75, 75, 4, 0, Math.PI * 2);
+            minimapCtx.fill();
+            minimapCtx.strokeStyle = '#00ff00';
+            minimapCtx.beginPath();
+            minimapCtx.moveTo(75, 75);
+            const angle = player.rotation.y;
+            minimapCtx.lineTo(75 - Math.sin(angle) * 10, 75 - Math.cos(angle) * 10);
+            minimapCtx.stroke();
+            enemies.forEach(enemy => {
+                const ex = enemy.mesh.position.x * scale + offsetX;
+                const ez = enemy.mesh.position.z * scale + offsetZ;
+                if (ex >= 0 && ex <= 150 && ez >= 0 && ez <= 150) {
+                    minimapCtx.fillStyle = '#ff0000';
+                    minimapCtx.beginPath();
+                    minimapCtx.arc(ex, ez, 3, 0, Math.PI * 2);
+                    minimapCtx.fill();
+                }
             });
         }
+        function setupControls() {
             if (!isMobile) {
+                document.addEventListener('keydown', onKeyDown);
+                document.addEventListener('keyup', onKeyUp);
+                document.addEventListener('mousedown', onMouseDown);
+                document.addEventListener('mouseup', onMouseUp);
+                document.addEventListener('mousemove', onMouseMove);
+                document.addEventListener('click', () => {
+                    if (gameActive && !isPointerLocked) {
+                        renderer.domElement.requestPointerLock();
+                    }
+                });
+                document.addEventListener('pointerlockchange', () => {
+                    isPointerLocked = document.pointerLockElement === renderer.domElement;
+                });
+            } else {
+                setupMobileControls();
             }
         }
+        function setupMobileControls() {
+            const moveJoystick = document.getElementById('moveJoystick');
+            const moveStick = document.getElementById('moveStick');
+            const lookJoystick = document.getElementById('lookJoystick');
+            const lookStick = document.getElementById('lookStick');
+            const shootButton = document.getElementById('shootButton');
+            const reloadButton = document.getElementById('reloadButton');
+            let moveTouchId = null;
+            let lookTouchId = null;
+            moveJoystick.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                const touch = e.changedTouches[0];
+                moveTouchId = touch.identifier;
+                moveJoystickData.active = true;
+                updateJoystick(touch, moveJoystick, moveStick, moveJoystickData);
             });
+            moveJoystick.addEventListener('touchmove', (e) => {
+                e.preventDefault();
+                for (let touch of e.changedTouches) {
+                    if (touch.identifier === moveTouchId) {
+                        updateJoystick(touch, moveJoystick, moveStick, moveJoystickData);
+                    }
+                }
             });
+            moveJoystick.addEventListener('touchend', (e) => {
+                for (let touch of e.changedTouches) {
+                    if (touch.identifier === moveTouchId) {
+                        moveTouchId = null;
+                        moveJoystickData.active = false;
+                        moveJoystickData.x = 0;
+                        moveJoystickData.y = 0;
+                        moveStick.style.transform = 'translate(-50%, -50%)';
+                        moveForward = moveBackward = moveLeft = moveRight = false;
+                    }
+                }
+            });
+            lookJoystick.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                const touch = e.changedTouches[0];
+                lookTouchId = touch.identifier;
+                lookJoystickData.active = true;
+                lookJoystickData.lastX = touch.clientX;
+                lookJoystickData.lastY = touch.clientY;
+            });
+            lookJoystick.addEventListener('touchmove', (e) => {
+                e.preventDefault();
+                for (let touch of e.changedTouches) {
+                    if (touch.identifier === lookTouchId) {
+                        const deltaX = touch.clientX - lookJoystickData.lastX;
+                        const deltaY = touch.clientY - lookJoystickData.lastY;
+                        lookJoystickData.x = deltaX * 0.01;
+                        lookJoystickData.y = deltaY * 0.01;
+                        lookJoystickData.lastX = touch.clientX;
+                        lookJoystickData.lastY = touch.clientY;
+                        const rect = lookJoystick.getBoundingClientRect();
+                        const centerX = rect.left + rect.width / 2;
+                        const centerY = rect.top + rect.height / 2;
+                        let dx = touch.clientX - centerX;
+                        let dy = touch.clientY - centerY;
+                        const dist = Math.sqrt(dx * dx + dy * dy);
+                        const maxDist = 45;
+                        if (dist > maxDist) {
+                            dx = dx * maxDist / dist;
+                            dy = dy * maxDist / dist;
+                        }
+                        lookStick.style.transform = `translate(calc(-50% + ${dx}px), calc(-50% + ${dy}px))`;
+                    }
+                }
+            });
+            lookJoystick.addEventListener('touchend', (e) => {
+                for (let touch of e.changedTouches) {
+                    if (touch.identifier === lookTouchId) {
+                        lookTouchId = null;
+                        lookJoystickData.active = false;
+                        lookJoystickData.x = 0;
+                        lookJoystickData.y = 0;
+                        lookStick.style.transform = 'translate(-50%, -50%)';
+                    }
+                }
+            });
+            shootButton.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                if (gameActive) shoot();
+            });
+            reloadButton.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                if (gameActive) reload();
+            });
+            function updateJoystick(touch, container, stick, data) {
+                const rect = container.getBoundingClientRect();
+                const centerX = rect.left + rect.width / 2;
+                const centerY = rect.top + rect.height / 2;
+                let dx = touch.clientX - centerX;
+                let dy = touch.clientY - centerY;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                const maxDist = 45;
+                if (dist > maxDist) {
+                    dx = dx * maxDist / dist;
+                    dy = dy * maxDist / dist;
+                }
+                data.x = dx / maxDist;
+                data.y = dy / maxDist;
+                stick.style.transform = `translate(calc(-50% + ${dx}px), calc(-50% + ${dy}px))`;
+                const threshold = 0.3;
+                moveForward = data.y < -threshold;
+                moveBackward = data.y > threshold;
+                moveLeft = data.x < -threshold;
+                moveRight = data.x > threshold;
             }
         }
+        function onKeyDown(e) {
+            if (!gameActive) return;
+            switch (e.code) {
+                case 'KeyW': case 'ArrowUp': moveForward = true; break;
+                case 'KeyS': case 'ArrowDown': moveBackward = true; break;
+                case 'KeyA': case 'ArrowLeft': moveLeft = true; break;
+                case 'KeyD': case 'ArrowRight': moveRight = true; break;
+                case 'KeyR': reload(); break;
             }
         }
+        function onKeyUp(e) {
+            switch (e.code) {
+                case 'KeyW': case 'ArrowUp': moveForward = false; break;
+                case 'KeyS': case 'ArrowDown': moveBackward = false; break;
+                case 'KeyA': case 'ArrowLeft': moveLeft = false; break;
+                case 'KeyD': case 'ArrowRight': moveRight = false; break;
             }
         }
+        function onMouseDown(e) {
+            if (e.button === 0 && gameActive && isPointerLocked) shoot();
         }
+        function onMouseUp(e) {}
+        function onMouseMove(e) {
+            if (!gameActive || !isPointerLocked) return;
+            mouseMovement.x = e.movementX || 0;
+            mouseMovement.y = e.movementY || 0;
         }
         function shoot() {
+            if (!canShoot || ammo <= 0 || isReloading) return;
             ammo--;
             updateUI();
+            canShoot = false;
+            setTimeout(() => canShoot = true, shotCooldown);
+            weaponRecoil = 0.3;
+            screenShake.intensity = 0.05;
+            const bulletGeometry = new THREE.SphereGeometry(0.08, 8, 8);
+            const bulletMaterial = new THREE.MeshBasicMaterial({
+                color: 0xffff00,
+                emissive: 0xffaa00
+            });
             const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
+            const bulletPos = new THREE.Vector3();
+            camera.getWorldPosition(bulletPos);
+            bullet.position.copy(bulletPos);
             const direction = new THREE.Vector3(0, 0, -1);
             direction.applyQuaternion(camera.quaternion);
+            const spread = 0.02;
+            direction.x += (Math.random() - 0.5) * spread;
+            direction.y += (Math.random() - 0.5) * spread;
+            direction.normalize();
             scene.add(bullet);
+            const bulletLight = new THREE.PointLight(0xffff00, 1, 5);
+            bullet.add(bulletLight);
             bullets.push({
                 mesh: bullet,
                 direction: direction,
+                speed: 2,
                 distance: 0
             });
+            createMuzzleFlash();
+            createShellCasing();
+            if (ammo === 0 && reserveAmmo > 0) {
+                setTimeout(reload, 500);
+            }
         }
+        function createMuzzleFlash() {
+            const flashGeometry = new THREE.SphereGeometry(0.3, 8, 8);
+            const flashMaterial = new THREE.MeshBasicMaterial({
+                color: 0xffaa00,
+                transparent: true,
+                opacity: 1
             });
+            const flash = new THREE.Mesh(flashGeometry, flashMaterial);
+            const pos = new THREE.Vector3(0, -0.1, -1);
+            pos.applyQuaternion(camera.quaternion);
+            camera.getWorldPosition(flash.position);
+            flash.position.add(pos);
+            scene.add(flash);
+            const flashLight = new THREE.PointLight(0xffaa00, 3, 10);
+            flash.add(flashLight);
+            let opacity = 1;
+            const fadeFlash = () => {
+                opacity -= 0.2;
+                flashMaterial.opacity = opacity;
+                flashLight.intensity = opacity * 3;
+                if (opacity > 0) {
+                    requestAnimationFrame(fadeFlash);
+                } else {
+                    scene.remove(flash);
+                }
+            };
+            fadeFlash();
+        }
+        function createShellCasing() {
+            const shellGeometry = new THREE.CylinderGeometry(0.02, 0.02, 0.1, 8);
+            const shellMaterial = new THREE.MeshStandardMaterial({ color: 0xccaa00 });
+            const shell = new THREE.Mesh(shellGeometry, shellMaterial);
+            const pos = new THREE.Vector3(0.3, -0.2, -0.5);
+            pos.applyQuaternion(camera.quaternion);
+            camera.getWorldPosition(shell.position);
+            shell.position.add(pos);
+            scene.add(shell);
+            const velocity = new THREE.Vector3(
+                (Math.random() - 0.3) * 0.1,
+                0.1,
+                (Math.random() - 0.5) * 0.05
+            );
+            velocity.applyQuaternion(camera.quaternion);
+            const animate = () => {
+                velocity.y -= 0.005;
+                shell.position.add(velocity);
+                shell.rotation.x += 0.2;
+                shell.rotation.z += 0.1;
+                if (shell.position.y > 0) {
+                    requestAnimationFrame(animate);
+                } else {
+                    setTimeout(() => scene.remove(shell), 3000);
                 }
+            };
+            animate();
+        }
+        function reload() {
+            if (isReloading || ammo === maxAmmo || reserveAmmo <= 0) return;
+            isReloading = true;
+            setTimeout(() => {
+                const needed = maxAmmo - ammo;
+                const toReload = Math.min(needed, reserveAmmo);
+                ammo += toReload;
+                reserveAmmo -= toReload;
+                isReloading = false;
+                updateUI();
+            }, 1500);
+        }
+        function createDemon() {
+            const demon = new THREE.Group();
+            const bodyGeometry = new THREE.SphereGeometry(0.7, 16, 16);
+            const bodyMaterial = new THREE.MeshStandardMaterial({
+                color: 0x660000,
+                roughness: 0.6,
+                metalness: 0.2,
+                emissive: 0x220000
             });
+            const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+            body.position.y = 1.2;
+            body.castShadow = true;
+            demon.add(body);
+            const headGeometry = new THREE.SphereGeometry(0.5, 16, 16);
+            const headMaterial = new THREE.MeshStandardMaterial({
+                color: 0x880000,
+                roughness: 0.5,
+                metalness: 0.3,
+                emissive: 0x330000
             });
+            const head = new THREE.Mesh(headGeometry, headMaterial);
+            head.position.y = 2;
+            head.castShadow = true;
+            demon.add(head);
+            const hornGeometry = new THREE.ConeGeometry(0.08, 0.6, 8);
+            const hornMaterial = new THREE.MeshStandardMaterial({
+                color: 0x222222,
+                roughness: 0.3,
+                metalness: 0.7
             });
+            const horn1 = new THREE.Mesh(hornGeometry, hornMaterial);
+            horn1.position.set(-0.25, 2.4, 0);
+            horn1.rotation.z = 0.3;
+            demon.add(horn1);
+            const horn2 = new THREE.Mesh(hornGeometry, hornMaterial);
+            horn2.position.set(0.25, 2.4, 0);
+            horn2.rotation.z = -0.3;
+            demon.add(horn2);
+            const eyeGeometry = new THREE.SphereGeometry(0.1, 8, 8);
+            const eyeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
+            const eye1 = new THREE.Mesh(eyeGeometry, eyeMaterial);
+            eye1.position.set(-0.2, 2.1, 0.4);
+            demon.add(eye1);
+            const eye2 = new THREE.Mesh(eyeGeometry, eyeMaterial);
+            eye2.position.set(0.2, 2.1, 0.4);
+            demon.add(eye2);
+            const eyeLight = new THREE.PointLight(0xffff00, 0.5, 3);
+            eyeLight.position.set(0, 2.1, 0.5);
+            demon.add(eyeLight);
+            const armGeometry = new THREE.CylinderGeometry(0.1, 0.15, 0.8, 8);
+            const armMaterial = new THREE.MeshStandardMaterial({ color: 0x550000 });
+            const arm1 = new THREE.Mesh(armGeometry, armMaterial);
+            arm1.position.set(-0.8, 1.2, 0);
+            arm1.rotation.z = Math.PI / 4;
+            demon.add(arm1);
+            const arm2 = new THREE.Mesh(armGeometry, armMaterial);
+            arm2.position.set(0.8, 1.2, 0);
+            arm2.rotation.z = -Math.PI / 4;
+            demon.add(arm2);
+            const clawGeometry = new THREE.ConeGeometry(0.08, 0.3, 6);
+            const clawMaterial = new THREE.MeshStandardMaterial({ color: 0x111111 });
+            for (let i = 0; i < 3; i++) {
+                const claw1 = new THREE.Mesh(clawGeometry, clawMaterial);
+                claw1.position.set(-1.1 + i * 0.1, 0.9, 0);
+                claw1.rotation.z = Math.PI;
+                demon.add(claw1);
+                const claw2 = new THREE.Mesh(clawGeometry, clawMaterial);
+                claw2.position.set(1.1 - i * 0.1, 0.9, 0);
+                claw2.rotation.z = Math.PI;
+                demon.add(claw2);
+            }
+            const legGeometry = new THREE.CylinderGeometry(0.15, 0.1, 0.8, 8);
+            const leg1 = new THREE.Mesh(legGeometry, armMaterial);
+            leg1.position.set(-0.3, 0.4, 0);
+            demon.add(leg1);
+            const leg2 = new THREE.Mesh(legGeometry, armMaterial);
+            leg2.position.set(0.3, 0.4, 0);
+            demon.add(leg2);
+            return demon;
+        }
+        function spawnEnemy() {
+            const demon = createDemon();
+            let x, z;
+            do {
+                const angle = Math.random() * Math.PI * 2;
+                const dist = 20 + Math.random() * 25;
+                x = player.position.x + Math.cos(angle) * dist;
+                z = player.position.z + Math.sin(angle) * dist;
+            } while (Math.abs(x) > 45 || Math.abs(z) > 45);
+            demon.position.set(x, 0, z);
+            scene.add(demon);
+            const baseSpeed = 0.03 + wave * 0.005;
+            const baseHealth = 80 + wave * 20;
+            enemies.push({
+                mesh: demon,
+                health: baseHealth,
+                maxHealth: baseHealth,
+                speed: baseSpeed + Math.random() * 0.02,
+                lastAttack: 0,
+                attackCooldown: 800 + Math.random() * 400,
+                damage: 8 + wave * 2,
+                animTime: Math.random() * Math.PI * 2
+            });
+        }
+        function createBloodParticles(position, count = 20) {
+            for (let i = 0; i < count; i++) {
+                const geometry = new THREE.SphereGeometry(0.05 + Math.random() * 0.1, 6, 6);
+                const material = new THREE.MeshBasicMaterial({
+                    color: new THREE.Color(0.5 + Math.random() * 0.3, 0, 0),
+                    transparent: true,
+                    opacity: 1
+                });
+                const particle = new THREE.Mesh(geometry, material);
+                particle.position.copy(position);
+                particle.position.y += 1 + Math.random();
+                scene.add(particle);
+                const velocity = new THREE.Vector3(
+                    (Math.random() - 0.5) * 0.2,
+                    Math.random() * 0.15,
+                    (Math.random() - 0.5) * 0.2
+                );
+                particles.push({
+                    mesh: particle,
+                    velocity: velocity,
+                    life: 1,
+                    decay: 0.02 + Math.random() * 0.02
+                });
+            }
+        }
+        function createExplosion(position) {
+            for (let i = 0; i < 30; i++) {
+                const geometry = new THREE.SphereGeometry(0.1 + Math.random() * 0.2, 6, 6);
+                const material = new THREE.MeshBasicMaterial({
+                    color: new THREE.Color(1, Math.random() * 0.5, 0),
+                    transparent: true,
+                    opacity: 1
+                });
+                const particle = new THREE.Mesh(geometry, material);
+                particle.position.copy(position);
+                particle.position.y += 1;
+                scene.add(particle);
+                const velocity = new THREE.Vector3(
+                    (Math.random() - 0.5) * 0.3,
+                    Math.random() * 0.2,
+                    (Math.random() - 0.5) * 0.3
+                );
+                particles.push({
+                    mesh: particle,
+                    velocity: velocity,
+                    life: 1,
+                    decay: 0.03
+                });
             }
+            const explosionLight = new THREE.PointLight(0xff6600, 5, 20);
+            explosionLight.position.copy(position);
+            explosionLight.position.y += 1;
+            scene.add(explosionLight);
+            let intensity = 5;
+            const fadeLight = () => {
+                intensity -= 0.3;
+                explosionLight.intensity = intensity;
+                if (intensity > 0) {
+                    requestAnimationFrame(fadeLight);
+                } else {
+                    scene.remove(explosionLight);
+                }
+            };
+            fadeLight();
         }
+        function startGame() {
+            document.getElementById('startScreen').style.display = 'none';
+            gameActive = true;
+            if (!isMobile) {
+                renderer.domElement.requestPointerLock();
+            }
+            for (let i = 0; i < 5 + wave; i++) {
+                setTimeout(() => spawnEnemy(), i * 500);
+            }
+        }
+        function restartGame() {
+            document.getElementById('gameOverScreen').style.display = 'none';
+            playerHealth = 100;
+            playerArmor = 50;
+            ammo = maxAmmo;
+            reserveAmmo = 120;
+            score = 0;
+            kills = 0;
+            wave = 1;
+            enemies.forEach(e => scene.remove(e.mesh));
+            enemies = [];
+            bullets.forEach(b => scene.remove(b.mesh));
+            bullets = [];
+            particles.forEach(p => scene.remove(p.mesh));
+            particles = [];
+            player.position.set(0, 1.7, 0);
+            player.rotation.set(0, 0, 0);
+            camera.rotation.set(0, 0, 0);
+            updateUI();
+            if (!isMobile) {
+                renderer.domElement.requestPointerLock();
+            }
+            gameActive = true;
+            for (let i = 0; i < 5; i++) {
+                setTimeout(() => spawnEnemy(), i * 500);
+            }
+        }
+        function gameOver() {
+            gameActive = false;
+            if (document.pointerLockElement) {
+                document.exitPointerLock();
+            }
+            document.getElementById('finalScoreValue').textContent = score;
+            document.getElementById('finalKillValue').textContent = kills;
+            document.getElementById('gameOverScreen').style.display = 'flex';
+        }
+        function updateUI() {
+            document.getElementById('healthFill').style.width = `${playerHealth}%`;
+            document.getElementById('armorFill').style.width = `${playerArmor}%`;
+            document.getElementById('ammoValue').textContent = ammo;
+            document.getElementById('ammoMax').textContent = reserveAmmo;
+            document.getElementById('scoreValue').textContent = score;
+            document.getElementById('killValue').textContent = kills;
+            document.getElementById('waveValue').textContent = wave;
+            const damageVignette = document.getElementById('damageVignette');
+            damageVignette.style.opacity = Math.max(0, (50 - playerHealth) / 50) * 0.8;
+        }
+        function checkCollision(newPos) {
+            for (const obj of collisionObjects) {
+                if (obj.radius) {
+                    const dist = newPos.distanceTo(obj.position);
+                    if (dist < obj.radius + 0.5) return true;
+                }
+            }
+            if (Math.abs(newPos.x) > 48 || Math.abs(newPos.z) > 48) return true;
+            return false;
         }
         function animate() {
             const delta = clock.getDelta();
             if (gameActive) {
+                if (!isMobile && isPointerLocked) {
+                    player.rotation.y -= mouseMovement.x * 0.002;
+                    camera.rotation.x -= mouseMovement.y * 0.002;
+                    camera.rotation.x = Math.max(-Math.PI / 2 + 0.1, Math.min(Math.PI / 2 - 0.1, camera.rotation.x));
+                    mouseMovement.x = 0;
+                    mouseMovement.y = 0;
                 }
+                if (isMobile && lookJoystickData.active) {
+                    player.rotation.y -= lookJoystickData.x * 2;
+                    camera.rotation.x -= lookJoystickData.y * 2;
+                    camera.rotation.x = Math.max(-Math.PI / 2 + 0.1, Math.min(Math.PI / 2 - 0.1, camera.rotation.x));
+                    lookJoystickData.x *= 0.5;
+                    lookJoystickData.y *= 0.5;
+                }
+                const speed = 0.15;
+                const direction = new THREE.Vector3();
+                if (moveForward) direction.z -= 1;
+                if (moveBackward) direction.z += 1;
+                if (moveLeft) direction.x -= 1;
+                if (moveRight) direction.x += 1;
+                if (direction.length() > 0) {
+                    direction.normalize();
+                    direction.applyAxisAngle(new THREE.Vector3(0, 1, 0), player.rotation.y);
+                    const newPos = player.position.clone();
+                    newPos.add(direction.multiplyScalar(speed));
+                    if (!checkCollision(newPos)) {
+                        player.position.copy(newPos);
                     }
+                    weaponBob += delta * 10;
+                }
                 for (let i = bullets.length - 1; i >= 0; i--) {
                     const bullet = bullets[i];
                     bullet.mesh.position.add(bullet.direction.clone().multiplyScalar(bullet.speed));
                     bullet.distance += bullet.speed;
+                    if (bullet.distance > 100) {
                         scene.remove(bullet.mesh);
                         bullets.splice(i, 1);
                         continue;
                     }
                     for (let j = enemies.length - 1; j >= 0; j--) {
                         const enemy = enemies[j];
+                        const dist = bullet.mesh.position.distanceTo(enemy.mesh.position.clone().add(new THREE.Vector3(0, 1.2, 0)));
+                        if (dist < 1.2) {
+                            const damage = 25 + Math.random() * 15;
+                            enemy.health -= damage;
                             scene.remove(bullet.mesh);
                             bullets.splice(i, 1);
+                            createBloodParticles(enemy.mesh.position);
+                            if (enemy.health <= 0) {
+                                createExplosion(enemy.mesh.position);
+                                scene.remove(enemy.mesh);
+                                enemies.splice(j, 1);
+                                score += 100 * wave;
+                                kills++;
+                                updateUI();
+                                if (Math.random() < 0.3) {
+                                    playerHealth = Math.min(100, playerHealth + 10);
+                                }
+                                if (Math.random() < 0.2) {
+                                    playerArmor = Math.min(100, playerArmor + 15);
+                                }
+                                if (Math.random() < 0.1) {
+                                    reserveAmmo = Math.min(999, reserveAmmo + 30);
+                                }
+                                updateUI();
+                            }
                             break;
                         }
                     }
                 }
+                enemies.forEach((enemy, index) => {
+                    enemy.animTime += delta * 5;
+                    const targetPos = player.position.clone();
+                    const direction = targetPos.sub(enemy.mesh.position).normalize();
+                    enemy.mesh.position.add(direction.multiplyScalar(enemy.speed));
+                    enemy.mesh.lookAt(player.position.x, enemy.mesh.position.y, player.position.z);
+                    enemy.mesh.position.y = Math.sin(enemy.animTime) * 0.1;
+                    const dist = player.position.distanceTo(enemy.mesh.position);
+                    if (dist < 2 && Date.now() - enemy.lastAttack > enemy.attackCooldown) {
+                        enemy.lastAttack = Date.now();
+                        let damage = enemy.damage;
+                        if (playerArmor > 0) {
+                            const absorbed = Math.min(playerArmor, damage * 0.6);
+                            playerArmor -= absorbed;
+                            damage -= absorbed;
+                        }
+                        playerHealth -= damage;
+                        updateUI();
+                        screenShake.intensity = 0.1;
+                        const hitEffect = document.getElementById('hitEffect');
+                        hitEffect.style.opacity = '1';
+                        setTimeout(() => hitEffect.style.opacity = '0', 150);
+                        if (playerHealth <= 0) {
+                            gameOver();
+                        }
+                    }
+                });
+                for (let i = particles.length - 1; i >= 0; i--) {
+                    const p = particles[i];
+                    p.velocity.y -= 0.01;
+                    p.mesh.position.add(p.velocity);
+                    p.life -= p.decay;
+                    p.mesh.material.opacity = p.life;
+                    if (p.life <= 0 || p.mesh.position.y < 0) {
+                        scene.remove(p.mesh);
+                        particles.splice(i, 1);
+                    }
+                }
+                if (enemies.length < 3 + wave) {
+                    if (Math.random() < 0.02) {
+                        spawnEnemy();
+                    }
+                }
+                if (kills > 0 && kills % 10 === 0 && kills / 10 >= wave) {
+                    wave++;
+                    updateUI();
+                    for (let i = 0; i < 3; i++) {
+                        setTimeout(() => spawnEnemy(), i * 300);
+                    }
+                }
+                if (screenShake.intensity > 0) {
+                    cameraShakeOffset.set(
+                        (Math.random() - 0.5) * screenShake.intensity,
+                        (Math.random() - 0.5) * screenShake.intensity,
+                        0
+                    );
+                    camera.position.x = cameraShakeOffset.x;
+                    camera.position.z = cameraShakeOffset.z;
+                    screenShake.intensity *= screenShake.decay;
+                    if (screenShake.intensity < 0.001) {
+                        screenShake.intensity = 0;
+                        camera.position.x = 0;
+                        camera.position.z = 0;
+                    }
                 }
+                weaponRecoil *= 0.8;
+                pointLights.forEach((light, i) => {
+                    light.intensity = 1.5 + Math.sin(Date.now() * 0.01 + i) * 0.5;
+                });
+                ambientParticles.forEach(ps => {
+                    const positions = ps.geometry.attributes.position.array;
+                    for (let i = 1; i < positions.length; i += 3) {
+                        positions[i] += 0.01;
+                        if (positions[i] > 5) positions[i] = 0;
+                    }
+                    ps.geometry.attributes.position.needsUpdate = true;
+                });
+                updateMinimap();
             }
+            composer.render();
+        }
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            composer.setSize(window.innerWidth, window.innerHeight);
         }
+        init();
     </script>
 </body>
+</html>