Spaces:

Soda5601
/

zb

Running

App Files Files Community

Soda5601 commited on Aug 9, 2025

Commit

c673a50

verified ·

1 Parent(s): 88a14a4

make mobile friendly - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +637 -541

index.html CHANGED Viewed

@@ -3,632 +3,728 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Anti-Zombie Venter - Threat Department</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        @keyframes flicker {
-            0% { opacity: 1; }
-            25% { opacity: 0.8; }
-            50% { opacity: 0.6; }
-            75% { opacity: 0.8; }
-            100% { opacity: 1; }
         }
-        .flicker {
-            animation: flicker 2s infinite;
         }
-        .camera-feed {
-            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2048&q=80');
-            background-size: cover;
-            background-position: center;
-        }
-        .jumpscare {
-            position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background-color: black;
-            z-index: 100;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            opacity: 0;
             pointer-events: none;
-            transition: opacity 0.1s;
         }
-        .jumpscare img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
         }
-        .mutant-presence {
-            position: absolute;
-            transition: all 0.5s;
-            opacity: 0;
         }
-        .mutant-presence.visible {
-            opacity: 1;
         }
-        .power-bar {
-            transition: width 0.5s;
         }
-        .serum-progress {
-            transition: width 1s;
         }
-    </style>
-</head>
-<body class="bg-gray-900 text-white font-mono overflow-hidden">
-    <!-- Jumpscare Screen -->
-    <div class="jumpscare" id="jumpscare">
-        <img src="" alt="Jumpscare" id="jumpscare-image">
-    </div>
-    <!-- Main Game Container -->
-    <div class="container mx-auto px-4 py-8 relative" id="game-container">
-        <!-- Header -->
-        <header class="flex justify-between items-center mb-6 border-b border-red-700 pb-4">
-            <h1 class="text-3xl font-bold text-red-500 flicker">THREAT DEPARTMENT</h1>
-            <div class="text-right">
-                <p class="text-yellow-400">NIGHT <span id="night-number">1</span></p>
-                <p class="text-sm text-gray-400">Anti-Zombie Venter System</p>
-            </div>
-        </header>
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <!-- Camera Select Section -->
-            <div class="bg-gray-800 p-4 rounded-lg border border-gray-700">
-                <h2 class="text-xl font-bold text-red-400 mb-4 border-b border-gray-700 pb-2">CAM SELECT</h2>
-                <div class="grid grid-cols-2 gap-3">
-                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="1">CAM 1: Main Hall</button>
-                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="2">CAM 2: East Corridor</button>
-                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="3">CAM 3: West Corridor</button>
-                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="4">CAM 4: Storage Room</button>
-                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="5">CAM 5: Lab Entrance</button>
-                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="6">CAM 6: Ventilation</button>
-                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="7">CAM 7: Serum Storage</button>
-                    <button class="cam-btn bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm" data-cam="8">CAM 8: Office Hall</button>
-                </div>
-            </div>
-            <!-- Camera Feed Section -->
-            <div class="bg-gray-800 p-4 rounded-lg border border-gray-700 lg:col-span-2">
-                <div class="flex justify-between items-center mb-4 border-b border-gray-700 pb-2">
-                    <h2 class="text-xl font-bold text-red-400">CAM FEED</h2>
-                    <div class="text-sm text-yellow-400" id="current-cam">CAM 1: Main Hall</div>
-                </div>
-                <div class="camera-feed h-64 md:h-96 rounded-lg relative overflow-hidden" id="camera-feed">
-                    <!-- Mutants will appear here -->
-                    <div class="mutant-presence" id="mutant-1">
-                        <img src="https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317034_640.png" alt="Mutant 1" class="h-24 absolute bottom-0 right-4">
-                    </div>
-                    <div class="mutant-presence" id="mutant-2">
-                        <img src="https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317035_640.png" alt="Mutant 2" class="h-24 absolute bottom-0 left-4">
-                    </div>
-                    <div class="mutant-presence" id="mutant-3">
-                        <img src="https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317036_640.png" alt="Mutant 3" class="h-24 absolute bottom-0 right-10">
-                    </div>
-                    <div class="mutant-presence" id="mutant-4">
-                        <img src="https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317037_640.png" alt="Mutant 4" class="h-24 absolute bottom-0 left-10">
                     </div>
                 </div>
-                <div class="mt-4 flex justify-between items-center">
-                    <button class="bg-red-700 hover:bg-red-600 py-2 px-4 rounded flex items-center" id="serum-btn">
-                        <i class="fas fa-syringe mr-2"></i> DELIVER SERUM (<span id="serum-count">3</span>)
-                    </button>
-                    <div class="text-xs text-gray-400">Serum progress: <span id="serum-percent">0</span>%</div>
-                </div>
-                <div class="w-full bg-gray-700 h-2 mt-2 rounded">
-                    <div class="bg-green-500 h-2 rounded serum-progress" id="serum-progress" style="width: 0%"></div>
                 </div>
             </div>
-        </div>
-        <!-- Office Controls Section -->
-        <div class="mt-6 bg-gray-800 p-4 rounded-lg border border-gray-700">
-            <h2 class="text-xl font-bold text-red-400 mb-4 border-b border-gray-700 pb-2">OFFICE CONTROLS</h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div>
-                    <h3 class="text-lg font-bold text-yellow-400 mb-2">DOOR CONTROLS</h3>
-                    <div class="flex space-x-4">
-                        <div>
-                            <button class="door-btn bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded flex items-center mb-2" data-door="left">
-                                <i class="fas fa-door-closed mr-2" id="left-door-icon"></i> LEFT DOOR
-                            </button>
-                            <div class="text-xs text-center">Power: <span id="left-door-power">100</span>%</div>
-                        </div>
-                        <div>
-                            <button class="door-btn bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded flex items-center mb-2" data-door="right">
-                                <i class="fas fa-door-closed mr-2" id="right-door-icon"></i> RIGHT DOOR
-                            </button>
-                            <div class="text-xs text-center">Power: <span id="right-door-power">100</span>%</div>
-                        </div>
-                    </div>
                 </div>
-                <div>
-                    <h3 class="text-lg font-bold text-yellow-400 mb-2">VENT CONTROLS</h3>
-                    <div class="flex space-x-4">
-                        <div>
-                            <button class="vent-btn bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded flex items-center mb-2" data-vent="left">
-                                <i class="fas fa-fan mr-2" id="left-vent-icon"></i> LEFT VENT
-                            </button>
-                            <div class="text-xs text-center">Power: <span id="left-vent-power">100</span>%</div>
-                        </div>
-                        <div>
-                            <button class="vent-btn bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded flex items-center mb-2" data-vent="right">
-                                <i class="fas fa-fan mr-2" id="right-vent-icon"></i> RIGHT VENT
-                            </button>
-                            <div class="text-xs text-center">Power: <span id="right-vent-power">100</span>%</div>
-                        </div>
-                    </div>
                 </div>
-                <div>
-                    <h3 class="text-lg font-bold text-yellow-400 mb-2">SYSTEM STATUS</h3>
-                    <div class="mb-2">
-                        <div class="flex justify-between text-sm mb-1">
-                            <span>POWER</span>
-                            <span id="power-percent">100%</span>
-                        </div>
-                        <div class="w-full bg-gray-700 h-4 rounded">
-                            <div class="bg-blue-500 h-4 rounded power-bar" id="power-bar" style="width: 100%"></div>
-                        </div>
-                    </div>
-                    <div class="text-sm">
-                        <div class="flex justify-between">
-                            <span>Time:</span>
-                            <span id="game-time">12:00 AM</span>
-                        </div>
-                        <div class="flex justify-between">
-                            <span>Serum:</span>
-                            <span id="serum-status">Ready</span>
-                        </div>
-                        <div class="flex justify-between">
-                            <span>Threat Level:</span>
-                            <span id="threat-level">Low</span>
-                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <!-- Audio elements -->
-        <audio id="camera-sound" src="https://www.soundjay.com/mechanical/sounds/camera-shutter-click-01.mp3" preload="auto"></audio>
-        <audio id="door-sound" src="https://www.soundjay.com/mechanical/sounds/door-creak-1.mp3" preload="auto"></audio>
-        <audio id="vent-sound" src="https://www.soundjay.com/mechanical/sounds/fan-01.mp3" preload="auto"></audio>
-        <audio id="serum-sound" src="https://www.soundjay.com/mechanical/sounds/beep-07.mp3" preload="auto"></audio>
-        <audio id="jumpscare-sound" src="https://www.soundjay.com/human/sounds/scream-06.mp3" preload="auto"></audio>
-        <audio id="static-sound" src="https://www.soundjay.com/communication/sounds/radio-static-1.mp3" preload="auto" loop></audio>
     </div>
     <script>
-        // Game State
-        const gameState = {
-            currentCam: 1,
-            power: 100,
-            leftDoor: true,
-            rightDoor: true,
-            leftVent: false,
-            rightVent: false,
-            serumCount: 3,
-            serumProgress: 0,
-            night: 1,
-            time: 0, // 0-6 hours (0-360 minutes)
-            gameOver: false,
-            mutants: {
-                1: { name: "Necro", location: 8, aggression: 1, fakeMoves: 0 },
-                2: { name: "Venom", location: 8, aggression: 2, fakeMoves: 0 },
-                3: { name: "Fester", location: 8, aggression: 3, fakeMoves: 0 },
-                4: { name: "Rot", location: 8, aggression: 4, fakeMoves: 0 }
-            },
-            mutantLocations: {
-                1: "Main Hall",
-                2: "East Corridor",
-                3: "West Corridor",
-                4: "Storage Room",
-                5: "Lab Entrance",
-                6: "Ventilation",
-                7: "Serum Storage",
-                8: "Office Hall"
-            }
-        };
-        // DOM Elements
-        const elements = {
-            gameContainer: document.getElementById('game-container'),
-            jumpscare: document.getElementById('jumpscare'),
-            jumpscareImage: document.getElementById('jumpscare-image'),
-            currentCamDisplay: document.getElementById('current-cam'),
-            cameraFeed: document.getElementById('camera-feed'),
-            powerBar: document.getElementById('power-bar'),
-            powerPercent: document.getElementById('power-percent'),
-            leftDoorIcon: document.getElementById('left-door-icon'),
-            rightDoorIcon: document.getElementById('right-door-icon'),
-            leftVentIcon: document.getElementById('left-vent-icon'),
-            rightVentIcon: document.getElementById('right-vent-icon'),
-            leftDoorPower: document.getElementById('left-door-power'),
-            rightDoorPower: document.getElementById('right-door-power'),
-            leftVentPower: document.getElementById('left-vent-power'),
-            rightVentPower: document.getElementById('right-vent-power'),
-            serumCount: document.getElementById('serum-count'),
-            serumProgress: document.getElementById('serum-progress'),
-            serumPercent: document.getElementById('serum-percent'),
-            serumStatus: document.getElementById('serum-status'),
-            gameTime: document.getElementById('game-time'),
-            threatLevel: document.getElementById('threat-level'),
-            nightNumber: document.getElementById('night-number'),
-            // Audio elements
-            cameraSound: document.getElementById('camera-sound'),
-            doorSound: document.getElementById('door-sound'),
-            ventSound: document.getElementById('vent-sound'),
-            serumSound: document.getElementById('serum-sound'),
-            jumpscareSound: document.getElementById('jumpscare-sound'),
-            staticSound: document.getElementById('static-sound')
         };
-        // Initialize game
         function initGame() {
-            // Set up event listeners
-            document.querySelectorAll('.cam-btn').forEach(btn => {
-                btn.addEventListener('click', () => switchCamera(parseInt(btn.dataset.cam)));
             });
-            document.querySelectorAll('.door-btn').forEach(btn => {
-                btn.addEventListener('click', () => toggleDoor(btn.dataset.door));
             });
-            document.querySelectorAll('.vent-btn').forEach(btn => {
-                btn.addEventListener('click', () => toggleVent(btn.dataset.vent));
             });
-            document.getElementById('serum-btn').addEventListener('click', deliverSerum);
-            // Start game loop
-            setInterval(gameLoop, 1000);
-            setInterval(cameraStatic, 5000);
-            setInterval(updatePower, 30000);
         }
-        // Game loop
-        function gameLoop() {
-            if (gameState.gameOver) return;
-            // Update time
-            gameState.time += 1;
-            updateTimeDisplay();
-            // Check for mutants in office
-            checkForAttack();
-            // Update UI
-            updatePowerDisplay();
-            updateMutantVisibility();
-            updateThreatLevel();
         }
-        // Camera static effect
-        function cameraStatic() {
-            if (Math.random() < 0.3) { // 30% chance of static
-                elements.cameraFeed.style.backgroundImage = 'none';
-                elements.cameraFeed.style.backgroundColor = 'black';
-                elements.staticSound.currentTime = 0;
-                elements.staticSound.play();
-                setTimeout(() => {
-                    elements.cameraFeed.style.backgroundImage = 'linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("https://images.unsplash.com/photo-1518709268805-4e9042af9f23?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2048&q=80")';
-                }, 500);
             }
         }
-        // Switch camera view
-        function switchCamera(camNumber) {
-            if (gameState.gameOver) return;
-            gameState.currentCam = camNumber;
-            elements.currentCamDisplay.textContent = `CAM ${camNumber}: ${gameState.mutantLocations[camNumber]}`;
-            // Play camera sound
-            elements.cameraSound.currentTime = 0;
-            elements.cameraSound.play();
-            // Use a bit of power
-            gameState.power -= 0.2;
-            if (gameState.power < 0) gameState.power = 0;
-            updatePowerDisplay();
-        }
-        // Toggle door
-        function toggleDoor(doorSide) {
-            if (gameState.gameOver) return;
-            // Play door sound
-            elements.doorSound.currentTime = 0;
-            elements.doorSound.play();
-            if (doorSide === 'left') {
-                gameState.leftDoor = !gameState.leftDoor;
-                elements.leftDoorIcon.className = gameState.leftDoor ? 'fas fa-door-open mr-2' : 'fas fa-door-closed mr-2';
-            } else {
-                gameState.rightDoor = !gameState.rightDoor;
-                elements.rightDoorIcon.className = gameState.rightDoor ? 'fas fa-door-open mr-2' : 'fas fa-door-closed mr-2';
             }
-        }
-        // Toggle vent
-        function toggleVent(ventSide) {
-            if (gameState.gameOver) return;
-            // Play vent sound
-            elements.ventSound.currentTime = 0;
-            elements.ventSound.play();
-            if (ventSide === 'left') {
-                gameState.leftVent = !gameState.leftVent;
-                elements.leftVentIcon.className = gameState.leftVent ? 'fas fa-fan mr-2 text-green-500' : 'fas fa-fan mr-2';
-            } else {
-                gameState.rightVent = !gameState.rightVent;
-                elements.rightVentIcon.className = gameState.rightVent ? 'fas fa-fan mr-2 text-green-500' : 'fas fa-fan mr-2';
             }
         }
-        // Deliver serum
-        function deliverSerum() {
-            if (gameState.gameOver || gameState.serumCount <= 0 || gameState.serumProgress >= 100) return;
-            // Play serum sound
-            elements.serumSound.currentTime = 0;
-            elements.serumSound.play();
-            gameState.serumCount--;
-            gameState.serumProgress += 33;
-            if (gameState.serumProgress >= 99) {
-                gameState.serumProgress = 99;
-                elements.serumStatus.textContent = "Complete";
-                // Win condition
-                setTimeout(() => {
-                    alert(`Congratulations! You survived Night ${gameState.night}!`);
-                    gameState.night++;
-                    elements.nightNumber.textContent = gameState.night;
-                    resetNight();
-                }, 1000);
             }
-            updateSerumDisplay();
-        }
-        // Check for mutant attack
-        function checkForAttack() {
-            Object.keys(gameState.mutants).forEach(mutantId => {
-                const mutant = gameState.mutants[mutantId];
-                if (mutant.location === 8) { // Office Hall
-                    // Check if door is closed
-                    if ((mutantId % 2 === 0 && !gameState.rightDoor) || (mutantId % 2 !== 0 && !gameState.leftDoor)) {
-                        // Attack!
-                        triggerJumpscare(mutantId);
-                    }
-                }
-            });
         }
-        // Trigger jumpscare
-        function triggerJumpscare(mutantId) {
-            gameState.gameOver = true;
-            // Set jumpscare image based on mutant
-            const mutantImages = {
-                1: "https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317034_640.png",
-                2: "https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317035_640.png",
-                3: "https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317036_640.png",
-                4: "https://cdn.pixabay.com/photo/2023/10/15/11/03/zombie-8317037_640.png"
-            };
-            elements.jumpscareImage.src = mutantImages[mutantId];
-            // Play sounds
-            elements.jumpscareSound.currentTime = 0;
-            elements.jumpscareSound.play();
-            elements.staticSound.currentTime = 0;
-            elements.staticSound.play();
-            // Show jumpscare
-            elements.jumpscare.style.opacity = "1";
-            // Game over
-            setTimeout(() => {
-                alert(`Game Over! You were caught by ${gameState.mutants[mutantId].name} on Night ${gameState.night}.`);
-                resetNight();
-            }, 2000);
-        }
-        // Update power display
-        function updatePowerDisplay() {
-            elements.powerBar.style.width = `${gameState.power}%`;
-            elements.powerPercent.textContent = `${Math.floor(gameState.power)}%`;
-            // Low power effects
-            if (gameState.power < 20) {
-                elements.powerBar.classList.add('bg-red-500');
-                elements.powerBar.classList.remove('bg-blue-500');
-                // Random flickering
-                if (Math.random() < 0.3) {
-                    elements.gameContainer.classList.add('opacity-50');
-                    setTimeout(() => {
-                        elements.gameContainer.classList.remove('opacity-50');
-                    }, 200);
-                }
-            } else {
-                elements.powerBar.classList.remove('bg-red-500');
-                elements.powerBar.classList.add('bg-blue-500');
             }
-            // Power outage
-            if (gameState.power <= 0) {
-                gameState.power = 0;
-                triggerPowerOutage();
             }
         }
-        // Update time display
-        function updateTimeDisplay() {
-            const hours = Math.floor(gameState.time / 60);
-            const minutes = gameState.time % 60;
-            const ampm = hours >= 6 ? 'PM' : 'AM';
-            const displayHours = hours % 12 || 12;
-            elements.gameTime.textContent = `${displayHours}:${minutes < 10 ? '0' + minutes : minutes} ${ampm}`;
-            // Night completion
-            if (gameState.time >= 360) {
-                alert(`Congratulations! You survived Night ${gameState.night}!`);
-                gameState.night++;
-                elements.nightNumber.textContent = gameState.night;
-                resetNight();
             }
         }
-        // Update mutant visibility
-        function updateMutantVisibility() {
-            // Hide all mutants first
-            document.querySelectorAll('.mutant-presence').forEach(el => {
-                el.classList.remove('visible');
             });
-            // Show mutants in current camera view
-            Object.keys(gameState.mutants).forEach(mutantId => {
-                const mutant = gameState.mutants[mutantId];
-                if (mutant.location === gameState.currentCam) {
-                    const mutantEl = document.getElementById(`mutant-${mutantId}`);
-                    mutantEl.classList.add('visible');
-                    // Show fake movements
-                    if (mutant.fakeMoves > 0) {
-                        mutantEl.style.transform = `translateX(${Math.random() * 20 - 10}px)`;
                     }
                 }
             });
         }
-        // Update threat level
-        function updateThreatLevel() {
-            let threatScore = 0;
-            Object.keys(gameState.mutants).forEach(mutantId => {
-                const mutant = gameState.mutants[mutantId];
-                threatScore += mutant.location * mutant.aggression;
-            });
-            threatScore = threatScore / 10 + (gameState.time / 60);
-            if (threatScore < 5) {
-                elements.threatLevel.textContent = "Low";
-                elements.threatLevel.className = "text-green-500";
-            } else if (threatScore < 10) {
-                elements.threatLevel.textContent = "Medium";
-                elements.threatLevel.className = "text-yellow-500";
-            } else if (threatScore < 20) {
-                elements.threatLevel.textContent = "High";
-                elements.threatLevel.className = "text-orange-500";
-            } else {
-                elements.threatLevel.textContent = "Extreme";
-                elements.threatLevel.className = "text-red-500";
-            }
         }
-        // Update serum display
-        function updateSerumDisplay() {
-            elements.serumCount.textContent = gameState.serumCount;
-            elements.serumProgress.style.width = `${gameState.serumProgress}%`;
-            elements.serumPercent.textContent = Math.floor(gameState.serumProgress);
-            if (gameState.serumProgress >= 100) {
-                elements.serumStatus.textContent = "Complete";
-                elements.serumStatus.className = "text-green-500";
-            } else if (gameState.serumCount <= 0) {
-                elements.serumStatus.textContent = "Depleted";
-                elements.serumStatus.className = "text-red-500";
             } else {
-                elements.serumStatus.textContent = "Ready";
-                elements.serumStatus.className = "text-yellow-500";
             }
         }
-        // Update power consumption
-        function updatePower() {
-            // Base power drain
-            gameState.power -= 2;
-            // Base power drain only
-            if (gameState.power < 0) gameState.power = 0;
-            updatePowerDisplay();
         }
-        // Trigger power outage
-        function triggerPowerOutage() {
-            elements.staticSound.currentTime = 0;
-            elements.staticSound.play();
-            // Disable all systems
-            gameState.leftDoor = false;
-            gameState.rightDoor = false;
-            gameState.leftVent = false;
-            gameState.rightVent = false;
-            // Update UI
-            elements.leftDoorIcon.className = 'fas fa-door-open mr-2';
-            elements.rightDoorIcon.className = 'fas fa-door-open mr-2';
-            elements.leftVentIcon.className = 'fas fa-fan mr-2';
-            elements.rightVentIcon.className = 'fas fa-fan mr-2';
-            // Game over soon if mutants are nearby
-            setTimeout(() => {
-                if (!gameState.gameOver) {
-                    triggerJumpscare(Math.floor(Math.random() * 4) + 1);
-                }
-            }, 5000);
         }
-        // Reset for new night
-        function resetNight() {
-            gameState.power = 100;
-            gameState.leftDoor = false;
-            gameState.rightDoor = false;
-            gameState.leftVent = false;
-            gameState.rightVent = false;
-            gameState.serumCount = 3;
-            gameState.serumProgress = 0;
-            gameState.time = 0;
-            gameState.gameOver = false;
-            // Reset mutants
-            Object.keys(gameState.mutants).forEach(mutantId => {
-                gameState.mutants[mutantId].location = 1;
-                gameState.mutants[mutantId].fakeMoves = 0;
-            });
             // Reset UI
-            elements.jumpscare.style.opacity = "0";
-            elements.staticSound.pause();
-            elements.leftDoorIcon.className = 'fas fa-door-open mr-2';
-            elements.rightDoorIcon.className = 'fas fa-door-open mr-2';
-            elements.leftVentIcon.className = 'fas fa-fan mr-2';
-            elements.rightVentIcon.className = 'fas fa-fan mr-2';
-            elements.currentCamDisplay.textContent = 'CAM 1: Main Hall';
-            gameState.currentCam = 1;
-            updatePowerDisplay();
-            updateSerumDisplay();
-            updateTimeDisplay();
-            updateMutantVisibility();
         }
-        // Initialize game when page loads
-        window.onload = initGame;
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Soda5601/zb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FNAF: Slenderman's Forest</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Creepster&family=Press+Start+2P&display=swap');
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background-color: #000;
+            font-family: 'Press Start 2P', cursive;
         }
+        #game-container {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
         }
+        #ui-overlay {
+            position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             pointer-events: none;
+            z-index: 10;
         }
+        .creepy-font {
+            font-family: 'Creepster', cursive;
         }
+        .pulse {
+            animation: pulse 2s infinite;
         }
+        @keyframes pulse {
+            0% { opacity: 0.7; }
+            50% { opacity: 1; }
+            100% { opacity: 0.7; }
         }
+        .shake {
+            animation: shake 0.5s infinite;
         }
+        @keyframes shake {
+            0% { transform: translate(1px, 1px) rotate(0deg); }
+            10% { transform: translate(-1px, -2px) rotate(-1deg); }
+            20% { transform: translate(-3px, 0px) rotate(1deg); }
+            30% { transform: translate(3px, 2px) rotate(0deg); }
+            40% { transform: translate(1px, -1px) rotate(1deg); }
+            50% { transform: translate(-1px, 2px) rotate(-1deg); }
+            60% { transform: translate(-3px, 1px) rotate(0deg); }
+            70% { transform: translate(3px, 1px) rotate(-1deg); }
+            80% { transform: translate(-1px, -1px) rotate(1deg); }
+            90% { transform: translate(1px, 2px) rotate(0deg); }
+            100% { transform: translate(1px, -2px) rotate(-1deg); }
         }
+        /* Mobile controls */
+        #mobile-controls {
+            position: absolute;
+            bottom: 20px;
+            left: 0;
+            right: 0;
+            display: none;
+            justify-content: space-between;
+            padding: 0 20px;
+            z-index: 20;
+        }
+        .mobile-btn {
+            width: 60px;
+            height: 60px;
+            background-color: rgba(0, 0, 0, 0.5);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 24px;
+            user-select: none;
+            touch-action: manipulation;
+        }
+        #joystick {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            background-color: rgba(0, 0, 0, 0.3);
+            border-radius: 50%;
+            left: 30px;
+            bottom: 30px;
+            display: none;
+            z-index: 20;
+        }
+        #joystick-knob {
+            width: 40px;
+            height: 40px;
+            background-color: rgba(255, 255, 255, 0.7);
+            border-radius: 50%;
+            position: absolute;
+            top: 30px;
+            left: 30px;
+        }
+        @media (max-width: 768px) {
+            #mobile-controls {
+                display: flex;
+            }
+            #joystick {
+                display: block;
+            }
+            .text-sm {
+                font-size: 0.7rem;
+            }
+            #start-screen h1 {
+                font-size: 2rem;
+            }
+            #start-screen p {
+                font-size: 0.9rem;
+            }
+        }
+    </style>
+</head>
+<body class="bg-black text-white">
+    <div id="game-container">
+        <div id="ui-overlay" class="flex flex-col justify-between p-4">
+            <!-- Top UI -->
+            <div class="flex justify-between items-start">
+                <div class="bg-black bg-opacity-70 p-2 rounded-lg">
+                    <div class="text-red-500 text-sm">POWER: <span id="power-level">100</span>%</div>
+                    <div class="h-2 w-32 bg-gray-800 mt-1">
+                        <div id="power-bar" class="h-full bg-red-600" style="width: 100%;"></div>
                     </div>
                 </div>
+                <div class="bg-black bg-opacity-70 p-2 rounded-lg">
+                    <div class="text-yellow-400 text-sm">PAGES: <span id="pages-collected">0</span>/8</div>
                 </div>
             </div>
+            <!-- Center UI -->
+            <div class="flex flex-col items-center">
+                <div id="warning-message" class="bg-black bg-opacity-80 p-4 rounded-lg text-red-500 text-xl creepy-font pulse hidden">
+                    WARNING: HE IS NEAR!
                 </div>
+                <div id="game-over" class="bg-black bg-opacity-90 p-6 rounded-lg text-center max-w-md hidden">
+                    <h2 class="text-red-600 text-3xl mb-4 creepy-font shake">GAME OVER</h2>
+                    <p class="mb-4">Slenderman got you...</p>
+                    <button id="restart-btn" class="bg-red-700 hover:bg-red-600 text-white px-4 py-2 rounded-lg pointer-events-auto">
+                        TRY AGAIN
+                    </button>
                 </div>
+            </div>
+            <!-- Bottom UI -->
+            <div class="flex justify-center">
+                <div id="start-screen" class="bg-black bg-opacity-90 p-8 rounded-lg text-center max-w-md">
+                    <h1 class="text-4xl mb-6 text-red-600 creepy-font">FNAF: SLENDERMAN'S FOREST</h1>
+                    <p class="mb-6">Collect all 8 pages before Slenderman finds you!</p>
+                    <button id="start-btn" class="bg-green-700 hover:bg-green-600 text-white px-6 py-3 rounded-lg text-lg pointer-events-auto">
+                        START GAME
+                    </button>
+                    <div class="mt-4 text-xs text-gray-400">
+                        <p>Use WASD to move</p>
+                        <p>Hold SHIFT to run (consumes power)</p>
+                        <p>Look away when you see Slenderman!</p>
                     </div>
                 </div>
             </div>
+            <!-- Mobile Controls -->
+            <div id="mobile-controls">
+                <div class="mobile-btn" id="mobile-shift">RUN</div>
+                <div class="mobile-btn" id="mobile-look">LOOK</div>
+            </div>
+            <div id="joystick">
+                <div id="joystick-knob"></div>
+            </div>
+        </div>
     </div>
     <script>
+        // Game variables
+        let app;
+        let player;
+        let slenderman;
+        let pages = [];
+        let collectedPages = 0;
+        let power = 100;
+        let gameStarted = false;
+        let slendermanActive = false;
+        let slendermanVisible = false;
+        let slendermanDistance = 100;
+        let slendermanSpawnTimer = null;
+        let powerDrainTimer = null;
+        let gameOver = false;
+        // Load textures from online sources
+        const textures = {
+            player: "https://opengameart.org/sites/default/files/Green-Cap-Character-16x18.png",
+            slenderman: "https://opengameart.org/sites/default/files/slenderman.png",
+            page: "https://opengameart.org/sites/default/files/parchment_0.png",
+            forest1: "https://opengameart.org/sites/default/files/forest_background_0.png",
+            forest2: "https://opengameart.org/sites/default/files/forest_background2.png",
+            forest3: "https://opengameart.org/sites/default/files/forest_background3.png",
+            forest4: "https://opengameart.org/sites/default/files/forest_background4.png"
         };
+        // Initialize the game
         function initGame() {
+            // Setup mobile controls if needed
+            setupMobileControls();
+            // Create Pixi application
+            app = new PIXI.Application({
+                width: window.innerWidth,
+                height: window.innerHeight,
+                backgroundColor: 0x000000,
+                resolution: window.devicePixelRatio || 1,
+                autoDensity: true
             });
+            document.getElementById('game-container').appendChild(app.view);
+            // Setup viewport and scaling
+            window.addEventListener('resize', () => {
+                app.renderer.resize(window.innerWidth, window.innerHeight);
             });
+            // Load assets
+            PIXI.Assets.addBundle('gameAssets', {
+                player: textures.player,
+                slenderman: textures.slenderman,
+                page: textures.page,
+                forest1: textures.forest1,
+                forest2: textures.forest2,
+                forest3: textures.forest3,
+                forest4: textures.forest4
             });
+            PIXI.Assets.loadBundle('gameAssets').then(setupGame);
         }
+        // Setup game elements after assets are loaded
+        function setupGame(assets) {
+            // Create forest background (randomly select one)
+            const forestTextures = [
+                assets.forest1,
+                assets.forest2,
+                assets.forest3,
+                assets.forest4
+            ];
+            const bgTexture = forestTextures[Math.floor(Math.random() * forestTextures.length)];
+            const background = new PIXI.Sprite(bgTexture);
+            background.width = app.screen.width;
+            background.height = app.screen.height;
+            app.stage.addChild(background);
+            // Create player
+            player = new PIXI.Sprite(assets.player);
+            player.anchor.set(0.5);
+            player.width = 50;
+            player.height = 100;
+            player.x = app.screen.width / 2;
+            player.y = app.screen.height / 2;
+            app.stage.addChild(player);
+            // Create pages
+            createPages(assets.page);
+            // Setup keyboard controls
+            setupControls();
+            // Hide start screen
+            document.getElementById('start-screen').classList.add('hidden');
+            // Start game systems
+            startGameSystems();
         }
+        // Create collectible pages
+        function createPages(pageTexture) {
+            for (let i = 0; i < 8; i++) {
+                const page = new PIXI.Sprite(pageTexture);
+                page.anchor.set(0.5);
+                page.width = 30;
+                page.height = 40;
+                page.x = Math.random() * (app.screen.width - 100) + 50;
+                page.y = Math.random() * (app.screen.height - 100) + 50;
+                page.interactive = true;
+                page.buttonMode = true;
+                page.on('pointerdown', () => collectPage(page));
+                // Add glow effect
+                const glow = new PIXI.filters.GlowFilter({
+                    distance: 10,
+                    outerStrength: 2,
+                    innerStrength: 1,
+                    color: 0xffff00
+                });
+                page.filters = [glow];
+                app.stage.addChild(page);
+                pages.push(page);
             }
         }
+        // Collect a page
+        function collectPage(page) {
+            if (gameOver) return;
+            // Remove page from game
+            app.stage.removeChild(page);
+            pages = pages.filter(p => p !== page);
+            // Update UI
+            collectedPages++;
+            document.getElementById('pages-collected').textContent = collectedPages;
+            // Play sound
+            playSound('https://www.soundjay.com/buttons/sounds/button-09.mp3');
+            // Check win condition
+            if (collectedPages === 8) {
+                winGame();
             }
+            // Increase Slenderman spawn chance after collecting pages
+            if (slendermanSpawnTimer) {
+                clearTimeout(slendermanSpawnTimer);
             }
+            slendermanSpawnTimer = setTimeout(spawnSlenderman, 10000 - (collectedPages * 1000));
         }
+        // Spawn Slenderman
+        function spawnSlenderman(assets) {
+            if (gameOver || slendermanActive) return;
+            slendermanActive = true;
+            slendermanDistance = 100;
+            // Create Slenderman sprite if not exists
+            if (!slenderman) {
+                slenderman = new PIXI.Sprite(PIXI.Assets.get('slenderman'));
+                slenderman.anchor.set(0.5);
+                slenderman.width = 80;
+                slenderman.height = 200;
+                slenderman.visible = false;
+                slenderman.filters = [new PIXI.filters.AlphaFilter(0)];
+                app.stage.addChild(slenderman);
             }
+            // Position Slenderman randomly around player
+            const angle = Math.random() * Math.PI * 2;
+            const distance = 300 + Math.random() * 200;
+            slenderman.x = player.x + Math.cos(angle) * distance;
+            slenderman.y = player.y + Math.sin(angle) * distance;
+            // Start Slenderman behavior
+            updateSlenderman();
+            // Show warning
+            document.getElementById('warning-message').classList.remove('hidden');
+            playSound('https://www.soundjay.com/human/sounds/scream-03.mp3');
         }
+        // Update Slenderman position and behavior
+        function updateSlenderman() {
+            if (!slendermanActive || gameOver) return;
+            // Move closer to player
+            slendermanDistance -= 1;
+            // Calculate direction to player
+            const dx = player.x - slenderman.x;
+            const dy = player.y - slenderman.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            // Normalize direction
+            const dirX = dx / distance;
+            const dirY = dy / distance;
+            // Move Slenderman
+            slenderman.x += dirX * 2;
+            slenderman.y += dirY * 2;
+            // Make Slenderman visible if player is looking away
+            const playerAngle = player.rotation;
+            const angleToSlenderman = Math.atan2(dy, dx);
+            const angleDiff = Math.abs(playerAngle - angleToSlenderman);
+            slendermanVisible = angleDiff > Math.PI / 2;
+            slenderman.visible = slendermanVisible;
+            // Update alpha based on distance
+            const alpha = Math.min(1, 1.5 - (distance / 400));
+            slenderman.filters[0].alpha = alpha;
+            // Check if Slenderman caught the player
+            if (distance < 50 && slendermanVisible) {
+                endGame();
+                return;
             }
+            // Continue updating or despawn
+            if (distance > 800 || Math.random() < 0.01) {
+                despawnSlenderman();
+            } else {
+                requestAnimationFrame(updateSlenderman);
             }
         }
+        // Despawn Slenderman
+        function despawnSlenderman() {
+            slendermanActive = false;
+            if (slenderman) {
+                slenderman.visible = false;
+            }
+            document.getElementById('warning-message').classList.add('hidden');
+            // Schedule next spawn
+            if (!gameOver) {
+                slendermanSpawnTimer = setTimeout(spawnSlenderman, 15000 - (collectedPages * 1000));
             }
         }
+        // Setup keyboard controls
+        function setupControls() {
+            const keys = {
+                w: false,
+                a: false,
+                s: false,
+                d: false,
+                shift: false
+            };
+            // Key down event
+            window.addEventListener('keydown', (e) => {
+                if (gameOver || !gameStarted) return;
+                switch (e.key.toLowerCase()) {
+                    case 'w': keys.w = true; break;
+                    case 'a': keys.a = true; break;
+                    case 's': keys.s = true; break;
+                    case 'd': keys.d = true; break;
+                    case 'shift': keys.shift = true; break;
+                }
+            });
+            // Key up event
+            window.addEventListener('keyup', (e) => {
+                switch (e.key.toLowerCase()) {
+                    case 'w': keys.w = false; break;
+                    case 'a': keys.a = false; break;
+                    case 's': keys.s = false; break;
+                    case 'd': keys.d = false; break;
+                    case 'shift': keys.shift = false; break;
+                }
+            });
+            // Mouse movement for rotation
+            window.addEventListener('mousemove', (e) => {
+                if (gameOver || !gameStarted) return;
+                const rect = app.view.getBoundingClientRect();
+                const mouseX = e.clientX - rect.left;
+                const mouseY = e.clientY - rect.top;
+                const dx = mouseX - player.x;
+                const dy = mouseY - player.y;
+                player.rotation = Math.atan2(dy, dx);
             });
+            // Game loop for movement
+            app.ticker.add(() => {
+                if (gameOver || !gameStarted) return;
+                const currentKeys = isMobile ? mobileKeys : keys;
+                const speed = currentKeys.shift && power > 0 ? 5 : 2;
+                if (currentKeys.w) player.y -= speed;
+                if (currentKeys.a) player.x -= speed;
+                if (currentKeys.s) player.y += speed;
+                if (currentKeys.d) player.x += speed;
+                // Drain power when running
+                if (currentKeys.shift && (currentKeys.w || currentKeys.a || currentKeys.s || currentKeys.d)) {
+                    power = Math.max(0, power - 0.1);
+                    updatePowerUI();
+                    if (power === 0) {
+                        playSound('https://assets.mixkit.co/sfx/preview/mixkit-negative-interface-beep-218.mp3');
                     }
                 }
+                // Keep player in bounds
+                player.x = Math.max(20, Math.min(app.screen.width - 20, player.x));
+                player.y = Math.max(20, Math.min(app.screen.height - 20, player.y));
             });
         }
+        // Start game systems
+        function startGameSystems() {
+            gameStarted = true;
+            // Start power regeneration
+            powerDrainTimer = setInterval(() => {
+                if (power < 100 && !gameOver) {
+                    power = Math.min(100, power + 0.05);
+                    updatePowerUI();
+                }
+            }, 100);
+            // Initial Slenderman spawn
+            slendermanSpawnTimer = setTimeout(spawnSlenderman, 15000);
         }
+        // Update power UI
+        function updatePowerUI() {
+            document.getElementById('power-level').textContent = Math.floor(power);
+            document.getElementById('power-bar').style.width = `${power}%`;
+            if (power < 20) {
+                document.getElementById('power-bar').classList.add('bg-red-700');
+                document.getElementById('power-bar').classList.remove('bg-red-600');
             } else {
+                document.getElementById('power-bar').classList.add('bg-red-600');
+                document.getElementById('power-bar').classList.remove('bg-red-700');
             }
         }
+        // End game (caught by Slenderman)
+        function endGame() {
+            gameOver = true;
+            slendermanActive = false;
+            // Show game over screen
+            document.getElementById('game-over').classList.remove('hidden');
+            document.getElementById('warning-message').classList.add('hidden');
+            // Play scary sound
+            playSound('https://www.soundjay.com/human/sounds/scream-06.mp3');
+            // Stop timers
+            clearInterval(powerDrainTimer);
+            clearTimeout(slendermanSpawnTimer);
         }
+        // Win game (collected all pages)
+        function winGame() {
+            gameOver = true;
+            slendermanActive = false;
+            // Show win message
+            document.getElementById('game-over').classList.remove('hidden');
+            document.getElementById('game-over').innerHTML = `
+                <h2 class="text-green-500 text-3xl mb-4 creepy-font">YOU ESCAPED!</h2>
+                <p class="mb-4">You collected all 8 pages and escaped Slenderman's forest!</p>
+                <button id="restart-btn" class="bg-green-700 hover:bg-green-600 text-white px-4 py-2 rounded-lg pointer-events-auto">
+                    PLAY AGAIN
+                </button>
+            `;
+            // Play win sound
+            playSound('https://www.soundjay.com/misc/sounds/magic-chime-01.mp3');
+            // Stop timers
+            clearInterval(powerDrainTimer);
+            clearTimeout(slendermanSpawnTimer);
+            // Re-bind restart button
+            document.getElementById('restart-btn').addEventListener('click', restartGame);
         }
+        // Restart game
+        function restartGame() {
+            // Reset game state
+            gameOver = false;
+            gameStarted = false;
+            collectedPages = 0;
+            power = 100;
             // Reset UI
+            document.getElementById('pages-collected').textContent = '0';
+            updatePowerUI();
+            document.getElementById('game-over').classList.add('hidden');
+            document.getElementById('warning-message').classList.add('hidden');
+            document.getElementById('start-screen').classList.remove('hidden');
+            // Clear game elements
+            if (app) {
+                app.stage.removeChildren();
+                app.destroy(true);
+            }
+            // Reinitialize game
+            initGame();
+        }
+        // Play sound
+        function playSound(url) {
+            const audio = new Audio(url);
+            audio.volume = 0.5;
+            audio.play().catch(e => console.log("Audio play failed:", e));
         }
+        // Initialize game when start button is clicked
+        document.getElementById('start-btn').addEventListener('click', () => {
+            initGame();
+        });
+        // Mobile touch controls
+        let touchStartX = 0;
+        let touchStartY = 0;
+        let isTouching = false;
+        let isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+        let mobileKeys = {
+            w: false,
+            a: false,
+            s: false,
+            d: false,
+            shift: false
+        };
+        // Setup mobile controls
+        function setupMobileControls() {
+            if (!isMobile) return;
+            const joystick = document.getElementById('joystick');
+            const knob = document.getElementById('joystick-knob');
+            const runBtn = document.getElementById('mobile-shift');
+            const lookBtn = document.getElementById('mobile-look');
+            // Joystick touch events
+            joystick.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                isTouching = true;
+                const rect = joystick.getBoundingClientRect();
+                touchStartX = rect.left + rect.width / 2;
+                touchStartY = rect.top + rect.height / 2;
+                updateJoystick(e.touches[0].clientX, e.touches[0].clientY);
+            });
+            document.addEventListener('touchmove', (e) => {
+                if (!isTouching) return;
+                e.preventDefault();
+                updateJoystick(e.touches[0].clientX, e.touches[0].clientY);
+            });
+            document.addEventListener('touchend', () => {
+                isTouching = false;
+                knob.style.transform = 'translate(30px, 30px)';
+                mobileKeys.w = mobileKeys.a = mobileKeys.s = mobileKeys.d = false;
+            });
+            function updateJoystick(touchX, touchY) {
+                const rect = joystick.getBoundingClientRect();
+                const centerX = rect.left + rect.width / 2;
+                const centerY = rect.top + rect.height / 2;
+                const deltaX = touchX - centerX;
+                const deltaY = touchY - centerY;
+                const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+                const maxDistance = rect.width / 2;
+                if (distance > maxDistance) {
+                    const angle = Math.atan2(deltaY, deltaX);
+                    deltaX = Math.cos(angle) * maxDistance;
+                    deltaY = Math.sin(angle) * maxDistance;
+                }
+                knob.style.transform = `translate(${deltaX + 30}px, ${deltaY + 30}px)`;
+                // Update movement keys
+                mobileKeys.w = deltaY < -20;
+                mobileKeys.a = deltaX < -20;
+                mobileKeys.s = deltaY > 20;
+                mobileKeys.d = deltaX > 20;
+            }
+            // Run button
+            runBtn.addEventListener('touchstart', () => {
+                mobileKeys.shift = true;
+            });
+            runBtn.addEventListener('touchend', () => {
+                mobileKeys.shift = false;
+            });
+            // Look button (for mobile rotation)
+            let lookActive = false;
+            lookBtn.addEventListener('touchstart', () => {
+                lookActive = true;
+            });
+            lookBtn.addEventListener('touchend', () => {
+                lookActive = false;
+            });
+            // Mobile rotation
+            document.addEventListener('touchmove', (e) => {
+                if (!lookActive || !player || gameOver || !gameStarted) return;
+                e.preventDefault();
+                const touch = e.touches[0];
+                const rect = app.view.getBoundingClientRect();
+                const mouseX = touch.clientX - rect.left;
+                const mouseY = touch.clientY - rect.top;
+                const dx = mouseX - player.x;
+                const dy = mouseY - player.y;
+                player.rotation = Math.atan2(dy, dx);
+            });
+        }
+        // Bind restart button
+        document.getElementById('restart-btn').addEventListener('click', restartGame);
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Soda5601/zb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>