Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on Aug 13, 2025

Commit

436fe15

verified ·

1 Parent(s): 420114b

Update index.html

Browse files

Files changed (1) hide show

index.html +169 -63

index.html CHANGED Viewed

@@ -1,87 +1,193 @@
 <!DOCTYPE html>
-<html lang="ru">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>360 Лесной Скайбокс</title>
-    <!-- Стили Pannellum (загружаются из CDN) -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
     <style>
-        /* Общие стили для страницы */
-        body, html {
             margin: 0;
-            padding: 0;
-            height: 100%;
-            width: 100%;
-            overflow: hidden; /* Убираем полосы прокрутки */
-            font-family: sans-serif;
-            background-color: #f0f0f0;
-            color: #333;
         }
-        /* Контейнер для панорамы */
-        #panorama {
-            width: 100%;
-            height: 100%;
         }
-        /* Стили для инструкции (по желанию) */
-        .instruction {
             position: absolute;
-            top: 10px;
             left: 50%;
-            transform: translateX(-50%);
-            background-color: rgba(0, 0, 0, 0.6);
             color: white;
-            padding: 8px 15px;
-            border-radius: 5px;
-            font-size: 14px;
-            z-index: 1000;
-            text-align: center;
         }
-        @media (max-width: 600px) {
-            .instruction {
-                font-size: 12px;
-                padding: 6px 10px;
-            }
         }
     </style>
 </head>
 <body>
-    <!-- Контейнер, куда будет загружена панорама -->
-    <div id="panorama"></div>
-    <!-- Инструкция для пользователя -->
-    <div class="instruction">
-        Перетащите мышью, чтобы вращать. Колесо мыши - масштабирование.
-    </div>
-    <!-- Скрипт Pannellum (загружается из CDN) -->
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
-    <script>
-        // Инициализация Pannellum после полной загрузки DOM
-        document.addEventListener('DOMContentLoaded', function() {
-            pannellum.viewer('panorama', {
-                "type": "equirectangular", // Тип панорамы (эквиректакулярная)
-                "panorama": "forest_skybox.jpg", // *** ВАЖНО: Укажите здесь ПРАВИЛЬНОЕ ИМЯ ВАШЕГО ФАЙЛА С ИЗОБРАЖЕНИЕМ ***
-                "autoLoad": true,       // Автоматически загружать панораму
-                "autoRotate": -2,       // Автоматическое медленное вращение (-2 для вращения влево, 2 для вправо)
-                "autoRotateInactivityDelay": 1000, // Задержка перед началом авто-вращения после неактивности пользователя
-                "orientationOnByDefault": false, // Не использовать гироскоп по умолчанию (для мобильных)
-                "showZoom": true,       // Показывать кнопки масштабирования
-                "showControls": true,   // Показывать элементы управления (зум, полноэкранный режим)
-                "mouseZoom": true,      // Включить зум колесом мыши
-                "hfov": 100,            // Начальный горизонтальный угол обзора (Field of View)
-                "minHfov": 50,          // Минимальный горизонтальный угол обзора (максимальное увеличение)
-                "maxHfov": 120          // Максимальный горизонтальный угол обзора (минимальное увеличение)
             });
         });
     </script>
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Doom-like FPS Game</title>
     <style>
+        body {
             margin: 0;
+            overflow: hidden;
         }
+        canvas {
+            display: block;
         }
+        #crosshair {
             position: absolute;
+            top: 50%;
             left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 24px;
             color: white;
+            pointer-events: none;
         }
+        #hud {
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            color: white;
+            font-family: Arial, sans-serif;
         }
     </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 </head>
 <body>
+    <div id="crosshair">+</div>
+    <div id="hud">Health: <span id="health">100</span> | Kills: <span id="kills">0</span></div>
+    <script>
+        // Scene setup
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0x404040);
+        scene.add(ambientLight);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+        directionalLight.position.set(1, 1, 1);
+        scene.add(directionalLight);
+        // Floor
+        const floorGeometry = new THREE.PlaneGeometry(100, 100);
+        const floorMaterial = new THREE.MeshBasicMaterial({ color: 0x555555, side: THREE.DoubleSide });
+        const floor = new THREE.Mesh(floorGeometry, floorMaterial);
+        floor.rotation.x = Math.PI / 2;
+        floor.position.y = -1;
+        scene.add(floor);
+        // Walls for a simple room
+        const wallMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 });
+        const wall1 = new THREE.Mesh(new THREE.BoxGeometry(100, 10, 1), wallMaterial);
+        wall1.position.set(0, 4, -50);
+        scene.add(wall1);
+        const wall2 = new THREE.Mesh(new THREE.BoxGeometry(100, 10, 1), wallMaterial);
+        wall2.position.set(0, 4, 50);
+        scene.add(wall2);
+        const wall3 = new THREE.Mesh(new THREE.BoxGeometry(1, 10, 100), wallMaterial);
+        wall3.position.set(-50, 4, 0);
+        scene.add(wall3);
+        const wall4 = new THREE.Mesh(new THREE.BoxGeometry(1, 10, 100), wallMaterial);
+        wall4.position.set(50, 4, 0);
+        scene.add(wall4);
+        // Player setup
+        camera.position.y = 1; // Eye level
+        const playerVelocity = new THREE.Vector3();
+        const playerDirection = new THREE.Vector3();
+        const moveSpeed = 0.1;
+        let health = 100;
+        let kills = 0;
+        // Controls
+        const keys = {};
+        document.addEventListener('keydown', (e) => keys[e.key.toLowerCase()] = true);
+        document.addEventListener('keyup', (e) => keys[e.key.toLowerCase()] = false);
+        // Mouse look
+        let mouseX = 0, mouseY = 0;
+        document.addEventListener('mousemove', (e) => {
+            mouseX = e.movementX * 0.002;
+            mouseY = e.movementY * 0.002;
+        });
+        // Pointer lock
+        document.body.addEventListener('click', () => {
+            document.body.requestPointerLock();
+        });
+        // Shooting
+        const raycaster = new THREE.Raycaster();
+        const mouse = new THREE.Vector2(0, 0); // Center for crosshair
+        document.addEventListener('click', shoot);
+        function shoot() {
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(demons);
+            if (intersects.length > 0) {
+                const demon = intersects[0].object;
+                scene.remove(demon);
+                demons = demons.filter(d => d !== demon);
+                kills++;
+                document.getElementById('kills').innerText = kills;
+                if (demons.length === 0) {
+                    alert('You win! All demons killed.');
+                }
+            }
+        }
+        // Demons
+        const demonMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+        const demons = [];
+        for (let i = 0; i < 5; i++) {
+            const demon = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), demonMaterial);
+            demon.position.set(Math.random() * 80 - 40, 0, Math.random() * 80 - 40);
+            scene.add(demon);
+            demons.push(demon);
+        }
+        // Demon AI (simple chase)
+        function updateDemons() {
+            demons.forEach(demon => {
+                const direction = new THREE.Vector3();
+                direction.subVectors(camera.position, demon.position).normalize();
+                demon.position.add(direction.multiplyScalar(0.02));
+                // Check collision with player
+                if (demon.position.distanceTo(camera.position) < 1.5) {
+                    health -= 1;
+                    document.getElementById('health').innerText = health;
+                    if (health <= 0) {
+                        alert('Game Over! You died.');
+                        health = 100;
+                        kills = 0;
+                        // Reset game if needed
+                    }
+                }
             });
+        }
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            // Rotation (mouse look)
+            camera.rotation.y -= mouseX;
+            camera.rotation.x -= mouseY;
+            camera.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.rotation.x));
+            mouseX = 0;
+            mouseY = 0;
+            // Movement
+            playerDirection.set(0, 0, 0);
+            if (keys['w']) playerDirection.z -= 1;
+            if (keys['s']) playerDirection.z += 1;
+            if (keys['a']) playerDirection.x -= 1;
+            if (keys['d']) playerDirection.x += 1;
+            playerDirection.normalize();
+            playerDirection.applyEuler(camera.rotation);
+            playerVelocity.add(playerDirection.multiplyScalar(moveSpeed));
+            playerVelocity.multiplyScalar(0.95); // Friction
+            camera.position.add(playerVelocity);
+            // Prevent going through walls (basic collision)
+            camera.position.x = Math.max(-49, Math.min(49, camera.position.x));
+            camera.position.z = Math.max(-49, Math.min(49, camera.position.z));
+            updateDemons();
+            renderer.render(scene, camera);
+        }
+        animate();
+        // Resize handler
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
         });
     </script>
 </body>
+</html>