Update index.html

index.html

@@ -95,7 +95,6 @@
     <div class="ui-container" id="race-ui">
         <h2>Starship Circuit Commander</h2>
         <div id="time">Time: 0</div>
-        <div id="score">Score: 0</div>
         <div id="status">Status: Active</div>
     </div>
     <div class="sidebar" id="sidebar">
@@ -192,7 +191,6 @@
         // Game state
         let gameState = 'racing';
         let raceTime = 0;
-        let score = 0;
         let currentTrack = 'Phelps Island Drift';
         let lastGatePass = 0;
         let isJumping = false;
@@ -264,15 +262,10 @@
         // Player ship
         let playerShip = null;
         let playerData = null;
-        function createShip(typeIndex, isPlayer, scaleMultiplier = 1, splitCount = 0) {
+        function createShip(typeIndex, isPlayer) {
             const type = shipTypes[typeIndex];
             const ship = new THREE.Group();
-            const scale = {
-                x: type.scale.x * scaleMultiplier,
-                y: type.scale.y * scaleMultiplier,
-                z: type.scale.z * scaleMultiplier
-            };
-            const bodyGeometry = new THREE.BoxGeometry(scale.x, scale.y, scale.z);
+            const bodyGeometry = new THREE.BoxGeometry(type.scale.x, type.scale.y, type.scale.z);
             const bodyMaterial = new THREE.MeshStandardMaterial({ 
                 color: isPlayer ? 0x00ff00 : 0xff0000, 
                 metalness: 0.8, 
@@ -281,43 +274,38 @@
             const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
             ship.add(body);
             if (type.name !== 'Rocketman') {
-                const thrusterGeometry = new THREE.CylinderGeometry(0.2 * scaleMultiplier, 0.2 * scaleMultiplier, 0.5 * scaleMultiplier, 8);
+                const thrusterGeometry = new THREE.CylinderGeometry(0.2, 0.2, 0.5, 8);
                 const thrusterMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa });
                 for (let i = 0; i < 4; i++) {
                     const thruster = new THREE.Mesh(thrusterGeometry, thrusterMaterial);
                     thruster.position.set(
-                        (i % 2 === 0 ? 0.5 : -0.5) * scale.x * 0.8,
+                        (i % 2 === 0 ? 0.5 : -0.5) * type.scale.x * 0.8,
                         0,
-                        (i < 2 ? 0.5 : -0.5) * scale.z * 0.8
+                        (i < 2 ? 0.5 : -0.5) * type.scale.z * 0.8
                     );
                     thruster.rotation.x = Math.PI / 2;
                     ship.add(thruster);
                 }
             } else {
-                const jetpackGeometry = new THREE.CylinderGeometry(0.3 * scaleMultiplier, 0.3 * scaleMultiplier, 0.8 * scaleMultiplier, 8);
+                const jetpackGeometry = new THREE.CylinderGeometry(0.3, 0.3, 0.8, 8);
                 const jetpack = new THREE.Mesh(jetpackGeometry, new THREE.MeshStandardMaterial({ color: 0xaaaaaa }));
-                jetpack.position.set(0, -0.5 * scaleMultiplier, 0);
+                jetpack.position.set(0, -0.5, 0);
                 ship.add(jetpack);
             }
             ship.position.y = 10;
             ship.castShadow = true;
-            const maxHP = type.maxHP * scaleMultiplier;
             ship.userData = {
                 type: type.name,
                 maxSpeed: type.speed,
                 acceleration: type.accel,
-                thrusters: Array(4).fill(maxHP),
-                body: { front: maxHP, back: maxHP, left: maxHP, right: maxHP },
+                thrusters: Array(4).fill(type.maxHP),
+                body: { front: type.maxHP, back: type.maxHP, left: type.maxHP, right: type.maxHP },
                 active: true,
                 speed: 0,
                 currentWaypoint: 0,
-                lastGatePass: 0,
-                isPlayer: isPlayer,
-                splitCount: splitCount,
-                typeIndex: typeIndex
+                lastGatePass: 0
             };
             scene.add(ship);
-            if (!isPlayer) aiShips.push(ship);
             return ship;
         }
 
@@ -326,9 +314,8 @@
             const typeIndex = Math.floor(Math.random() * shipTypes.length);
             playerShip = createShip(typeIndex, true);
             playerData = playerShip.userData;
+            // Reset skills
             Object.keys(skills).forEach(skill => skills[skill].level = 0);
-            score = 0;
-            document.getElementById('score').textContent = `Score: ${score}`;
             updateCharacterSheet();
             updateSkillsSheet();
         }
@@ -346,51 +333,20 @@
         const startGate = new THREE.Mesh(gateGeometry, gateMaterial);
         scene.add(startGate);
 
-        // Missile system
-        const missiles = [];
-        function createMissile(position, target) {
-            const geometry = new THREE.ConeGeometry(0.2, 0.5, 8);
-            const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
-            const missile = new THREE.Mesh(geometry, material);
-            missile.position.copy(position);
-            missile.rotation.x = Math.PI / 2;
-            missile.castShadow = true;
-
-            // Flame trail
-            const flameCount = 10;
-            const flameGeometry = new THREE.BufferGeometry();
-            const flamePositions = new Float32Array(flameCount * 3);
-            const flameColors = new Float32Array(flameCount * 3);
-            for (let i = 0; i < flameCount; i++) {
-                const i3 = i * 3;
-                flamePositions[i3] = 0;
-                flamePositions[i3 + 1] = 0;
-                flamePositions[i3 + 2] = 0;
-                flameColors[i3] = 1;
-                flameColors[i3 + 1] = 0;
-                flameColors[i3 + 2] = 0;
-            }
-            flameGeometry.setAttribute('position', new THREE.BufferAttribute(flamePositions, 3));
-            flameGeometry.setAttribute('color', new THREE.BufferAttribute(flameColors, 3));
-            const flameMaterial = new THREE.PointsMaterial({
-                size: 0.2,
-                vertexColors: true,
-                transparent: true,
-                opacity: 0.5
-            });
-            const flame = new THREE.Points(flameGeometry, flameMaterial);
-            flame.position.z = -0.3;
-            missile.add(flame);
-
-            missile.userData = {
-                target: target,
-                speed: 1,
-                lifetime: 300,
+        // Particle system for bullets
+        const bullets = [];
+        function createBullet(position, direction) {
+            const geometry = new THREE.SphereGeometry(0.2, 8, 8);
+            const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
+            const bullet = new THREE.Mesh(geometry, material);
+            bullet.position.copy(position);
+            bullet.userData = {
+                direction: direction.clone(),
+                lifetime: 120,
                 damage: skills.shotPower.effect(skills.shotPower.level)
             };
-            scene.add(missile);
-            missiles.push(missile);
-            return missile;
+            scene.add(bullet);
+            bullets.push(bullet);
         }
 
         // Particle system for explosions
@@ -433,25 +389,17 @@
         }
 
         // Building and column generation
-        function createBuilding(x, z, width, depth, height, scaleMultiplier = 1, splitCount = 0) {
-            const geometry = new THREE.BoxGeometry(width * scaleMultiplier, height * scaleMultiplier, depth * scaleMultiplier);
+        function createBuilding(x, z, width, depth, height) {
+            const geometry = new THREE.BoxGeometry(width, height, depth);
             const material = new THREE.MeshStandardMaterial({
                 color: Math.random() * 0xffffff,
                 roughness: 0.7,
                 metalness: 0.3
             });
             const building = new THREE.Mesh(geometry, material);
-            building.position.set(x, (height * scaleMultiplier) / 2, z);
+            building.position.set(x, height / 2, z);
             building.castShadow = true;
             building.receiveShadow = true;
-            building.userData = {
-                splitCount: splitCount,
-                maxHP: 10 * scaleMultiplier,
-                currentHP: 10 * scaleMultiplier,
-                width: width,
-                depth: depth,
-                height: height
-            };
             return building;
         }
 
@@ -723,24 +671,17 @@
         // Shooting
         let canShoot = true;
         let shotCooldown = 200;
-        const raycaster = new THREE.Raycaster();
-        const mouse = new THREE.Vector2();
         document.addEventListener('mousedown', (event) => {
             if (event.button === 0 && canShoot && gameState === 'racing' && playerData.active) {
                 canShoot = false;
                 setTimeout(() => canShoot = true, shotCooldown);
-                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-                raycaster.setFromCamera(mouse, camera);
-                const targets = [...aiShips, ...(currentTrackGroup ? currentTrackGroup.children.filter(c => c.isMesh && c.geometry.type === 'BoxGeometry') : [])].filter(t => t !== playerShip && (!t.userData.isPlayer || !t.userData.active));
-                const intersects = raycaster.intersectObjects(targets);
-                if (intersects.length > 0) {
-                    const target = intersects[0].object;
-                    const position = playerShip.position.clone().add(new THREE.Vector3(0, 0, -2));
-                    const count = skills.shotCount.effect(skills.shotCount.level);
-                    for (let i = 0; i < count; i++) {
-                        createMissile(position.clone().add(new THREE.Vector3((Math.random() - 0.5) * 0.5, (Math.random() - 0.5) * 0.5, 0)), target);
-                    }
+                const direction = new THREE.Vector3();
+                camera.getWorldDirection(direction);
+                const position = playerShip.position.clone().add(direction.clone().multiplyScalar(2));
+                const count = skills.shotCount.effect(skills.shotCount.level);
+                for (let i = 0; i < count; i++) {
+                    const offset = new THREE.Vector3((Math.random() - 0.5) * 0.1, (Math.random() - 0.5) * 0.1, 0);
+                    createBullet(position.clone().add(offset), direction);
                 }
             }
         });
@@ -805,36 +746,13 @@
             checkShipStatus(ship);
         }
 
-        function checkShipStatus(ship, hitPosition) {
+        function checkShipStatus(ship) {
             const totalHP = ship.userData.thrusters.reduce((a, b) => a + b, 0) +
                             Object.values(ship.userData.body).reduce((a, b) => a + b, 0);
             if (totalHP <= 0) {
                 ship.userData.active = false;
                 ship.visible = false;
                 createExplosion(ship.position);
-                if (ship.userData.splitCount < 3) {
-                    const newScale = 0.5;
-                    const offsets = [
-                        new THREE.Vector3(1, 0, 1),
-                        new THREE.Vector3(-1, 0, -1)
-                    ];
-                    offsets.forEach(offset => {
-                        const newShip = createShip(
-                            ship.userData.typeIndex,
-                            false,
-                            newScale,
-                            ship.userData.splitCount + 1
-                        );
-                        newShip.position.copy(ship.position).add(offset.multiplyScalar(2));
-                        newShip.userData.currentWaypoint = ship.userData.currentWaypoint;
-                    });
-                }
-                if (!ship.userData.isPlayer) {
-                    const index = aiShips.indexOf(ship);
-                    if (index > -1) aiShips.splice(index, 1);
-                    score += 100;
-                    document.getElementById('score').textContent = `Score: ${score}`;
-                }
                 if (ship === playerShip) {
                     document.getElementById('status').textContent = 'Status: Destroyed';
                     endRace();
@@ -842,36 +760,6 @@
             }
         }
 
-        // Building damage
-        function applyBuildingDamage(building, damage, hitPosition) {
-            building.userData.currentHP -= damage;
-            createExplosion(hitPosition);
-            if (building.userData.currentHP <= 0) {
-                currentTrackGroup.remove(building);
-                if (building.userData.splitCount < 3) {
-                    const newScale = 0.5;
-                    const offsets = [
-                        new THREE.Vector3(5, 0, 5),
-                        new THREE.Vector3(-5, 0, -5)
-                    ];
-                    offsets.forEach(offset => {
-                        const newBuilding = createBuilding(
-                            building.position.x + offset.x,
-                            building.position.z + offset.z,
-                            building.userData.width,
-                            building.userData.depth,
-                            building.userData.height,
-                            newScale,
-                            building.userData.splitCount + 1
-                        );
-                        currentTrackGroup.add(newBuilding);
-                    });
-                }
-                score += 100;
-                document.getElementById('score').textContent = `Score: ${score}`;
-            }
-        }
-
         // Pickup handling
         function updatePickups() {
             for (let i = pickups.length - 1; i >= 0; i--) {
@@ -888,48 +776,6 @@
             }
         }
 
-        // Missile update
-        function updateMissiles() {
-            for (let i = missiles.length - 1; i >= 0; i--) {
-                const missile = missiles[i];
-                missile.userData.lifetime--;
-                if (missile.userData.lifetime <= 0 || !missile.userData.target || (!missile.userData.target.userData?.active && !missile.userData.target.isMesh)) {
-                    scene.remove(missile);
-                    missiles.splice(i, 1);
-                    continue;
-                }
-                const targetPos = missile.userData.target.isMesh ? missile.userData.target.position : missile.userData.target.position;
-                const direction = targetPos.clone().sub(missile.position).normalize();
-                missile.position.add(direction.multiplyScalar(missile.userData.speed));
-                missile.lookAt(targetPos);
-                missile.rotation.x += Math.PI / 2;
-
-                // Update flame trail
-                const flame = missile.children[0];
-                const positions = flame.geometry.attributes.position.array;
-                for (let j = 0; j < positions.length / 3; j++) {
-                    const j3 = j * 3;
-                    positions[j3] = (Math.random() - 0.5) * 0.1;
-                    positions[j3 + 1] = (Math.random() - 0.5) * 0.1;
-                    positions[j3 + 2] = -0.3 - Math.random() * 0.2;
-                }
-                flame.geometry.attributes.position.needsUpdate = true;
-
-                // Check collision
-                const missileBox = new THREE.Box3().setFromObject(missile);
-                const targetBox = new THREE.Box3().setFromObject(missile.userData.target);
-                if (missileBox.intersectsBox(targetBox)) {
-                    if (missile.userData.target.isMesh && missile.userData.target.geometry.type === 'BoxGeometry') {
-                        applyBuildingDamage(missile.userData.target, missile.userData.damage, missile.position);
-                    } else {
-                        applyDamage(missile.userData.target, missile.userData.damage, missile.position);
-                    }
-                    scene.remove(missile);
-                    missiles.splice(i, 1);
-                }
-            }
-        }
-
         // Player movement
         let rotation = 0;
         let bankAngle = 0;
@@ -1007,6 +853,29 @@
             });
         }
 
+        // Bullet update
+        function updateBullets() {
+            const raycaster = new THREE.Raycaster();
+            for (let i = bullets.length - 1; i >= 0; i--) {
+                const bullet = bullets[i];
+                bullet.userData.lifetime--;
+                if (bullet.userData.lifetime <= 0) {
+                    scene.remove(bullet);
+                    bullets.splice(i, 1);
+                    continue;
+                }
+                bullet.position.add(bullet.userData.direction.clone().multiplyScalar(1));
+                raycaster.set(bullet.position, bullet.userData.direction);
+                const intersects = raycaster.intersectObjects([...aiShips, playerShip].filter(s => s.userData.active));
+                if (intersects.length > 0) {
+                    const hitShip = intersects[0].object.parent;
+                    applyDamage(hitShip, bullet.userData.damage, bullet.position);
+                    scene.remove(bullet);
+                    bullets.splice(i, 1);
+                }
+            }
+        }
+
         // Explosion update
         const explosions = [];
         function updateExplosions() {
@@ -1055,9 +924,7 @@
             currentTrack = trackName;
             if (currentTrackGroup) scene.remove(currentTrackGroup);
             pickups.forEach(p => scene.remove(p));
-            missiles.forEach(m => scene.remove(m));
             pickups.length = 0;
-            missiles.length = 0;
             const { trackGroup, waypoints: newWaypoints, startPosition } = generateTrack(trackConfigs[trackName]);
             currentTrackGroup = trackGroup;
             waypoints = newWaypoints;
@@ -1081,9 +948,7 @@
             startGate.position.y = 12;
             startGate.rotation.y = Math.atan2(waypoints[1].x - waypoints[0].x, waypoints[1].z - waypoints[0].z);
             raceTime = 0;
-            score = 0;
             document.getElementById('time').textContent = `Time: 0`;
-            document.getElementById('score').textContent = `Score: ${score}`;
             document.getElementById('status').textContent = `Status: Active`;
             updateCharacterSheet();
             updateSkillsSheet();
@@ -1092,12 +957,12 @@
         // Restart race
         function restartRace() {
             scene.remove(playerShip);
+            bullets.forEach(b => scene.remove(b));
             explosions.forEach(e => scene.remove(e));
             pickups.forEach(p => scene.remove(p));
-            missiles.forEach(m => scene.remove(m));
+            bullets.length = 0;
             explosions.length = 0;
             pickups.length = 0;
-            missiles.length = 0;
             initPlayer();
             startRace(currentTrack);
         }
@@ -1106,7 +971,7 @@
         function endRace() {
             gameState = 'menu';
             const activeShips = aiShips.filter(s => s.userData.active).length + (playerData.active ? 1 : 0);
-            alert(`Race Over! Ships Remaining: ${activeShips}, Time: ${raceTime.toFixed(2)}s, Score: ${score}`);
+            alert(`Race Over! Ships Remaining: ${activeShips}, Time: ${raceTime.toFixed(2)}s`);
         }
 
         // Gallery
@@ -1123,7 +988,7 @@
             if (gameState === 'racing') {
                 updatePlayer();
                 updateAI();
-                updateMissiles();
+                updateBullets();
                 updateExplosions();
                 raceTime += 1 / 60;
                 document.getElementById('time').textContent = `Time: ${raceTime.toFixed(2)}`;