Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on 10 days ago

Commit

e0245e2

verified ·

1 Parent(s): cacc3d1

Update index.html

Browse files

Files changed (1) hide show

index.html +288 -31

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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/[email protected]/examples/js/controls/PointerLockControls.min.js"></script>
@@ -12,6 +12,7 @@
             padding: 0;
             box-sizing: border-box;
             font-family: 'Courier New', monospace;
         }
         body {
@@ -258,6 +259,79 @@
             opacity: 0;
             z-index: 5;
         }
     </style>
 </head>
 <body>
@@ -276,6 +350,15 @@
             <div id="bloodEffect"></div>
         </div>
         <div id="startScreen">
             <h1 id="title">DEMON SLAYER</h1>
             <p id="subtitle">Eliminate all demons to survive</p>
@@ -306,6 +389,12 @@
         let shotCooldown = 300; // ms
         let enemySpawnTimer = 0;
         let clock = new THREE.Clock();
         // Initialize the game
         function init() {
@@ -357,14 +446,21 @@
             scene.add(player);
             player.add(camera);
-            // Add pointer lock controls
-            controls = new THREE.PointerLockControls(camera, document.body);
             // Event listeners
-            document.addEventListener('keydown', onKeyDown, false);
-            document.addEventListener('keyup', onKeyUp, false);
-            document.addEventListener('mousedown', onMouseDown, false);
-            document.addEventListener('mousemove', onMouseMove, false);
             window.addEventListener('resize', onWindowResize, false);
             // Start button event
@@ -436,26 +532,107 @@
             });
         }
-        function spawnEnemy() {
-            const enemyGeometry = new THREE.ConeGeometry(1, 3, 8);
-            const enemyMaterial = new THREE.MeshStandardMaterial({
                 color: 0x880000,
-                roughness: 0.8,
-                metalness: 0.2
             });
-            const enemy = new THREE.Mesh(enemyGeometry, enemyMaterial);
-            enemy.position.set(
                 (Math.random() - 0.5) * 40,
-                1.5,
                 (Math.random() - 0.5) * 40
             );
-            enemy.rotation.y = Math.random() * Math.PI * 2;
-            enemy.castShadow = true;
-            scene.add(enemy);
             enemies.push({
-                mesh: enemy,
                 health: 100,
                 speed: 0.02 + Math.random() * 0.03,
                 lastAttack: 0,
@@ -465,7 +642,9 @@
         function startGame() {
             document.getElementById('startScreen').style.display = 'none';
-            controls.lock();
             gameActive = true;
             // Spawn initial enemies
@@ -501,13 +680,17 @@
                 spawnEnemy();
             }
-            controls.lock();
             gameActive = true;
         }
         function gameOver() {
             gameActive = false;
-            controls.unlock();
             document.getElementById('finalScore').textContent = `SCORE: ${score}`;
             document.getElementById('gameOverScreen').style.display = 'flex';
         }
@@ -547,7 +730,7 @@
         }
         function onMouseMove(event) {
-            if (!gameActive) return;
             // Add weapon sway effect
             const weapon = document.getElementById('weapon');
@@ -607,6 +790,70 @@
             }, 50);
         }
         function onWindowResize() {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
@@ -621,10 +868,20 @@
             if (gameActive) {
                 // Player movement
                 const speed = 0.1;
-                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));
@@ -707,10 +964,10 @@
                             bullets.splice(i, 1);
                             // Enemy hit effect
-                            enemy.mesh.material.color.set(0xff0000);
                             setTimeout(() => {
-                                if (enemy.mesh) {
-                                    enemy.mesh.material.color.set(0x880000);
                                 }
                             }, 100);

 <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/[email protected]/examples/js/controls/PointerLockControls.min.js"></script>
             padding: 0;
             box-sizing: border-box;
             font-family: 'Courier New', monospace;
+            touch-action: none;
         }
         body {
             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) {
+            #mobileControls {
+                display: flex;
+            }
+            #instructions {
+                display: block;
+            }
+            #title {
+                font-size: 48px;
+            }
+            #subtitle {
+                font-size: 18px;
+            }
+        }
     </style>
 </head>
 <body>
             <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>
         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() {
             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
             });
         }
+        // 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,
         function startGame() {
             document.getElementById('startScreen').style.display = 'none';
+            if (!isMobile) {
+                controls.lock();
+            }
             gameActive = true;
             // Spawn initial enemies
                 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 onMouseMove(event) {
+            if (!gameActive || isMobile) return;
             // Add weapon sway effect
             const weapon = document.getElementById('weapon');
             }, 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();
             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));
                             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);