Spaces:

awacke1
/

VR-Aframe-3D-With-Claude-35-Sonnet

Running

App Files Files Community

awacke1 commited on Jul 13

Commit

3a0edc7

•

1 Parent(s): 1f71a34

Update index.html

Browse files

Files changed (1) hide show

index.html +172 -7

index.html CHANGED Viewed

@@ -7,12 +7,109 @@
 </head>
 <body>
     <a-scene fog="type: linear; color: #87CEEB; near: 0; far: 50">
-        <!-- ... (previous assets and scene setup remain the same) ... -->
     </a-scene>
     <script>
     (function() {
-        // ... (previous variable declarations and functions remain the same) ...
         function fireLaser(source, color, direction, isPlayer = false) {
             const sourcePosition = source.object3D.position.clone();
@@ -25,14 +122,14 @@
                 class: 'laser',
                 geometry: {
                     primitive: 'cylinder',
-                    radius: isPlayer ? 0.2 : 0.1, // Player lasers are twice as wide
                     height: laserLength
                 },
                 material: {
                     color: color,
-                    opacity: isPlayer ? 0.5 : 1, // Player lasers are 50% transparent
                     transparent: isPlayer,
-                    shader: 'flat' // This ensures the laser color is not affected by lighting
                 },
                 position: sourcePosition.clone().add(direction.multiplyScalar(laserLength / 2))
             });
@@ -61,6 +158,53 @@
             });
         }
         function shootFromCamera() {
             const direction = new THREE.Vector3(0, 0, -1);
             direction.applyQuaternion(camera.object3D.quaternion);
@@ -92,10 +236,31 @@
                 }
             });
-            // ... (rest of the updateGame function remains the same) ...
         }
-        // ... (rest of the script remains the same) ...
     })();
     </script>
 </body>

 </head>
 <body>
     <a-scene fog="type: linear; color: #87CEEB; near: 0; far: 50">
+        <a-assets>
+            <a-asset-item id="model1" src="1.obj"></a-asset-item>
+            <a-asset-item id="model2" src="2.obj"></a-asset-item>
+            <a-asset-item id="model3" src="3.obj"></a-asset-item>
+            <a-asset-item id="model4" src="4.obj"></a-asset-item>
+            <a-asset-item id="model5" src="5.obj"></a-asset-item>
+            <a-asset-item id="model6" src="6.obj"></a-asset-item>
+            <a-asset-item id="model7" src="7.obj"></a-asset-item>
+            <a-asset-item id="model8" src="8.obj"></a-asset-item>
+            <a-asset-item id="model9" src="9.obj"></a-asset-item>
+            <a-asset-item id="model10" src="10.obj"></a-asset-item>
+        </a-assets>
+        <a-sky color="#87CEEB"></a-sky>
+        <a-entity id="player" position="0 1.6 0">
+            <a-entity camera look-controls wasd-controls>
+                <a-entity id="cursor" cursor="fuse: false;" position="0 0 -1"
+                          geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
+                          material="color: white; shader: flat"
+                          raycaster="objects: .enemy, .spawner"></a-entity>
+            </a-entity>
+        </a-entity>
+        <a-entity id="scoreBar" position="-2 3 -5">
+            <a-box width="2" height="0.2" depth="0.1" color="#444444"></a-box>
+            <a-box id="scoreIndicator" width="2" height="0.2" depth="0.1" color="#FFA500" scale="0 1 1"></a-box>
+            <a-text value="Score" position="0 -0.3 0" align="center" color="white"></a-text>
+        </a-entity>
+        <a-entity id="healthBar" position="2 3 -5">
+            <a-box width="2" height="0.2" depth="0.1" color="#444444"></a-box>
+            <a-box id="healthIndicator" width="2" height="0.2" depth="0.1" color="#00FF00" scale="1 1 1"></a-box>
+            <a-text value="Health" position="0 -0.3 0" align="center" color="white"></a-text>
+        </a-entity>
+        <a-entity id="spawnCounter" position="0 3 -5">
+            <a-text value="Spawn Points: 0" align="center" color="white"></a-text>
+        </a-entity>
     </a-scene>
     <script>
     (function() {
+        const scene = document.querySelector('a-scene');
+        const player = document.querySelector('#player');
+        const camera = document.querySelector('[camera]');
+        const cursor = document.querySelector('#cursor');
+        const scoreIndicator = document.querySelector('#scoreIndicator');
+        const healthIndicator = document.querySelector('#healthIndicator');
+        const spawnCounter = document.querySelector('#spawnCounter');
+        let score = 0, health = 10000, enemies = new Set(), spawners = new Set(), explosionCount = 0;
+        const maxScore = 1000;
+        function updateDisplays() {
+            scoreIndicator.setAttribute('scale', `${Math.min(score / maxScore, 1)} 1 1`);
+            healthIndicator.setAttribute('scale', `${Math.max(health / 10000, 0)} 1 1`);
+            spawnCounter.setAttribute('text', `value: Spawn Points: ${spawners.size}`);
+        }
+        function createEntity(type, attributes) {
+            const entity = document.createElement('a-entity');
+            Object.entries(attributes).forEach(([key, value]) => entity.setAttribute(key, value));
+            scene.appendChild(entity);
+            return entity;
+        }
+        function generateSpawnerPosition() {
+            const angle = Math.random() * Math.PI * 2;
+            const distance = 10 + Math.random() * 10; // Spawn between 10 and 20 units away
+            return new THREE.Vector3(
+                Math.cos(angle) * distance,
+                1.6, // Keep at player's eye level
+                Math.sin(angle) * distance - 5 // Offset by -5 to spawn in front of scoreboard
+            );
+        }
+        function createSpawner(position = null) {
+            const modelNumber = Math.floor(Math.random() * 10) + 1;
+            const spawner = createEntity('spawner', {
+                class: 'spawner',
+                'obj-model': `obj: #model${modelNumber}`,
+                material: {color: '#00FF00', metalness: 0.7, roughness: 0.3},
+                position: position || generateSpawnerPosition()
+            });
+            spawner.health = 100;
+            spawners.add(spawner);
+            updateDisplays();
+        }
+        function createEnemy(spawnPosition) {
+            if (enemies.size >= 30) return;
+            const enemy = createEntity('enemy', {
+                class: 'enemy',
+                geometry: {primitive: 'sphere', radius: 0.5},
+                material: {color: '#FF0000', metalness: 0.7, roughness: 0.3, opacity: 0.5, transparent: true},
+                position: new THREE.Vector3(
+                    spawnPosition.x + (Math.random() - 0.5) * 2,
+                    1.6, // Keep at player's eye level
+                    spawnPosition.z + (Math.random() - 0.5) * 2
+                )
+            });
+            enemy.appendChild(createEntity('particles', {
+                'particle-system': {preset: 'dust', particleCount: 100, color: '#FF0000, #FF5500', size: 0.1, dur: 1000, accelerationValue: '0 -9.8 0'}
+            }));
+            enemy.creationTime = Date.now();
+            enemies.add(enemy);
+            updateDisplays();
+        }
         function fireLaser(source, color, direction, isPlayer = false) {
             const sourcePosition = source.object3D.position.clone();
                 class: 'laser',
                 geometry: {
                     primitive: 'cylinder',
+                    radius: isPlayer ? 0.2 : 0.1, // Player lasers are wider
                     height: laserLength
                 },
                 material: {
                     color: color,
+                    opacity: isPlayer ? 0.5 : 1, // Player lasers are semi-transparent
                     transparent: isPlayer,
+                    shader: 'flat' // Ensures the laser color is not affected by lighting
                 },
                 position: sourcePosition.clone().add(direction.multiplyScalar(laserLength / 2))
             });
             });
         }
+        function isPointNearLine(lineStart, lineEnd, point, threshold) {
+            const lineVec = new THREE.Vector3().subVectors(lineEnd, lineStart);
+            const pointVec = new THREE.Vector3().subVectors(point, lineStart);
+            const lineLengthSq = lineVec.lengthSq();
+            const dotProduct = pointVec.dot(lineVec);
+            const t = Math.max(0, Math.min(1, dotProduct / lineLengthSq));
+            const projection = lineStart.clone().add(lineVec.multiplyScalar(t));
+            return point.distanceTo(projection) < threshold;
+        }
+        function handleHit(target, position) {
+            if (target.classList.contains('enemy')) {
+                createExplosion(position);
+                scene.removeChild(target);
+                enemies.delete(target);
+                score += 10;
+                health = Math.min(10000, health + 20);
+            } else if (target.classList.contains('spawner')) {
+                target.health -= 20;
+                createExplosion(position);
+                if (target.health <= 0) {
+                    scene.removeChild(target);
+                    spawners.delete(target);
+                    score += 50;
+                    createSpawner(generateSpawnerPosition());
+                }
+            }
+            updateDisplays();
+        }
+        function createExplosion(position) {
+            const explosion = createEntity('explosion', {position: position});
+            for (let i = 0; i < 20; i++) {
+                const particle = createEntity('particle', {
+                    geometry: {primitive: 'sphere', radius: 0.1},
+                    material: {color: '#FFA500'},
+                    position: `${(Math.random() - 0.5) * 2} ${(Math.random() - 0.5) * 2} ${(Math.random() - 0.5) * 2}`
+                });
+                particle.setAttribute('animation', {property: 'position', to: `${(Math.random() - 0.5) * 2} ${(Math.random() - 0.5) * 2} ${(Math.random() - 0.5) * 2}`, dur: 1000, easing: 'easeOutQuad'});
+                particle.setAttribute('animation__opacity', {property: 'material.opacity', from: 1, to: 0, dur: 1000, easing: 'easeOutQuad'});
+                explosion.appendChild(particle);
+            }
+            setTimeout(() => scene.removeChild(explosion), 1000);
+            explosionCount++;
+            updateDisplays();
+        }
         function shootFromCamera() {
             const direction = new THREE.Vector3(0, 0, -1);
             direction.applyQuaternion(camera.object3D.quaternion);
                 }
             });
+            spawners.forEach(spawner => {
+                const direction = new THREE.Vector3().subVectors(cameraPosition, spawner.object3D.position).normalize();
+                spawner.object3D.position.add(direction.multiplyScalar(0.02));
+                spawner.object3D.position.y = 1.6; // Keep at player's eye level
+                spawner.object3D.lookAt(cameraPosition);
+                if (spawner.object3D.position.distanceTo(cameraPosition) < 3) {
+                    createExplosion(spawner.object3D.position);
+                    scene.removeChild(spawner);
+                    spawners.delete(spawner);
+                    health = Math.max(0, health - 100);
+                }
+                if (Math.random() < 0.005 && enemies.size < 30) {
+                    createEnemy(spawner.object3D.position);
+                }
+            });
+            while (spawners.size < 5) createSpawner();
+            updateDisplays();
         }
+        document.addEventListener('keydown', (event) => { if (event.code === 'Space') shootFromCamera(); });
+        scene.addEventListener('click', shootFromCamera);
+        updateDisplays();
+        setInterval(updateGame, 1000 / 60);  // 60 FPS update
     })();
     </script>
 </body>