Update index.html

index.html

@@ -83,9 +83,13 @@
     </a-scene>
 
     <script>
-        // ... [All the game logic from the previous script goes here] ...
+        // Game variables
+        let score = 0;
+        let health = 100;
+        let enemyCount = 0;
+        let spawnerCount = 0;
 
-        // Editor functionality
+        // Editor variables
         let selectedObject = null;
         let isGameMode = true;
         const simplex = new SimplexNoise();
@@ -166,10 +170,15 @@
             const bumpMapUrl = generateBumpMap();
             
             newEntity.setAttribute('material', `src: ${textureUrl}; normalMap: ${bumpMapUrl}`);
-            newEntity.setAttribute('position', '0 1.5 -3');
             newEntity.setAttribute('class', 'editable');
             newEntity.addEventListener('click', function() { selectObject(this); });
             scene.appendChild(newEntity);
+
+            // Place the new object in front of the camera
+            placeInFrontOfCamera(newEntity);
+
+            // Select the newly added object
+            selectObject(newEntity);
         }
 
         function selectObject(obj) {
@@ -179,17 +188,19 @@
             selectedObject = obj;
             selectedObject.setAttribute('material', 'emissive', '#FF0000');
             
-            // Update position inputs
-            const position = selectedObject.getAttribute('position');
-            document.getElementById('px').value = position.x;
-            document.getElementById('py').value = position.y;
-            document.getElementById('pz').value = position.z;
+            updateTransformInputs(selectedObject);
+        }
+
+        function updateTransformInputs(obj) {
+            const position = obj.getAttribute('position');
+            document.getElementById('px').value = position.x.toFixed(2);
+            document.getElementById('py').value = position.y.toFixed(2);
+            document.getElementById('pz').value = position.z.toFixed(2);
             
-            // Update rotation inputs
-            const rotation = selectedObject.getAttribute('rotation');
-            document.getElementById('rx').value = rotation.x;
-            document.getElementById('ry').value = rotation.y;
-            document.getElementById('rz').value = rotation.z;
+            const rotation = obj.getAttribute('rotation');
+            document.getElementById('rx').value = rotation.x.toFixed(2);
+            document.getElementById('ry').value = rotation.y.toFixed(2);
+            document.getElementById('rz').value = rotation.z.toFixed(2);
         }
 
         function applyTransform() {
@@ -209,8 +220,9 @@
             selectedObject.setAttribute('rotation', `${rx} ${ry} ${rz}`);
         }
 
-        function placeInFrontOfCamera() {
-            if (!selectedObject) {
+        function placeInFrontOfCamera(obj = null) {
+            const targetObject = obj || selectedObject;
+            if (!targetObject) {
                 alert('Please select an object first');
                 return;
             }
@@ -224,12 +236,12 @@
             const x = cameraPosition.x - Math.sin(radians) * 3;
             const z = cameraPosition.z - Math.cos(radians) * 3;
 
-            selectedObject.setAttribute('position', `${x} ${cameraPosition.y} ${z}`);
+            targetObject.setAttribute('position', `${x} ${cameraPosition.y} ${z}`);
             
-            // Update position inputs
-            document.getElementById('px').value = x;
-            document.getElementById('py').value = cameraPosition.y;
-            document.getElementById('pz').value = z;
+            // Update position inputs if the object is selected
+            if (targetObject === selectedObject) {
+                updateTransformInputs(targetObject);
+            }
         }
 
         function toggleGameMode() {
@@ -242,25 +254,206 @@
             }
         }
 
-        // Modify the click event listener to work with both game and edit modes
-        const scene = document.querySelector('a-scene');
-        scene.addEventListener('click', (event) => {
-            if (isGameMode) {
-                fireLaser(player, '#00FF00');
-            } else if (event.detail.intersectedEl && event.detail.intersectedEl.classList.contains('editable')) {
-                selectObject(event.detail.intersectedEl);
+        // Game logic functions
+        function fireLaser(shooter, color) {
+            const laser = document.createElement('a-entity');
+            const start = new THREE.Vector3();
+            const direction = new THREE.Vector3();
+            shooter.object3D.getWorldPosition(start);
+            shooter.object3D.getWorldDirection(direction);
+            laser.setAttribute('position', start);
+            laser.setAttribute('geometry', 'primitive: sphere; radius: 0.1');
+            laser.setAttribute('material', `color: ${color}; shader: flat`);
+            document.querySelector('a-scene').appendChild(laser);
+
+            const animateShot = () => {
+                const position = laser.getAttribute('position');
+                const newPosition = {
+                    x: position.x + direction.x * 0.5,
+                    y: position.y + direction.y * 0.5,
+                    z: position.z + direction.z * 0.5
+                };
+                laser.setAttribute('position', newPosition);
+
+                // Check for collisions
+                const enemies = document.querySelectorAll('.enemy');
+                enemies.forEach(enemy => {
+                    const enemyPos = enemy.getAttribute('position');
+                    const distance = calculateDistance(newPosition, enemyPos);
+                    if (distance < 1) {
+                        enemy.parentNode.removeChild(enemy);
+                        laser.parentNode.removeChild(laser);
+                        enemyCount--;
+                        score += 10;
+                        updateScoreDisplay();
+                        updateUnitCounters();
+                        return;
+                    }
+                });
+
+                const spawners = document.querySelectorAll('.spawner');
+                spawners.forEach(spawner => {
+                    const spawnerPos = spawner.getAttribute('position');
+                    const distance = calculateDistance(newPosition, spawnerPos);
+                    if (distance < 1.5) {
+                        spawner.parentNode.removeChild(spawner);
+                        laser.parentNode.removeChild(laser);
+                        spawnerCount--;
+                        score += 50;
+                        updateScoreDisplay();
+                        updateUnitCounters();
+                        return;
+                    }
+                });
+
+                if (laser.parentNode) {
+                    requestAnimationFrame(animateShot);
+                }
+            };
+
+            requestAnimationFrame(animateShot);
+        }
+
+        function calculateDistance(pos1, pos2) {
+            const dx = pos1.x - pos2.x;
+            const dy = pos1.y - pos2.y;
+            const dz = pos1.z - pos2.z;
+            return Math.sqrt(dx * dx + dy * dy + dz * dz);
+        }
+
+        function spawnEnemy() {
+            const enemy = document.createElement('a-entity');
+            enemy.setAttribute('geometry', 'primitive: box');
+            enemy.setAttribute('material', 'color: red');
+            enemy.setAttribute('class', 'enemy');
+            const angle = Math.random() * Math.PI * 2;
+            const radius = 10 + Math.random() * 10;
+            const x = Math.cos(angle) * radius;
+            const z = Math.sin(angle) * radius;
+            enemy.setAttribute('position', `${x} 1.6 ${z}`);
+            document.querySelector('a-scene').appendChild(enemy);
+            enemyCount++;
+            updateUnitCounters();
+        }
+
+        function spawnSpawner() {
+            const spawner = document.createElement('a-entity');
+            spawner.setAttribute('geometry', 'primitive: box; width: 2; height: 2; depth: 2');
+            spawner.setAttribute('material', 'color: purple');
+            spawner.setAttribute('class', 'spawner');
+            const angle = Math.random() * Math.spawner.setAttribute('class', 'spawner');
+            const angle = Math.random() * Math.PI * 2;
+            const radius = 15 + Math.random() * 10;
+            const x = Math.cos(angle) * radius;
+            const z = Math.sin(angle) * radius;
+            spawner.setAttribute('position', `${x} 1.6 ${z}`);
+            document.querySelector('a-scene').appendChild(spawner);
+            spawnerCount++;
+            updateUnitCounters();
+        }
+
+        function updateGame() {
+            // Spawn enemies from spawners
+            const spawners = document.querySelectorAll('.spawner');
+            spawners.forEach(spawner => {
+                if (Math.random() < 0.1) {
+                    const enemy = document.createElement('a-entity');
+                    enemy.setAttribute('geometry', 'primitive: box');
+                    enemy.setAttribute('material', 'color: red');
+                    enemy.setAttribute('class', 'enemy');
+                    const spawnerPos = spawner.getAttribute('position');
+                    enemy.setAttribute('position', `${spawnerPos.x} ${spawnerPos.y} ${spawnerPos.z}`);
+                    document.querySelector('a-scene').appendChild(enemy);
+                    enemyCount++;
+                }
+            });
+
+            // Move enemies towards player
+            const player = document.querySelector('#player');
+            const playerPos = player.getAttribute('position');
+            const enemies = document.querySelectorAll('.enemy');
+            enemies.forEach(enemy => {
+                const enemyPos = enemy.getAttribute('position');
+                const direction = {
+                    x: playerPos.x - enemyPos.x,
+                    y: 0,
+                    z: playerPos.z - enemyPos.z
+                };
+                const length = Math.sqrt(direction.x * direction.x + direction.z * direction.z);
+                direction.x /= length;
+                direction.z /= length;
+                enemy.setAttribute('position', {
+                    x: enemyPos.x + direction.x * 0.05,
+                    y: enemyPos.y,
+                    z: enemyPos.z + direction.z * 0.05
+                });
+
+                // Check for collision with player
+                if (calculateDistance(playerPos, enemy.getAttribute('position')) < 1) {
+                    enemy.parentNode.removeChild(enemy);
+                    enemyCount--;
+                    health -= 10;
+                    updateHealthDisplay();
+                    updateUnitCounters();
+                }
+            });
+
+            // Randomly spawn new enemies and spawners
+            if (Math.random() < 0.02) spawnEnemy();
+            if (Math.random() < 0.005) spawnSpawner();
+        }
+
+        function updateScoreDisplay() {
+            const scoreIndicator = document.querySelector('#scoreIndicator');
+            scoreIndicator.setAttribute('scale', `${score / 1000} 1 1`);
+        }
+
+        function updateHealthDisplay() {
+            const healthDisplay = document.querySelector('#healthDisplay');
+            healthDisplay.innerHTML = '';
+            for (let i = 0; i < health / 10; i++) {
+                const heart = document.createElement('a-text');
+                heart.setAttribute('value', '❤');
+                heart.setAttribute('position', `${i * 0.2} 0 0`);
+                heart.setAttribute('color', 'red');
+                healthDisplay.appendChild(heart);
             }
-        });
+        }
+
+        function updateUnitCounters() {
+            const unitCounters = document.querySelector('#unitCounters');
+            unitCounters.innerHTML = '';
+            const enemyCounter = document.createElement('a-text');
+            enemyCounter.setAttribute('value', `Enemies: ${enemyCount}`);
+            enemyCounter.setAttribute('position', '0 0 0');
+            unitCounters.appendChild(enemyCounter);
+            const spawnerCounter = document.createElement('a-text');
+            spawnerCounter.setAttribute('value', `Spawners: ${spawnerCount}`);
+            spawnerCounter.setAttribute('position', '0 -0.3 0');
+            unitCounters.appendChild(spawnerCounter);
+        }
 
         // Initialize the game
         updateHealthDisplay();
         updateUnitCounters();
 
+        // Main game loop
         setInterval(() => {
             updateGame();
             score++;
             updateScoreDisplay();
-        }, 1000);
+        }, 1000 / 60);  // 60 FPS
+
+        // Event listeners
+        const scene = document.querySelector('a-scene');
+        scene.addEventListener('click', (event) => {
+            if (isGameMode) {
+                const player = document.querySelector('#player');
+                fireLaser(player, '#00FF00');
+            } else if (event.detail.intersectedEl && event.detail.intersectedEl.classList.contains('editable')) {
+                selectObject(event.detail.intersectedEl);
+            }
+        });
     </script>
 </body>
 </html>