Spaces:

awacke1
/

TinyHTMLGame1

Running

App Files Files Community

awacke1 commited on 7 days ago

Commit

662afab

verified ·

1 Parent(s): 995d988

Update index.html

Browse files

Files changed (1) hide show

index.html +236 -65

index.html CHANGED Viewed

@@ -54,11 +54,11 @@
         .sidebar button:hover {
             background: #45a049;
         }
-        .sidebar .character-sheet, .sidebar .skills-sheet {
             margin-top: 20px;
             font-size: 14px;
         }
-        .sidebar .character-sheet div, .sidebar .skills-sheet div {
             margin: 5px 0;
         }
         .gallery {
@@ -93,8 +93,9 @@
 </head>
 <body>
     <div class="ui-container" id="race-ui">
-        <h2>Starship Circuit Commander</h2>
         <div id="time">Time: 0</div>
         <div id="status">Status: Active</div>
     </div>
     <div class="sidebar" id="sidebar">
@@ -176,6 +177,10 @@
             <div>Shot Count: <span id="skill-shot-count">0</span><div class="skill-meter"><div id="skill-shot-count-meter" style="width: 0%"></div></div></div>
             <div>Turn Speed: <span id="skill-turn-speed">0</span><div class="skill-meter"><div id="skill-turn-speed-meter" style="width: 0%"></div></div></div>
         </div>
     </div>
     <div class="gallery" id="gallery">
         <h2>Lake Minnetonka Gallery</h2>
@@ -191,10 +196,12 @@
         // Game state
         let gameState = 'racing';
         let raceTime = 0;
         let currentTrack = 'Phelps Island Drift';
         let lastGatePass = 0;
         let isJumping = false;
         let jumpCooldown = 0;
         // Scene setup
         const scene = new THREE.Scene();
@@ -262,10 +269,15 @@
         // Player ship
         let playerShip = null;
         let playerData = null;
-        function createShip(typeIndex, isPlayer) {
             const type = shipTypes[typeIndex];
             const ship = new THREE.Group();
-            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,
@@ -274,38 +286,43 @@
             const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
             ship.add(body);
             if (type.name !== 'Rocketman') {
-                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) * type.scale.x * 0.8,
                         0,
-                        (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, 0.3, 0.8, 8);
                 const jetpack = new THREE.Mesh(jetpackGeometry, new THREE.MeshStandardMaterial({ color: 0xaaaaaa }));
-                jetpack.position.set(0, -0.5, 0);
                 ship.add(jetpack);
             }
             ship.position.y = 10;
             ship.castShadow = true;
             ship.userData = {
                 type: type.name,
                 maxSpeed: type.speed,
                 acceleration: type.accel,
-                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
             };
             scene.add(ship);
             return ship;
         }
@@ -314,10 +331,12 @@
             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);
             updateCharacterSheet();
             updateSkillsSheet();
         }
         // AI opponents
@@ -333,20 +352,51 @@
         const startGate = new THREE.Mesh(gateGeometry, gateMaterial);
         scene.add(startGate);
-        // 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(bullet);
-            bullets.push(bullet);
         }
         // Particle system for explosions
@@ -389,17 +439,25 @@
         }
         // Building and column generation
-        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 / 2, z);
             building.castShadow = true;
             building.receiveShadow = true;
             return building;
         }
@@ -625,7 +683,7 @@
             'Miami Beach Boulevard': { segments: ['straight', 'right', 'straight', 'left', 'gap', 'straight'], length: 48, streetWidth: 30, buildingHeight: 40 },
             'Florida Keys Canal Cruise': { segments: ['straight', 'left', 'right', 'gap', 'left', 'straight'], length: 45, streetWidth: 28, buildingHeight: 35 },
             'Orlando Theme Park Tour': { segments: ['straight', 'up', 'right', 'down', 'left', 'gap', 'straight'], length: 48, streetWidth: 30, buildingHeight: 40 },
-            'Tampa Bay Finance District Drift': { segments: ['straight', 'right', 'left', 'straight', 'gap', 'right', 'straight'], length: 50, streetWidth: 32, buildingHeight: 45 },
             'Jacksonville River City Run': { segments: ['straight', 'left', 'right', 'gap', 'left', 'straight'], length: 45, streetWidth: 28, buildingHeight: 35 },
             'Fort Lauderdale Cruise Port Circuit': { segments: ['straight', 'straight', 'straight', 'gap', 'straight'], length: 55, streetWidth: 35, buildingHeight: 50 },
             'Key West Sunset Sprint': { segments: ['straight', 'left', 'up', 'right', 'down', 'gap', 'straight'], length: 48, streetWidth: 30, buildingHeight: 40 },
@@ -671,21 +729,50 @@
         // Shooting
         let canShoot = true;
         let shotCooldown = 200;
         document.addEventListener('mousedown', (event) => {
             if (event.button === 0 && canShoot && gameState === 'racing' && playerData.active) {
                 canShoot = false;
                 setTimeout(() => canShoot = true, shotCooldown);
-                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);
                 }
             }
         });
         // Update character sheet
         function updateCharacterSheet() {
             document.getElementById('ship-type').textContent = `Type: ${playerData.type}`;
@@ -742,24 +829,81 @@
             createExplosion(hitPosition);
             if (ship === playerShip) {
                 updateCharacterSheet();
             }
             checkShipStatus(ship);
         }
-        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 === playerShip) {
                     document.getElementById('status').textContent = 'Status: Destroyed';
                     endRace();
                 }
             }
         }
         // Pickup handling
         function updatePickups() {
             for (let i = pickups.length - 1; i >= 0; i--) {
@@ -769,6 +913,7 @@
                     if (skill.level < skill.maxLevel) {
                         skill.level++;
                         updateSkillsSheet();
                     }
                     scene.remove(pickup);
                     pickups.splice(i, 1);
@@ -776,6 +921,48 @@
             }
         }
         // Player movement
         let rotation = 0;
         let bankAngle = 0;
@@ -798,6 +985,7 @@
                 isJumping = true;
                 jumpHeight = 5;
                 jumpCooldown = 60;
             }
             if (isJumping) {
                 jumpHeight -= 0.2;
@@ -853,29 +1041,6 @@
             });
         }
-        // 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() {
@@ -924,7 +1089,9 @@
             currentTrack = trackName;
             if (currentTrackGroup) scene.remove(currentTrackGroup);
             pickups.forEach(p => scene.remove(p));
             pickups.length = 0;
             const { trackGroup, waypoints: newWaypoints, startPosition } = generateTrack(trackConfigs[trackName]);
             currentTrackGroup = trackGroup;
             waypoints = newWaypoints;
@@ -948,21 +1115,24 @@
             startGate.position.y = 12;
             startGate.rotation.y = Math.atan2(waypoints[1].x - waypoints[0].x, waypoints[1].z - waypoints[0].z);
             raceTime = 0;
             document.getElementById('time').textContent = `Time: 0`;
             document.getElementById('status').textContent = `Status: Active`;
             updateCharacterSheet();
             updateSkillsSheet();
         }
         // 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));
-            bullets.length = 0;
             explosions.length = 0;
             pickups.length = 0;
             initPlayer();
             startRace(currentTrack);
         }
@@ -971,7 +1141,8 @@
         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`);
         }
         // Gallery
@@ -988,7 +1159,7 @@
             if (gameState === 'racing') {
                 updatePlayer();
                 updateAI();
-                updateBullets();
                 updateExplosions();
                 raceTime += 1 / 60;
                 document.getElementById('time').textContent = `Time: ${raceTime.toFixed(2)}`;

         .sidebar button:hover {
             background: #45a049;
         }
+        .sidebar .character-sheet, .sidebar .skills-sheet, .sidebar .leaderboard {
             margin-top: 20px;
             font-size: 14px;
         }
+        .sidebar .character-sheet div, .sidebar .skills-sheet div, .sidebar .leaderboard div {
             margin: 5px 0;
         }
         .gallery {
 </head>
 <body>
     <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">
             <div>Shot Count: <span id="skill-shot-count">0</span><div class="skill-meter"><div id="skill-shot-count-meter" style="width: 0%"></div></div></div>
             <div>Turn Speed: <span id="skill-turn-speed">0</span><div class="skill-meter"><div id="skill-turn-speed-meter" style="width: 0%"></div></div></div>
         </div>
+        <div class="leaderboard" id="leaderboard">
+            <h3>Leaderboard 📊</h3>
+            <div id="logDisplay">Loading...</div>
+        </div>
     </div>
     <div class="gallery" id="gallery">
         <h2>Lake Minnetonka Gallery</h2>
         // Game state
         let gameState = 'racing';
         let raceTime = 0;
+        let score = 0;
         let currentTrack = 'Phelps Island Drift';
         let lastGatePass = 0;
         let isJumping = false;
         let jumpCooldown = 0;
+        let playerName = prompt('Enter your name:') || 'Player';
         // Scene setup
         const scene = new THREE.Scene();
         // Player ship
         let playerShip = null;
         let playerData = null;
+        function createShip(typeIndex, isPlayer, scaleMultiplier = 1, splitCount = 0) {
             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 bodyMaterial = new THREE.MeshStandardMaterial({
                 color: isPlayer ? 0x00ff00 : 0xff0000,
                 metalness: 0.8,
             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 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,
                         0,
+                        (i < 2 ? 0.5 : -0.5) * 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 jetpack = new THREE.Mesh(jetpackGeometry, new THREE.MeshStandardMaterial({ color: 0xaaaaaa }));
+                jetpack.position.set(0, -0.5 * scaleMultiplier, 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 },
                 active: true,
                 speed: 0,
                 currentWaypoint: 0,
+                lastGatePass: 0,
+                isPlayer: isPlayer,
+                splitCount: splitCount,
+                typeIndex: typeIndex
             };
             scene.add(ship);
+            if (!isPlayer) aiShips.push(ship);
             return ship;
         }
             const typeIndex = Math.floor(Math.random() * shipTypes.length);
             playerShip = createShip(typeIndex, true);
             playerData = playerShip.userData;
             Object.keys(skills).forEach(skill => skills[skill].level = 0);
+            score = 0;
+            document.getElementById('score').textContent = `Score: ${score}`;
             updateCharacterSheet();
             updateSkillsSheet();
+            updateLeaderboard();
         }
         // AI opponents
         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,
                 damage: skills.shotPower.effect(skills.shotPower.level)
             };
+            scene.add(missile);
+            missiles.push(missile);
+            return missile;
         }
         // Particle system for explosions
         }
         // 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);
             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.castShadow = true;
             building.receiveShadow = true;
+            building.userData = {
+                splitCount: splitCount,
+                maxHP: 10 * scaleMultiplier,
+                currentHP: 10 * scaleMultiplier,
+                width: width,
+                depth: depth,
+                height: height
+            };
             return building;
         }
             'Miami Beach Boulevard': { segments: ['straight', 'right', 'straight', 'left', 'gap', 'straight'], length: 48, streetWidth: 30, buildingHeight: 40 },
             'Florida Keys Canal Cruise': { segments: ['straight', 'left', 'right', 'gap', 'left', 'straight'], length: 45, streetWidth: 28, buildingHeight: 35 },
             'Orlando Theme Park Tour': { segments: ['straight', 'up', 'right', 'down', 'left', 'gap', 'straight'], length: 48, streetWidth: 30, buildingHeight: 40 },
+            'Tampa Bay Finance District Drift': { segments: ['straight', 'right', 'left', 'straight', 'gap', 'right', 'standard'], length: 50, streetWidth: 32, buildingHeight: 45 },
             'Jacksonville River City Run': { segments: ['straight', 'left', 'right', 'gap', 'left', 'straight'], length: 45, streetWidth: 28, buildingHeight: 35 },
             'Fort Lauderdale Cruise Port Circuit': { segments: ['straight', 'straight', 'straight', 'gap', 'straight'], length: 55, streetWidth: 35, buildingHeight: 50 },
             'Key West Sunset Sprint': { segments: ['straight', 'left', 'up', 'right', 'down', 'gap', 'straight'], length: 48, streetWidth: 30, buildingHeight: 40 },
         // 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);
+                    }
+                    logAction(playerName, score, 'Shot Fired');
                 }
             }
         });
+        // Leaderboard logging
+        function logAction(name, points, action) {
+            const logEntry = {
+                player: name,
+                score: points,
+                action: action,
+                timestamp: new Date().toISOString()
+            };
+            let logs = JSON.parse(localStorage.getItem('gameLogs') || '[]');
+            logs.push(logEntry);
+            localStorage.setItem('gameLogs', JSON.stringify(logs));
+            updateLeaderboard();
+        }
+        function updateLeaderboard() {
+            let logs = JSON.parse(localStorage.getItem('gameLogs') || '[]');
+            document.getElementById('logDisplay').innerHTML = logs.slice(-5).map(log =>
+                `${log.player} (${log.score} pts): ${log.action} at ${new Date(log.timestamp).toLocaleString()}`
+            ).join('<br>') || 'No history!';
+        }
         // Update character sheet
         function updateCharacterSheet() {
             document.getElementById('ship-type').textContent = `Type: ${playerData.type}`;
             createExplosion(hitPosition);
             if (ship === playerShip) {
                 updateCharacterSheet();
+                logAction(playerName, score, 'Ship Damaged');
             }
             checkShipStatus(ship);
         }
+        function checkShipStatus(ship, hitPosition) {
             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}`;
+                    logAction(playerName, score, 'Enemy Destroyed');
+                }
                 if (ship === playerShip) {
                     document.getElementById('status').textContent = 'Status: Destroyed';
+                    logAction(playerName, score, 'Player Destroyed');
                     endRace();
                 }
             }
         }
+        // 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}`;
+                logAction(playerName, score, 'Building Destroyed');
+            }
+        }
         // Pickup handling
         function updatePickups() {
             for (let i = pickups.length - 1; i >= 0; i--) {
                     if (skill.level < skill.maxLevel) {
                         skill.level++;
                         updateSkillsSheet();
+                        logAction(playerName, score, `Picked ${pickup.userData.skill}`);
                     }
                     scene.remove(pickup);
                     pickups.splice(i, 1);
             }
         }
+        // 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;
                 isJumping = true;
                 jumpHeight = 5;
                 jumpCooldown = 60;
+                logAction(playerName, score, 'Jumped');
             }
             if (isJumping) {
                 jumpHeight -= 0.2;
             });
         }
         // Explosion update
         const explosions = [];
         function updateExplosions() {
             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;
             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();
+            logAction(playerName, score, `Started ${trackName}`);
         }
         // Restart race
         function restartRace() {
             scene.remove(playerShip);
             explosions.forEach(e => scene.remove(e));
             pickups.forEach(p => scene.remove(p));
+            missiles.forEach(m => scene.remove(m));
             explosions.length = 0;
             pickups.length = 0;
+            missiles.length = 0;
             initPlayer();
             startRace(currentTrack);
         }
         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}`);
+            logAction(playerName, score, 'Race Ended');
         }
         // Gallery
             if (gameState === 'racing') {
                 updatePlayer();
                 updateAI();
+                updateMissiles();
                 updateExplosions();
                 raceTime += 1 / 60;
                 document.getElementById('time').textContent = `Time: ${raceTime.toFixed(2)}`;