Update index.html

index.html

@@ -95,9 +95,9 @@
       // Game configuration
       const config = {
         roadLength: 10000,
-        roadWidth: 10,
-        playerSpeed: 0.2,
-        trafficSpeed: 0.3,
+        roadWidth: 15, // Wider road for 3 lanes
+        playerSpeed: 0.3, // Decreased player speed
+        trafficSpeed: 0.8, // Increased base traffic speed
         colors: [
           { color: 0xff0000, name: "Red" },
           { color: 0x0000ff, name: "Blue" },
@@ -105,11 +105,21 @@
           { color: 0x000000, name: "Black" },
           { color: 0x800080, name: "Purple" },
           { color: 0xa52a2a, name: "Brown" },
+          { color: 0xffa500, name: "Orange" },
+          { color: 0xffff00, name: "Yellow" },
         ],
-        maxTrafficCars: 30,
-        lanePositions: [-3.5, 0, 3.5],
+        maxTrafficVehicles: 220, // Increased for more traffic
+        clusterChance: 0.9, // Chance of creating a vehicle cluster
+        clusterSize: { min: 2, max: 5 }, // Range of vehicles in a cluster
+        clusterSpacing: { min: 3, max: 5 }, // Spacing between vehicles in a cluster
+        lanePositions: [-5, 0, 5], // Three lanes
+        vehicleTypes: ["car", "bus", "truck"],
+        vehicleProperties: {
+          car: { length: 2, width: 1, height: 0.8, speed: 1.1 }, // Increased speed
+          bus: { length: 3.5, width: 1.2, height: 1.2, speed: 1 }, // Increased speed
+          truck: { length: 4, width: 1.3, height: 1.5, speed: 0.9 }, // Increased speed
+        },
       };
-
       // Game state
       const state = {
         score: 0,
@@ -122,7 +132,7 @@
 
       // Scene, camera, and renderer setup
       const scene = new THREE.Scene();
-      scene.fog = new THREE.Fog(0x87ceeb, 10, 50);
+      scene.fog = new THREE.Fog(0x87ceeb, 10, 70);
       const camera = new THREE.PerspectiveCamera(
         75,
         window.innerWidth / window.innerHeight,
@@ -136,79 +146,168 @@
       // Lighting
       const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
       scene.add(ambientLight);
-
       const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
       directionalLight.position.set(0, 10, 0);
       scene.add(directionalLight);
 
-      // Create a car model
-      function createCarModel(color, isPlayer = false) {
+      // Create vehicle models
+      function createVehicleModel(type, color, isPlayer = false) {
+        const props = config.vehicleProperties[type];
         const group = new THREE.Group();
+        const baseHeight = 0.6;
 
-        // Adjust the base height to ensure wheels are above the road
-        const carHeight = 0.6;
-
-        // Base of the car
-        const baseGeometry = new THREE.BoxGeometry(1, 0.4, 2);
+        // Base of the vehicle
+        const baseGeometry = new THREE.BoxGeometry(
+          props.width,
+          props.height * 0.5,
+          props.length
+        );
         const baseMaterial = new THREE.MeshPhongMaterial({ color: color });
         const base = new THREE.Mesh(baseGeometry, baseMaterial);
-        base.position.y = carHeight - 0.2;
+        base.position.y = baseHeight;
         group.add(base);
 
-        // Roof
-        const roofGeometry = new THREE.BoxGeometry(0.8, 0.4, 1.5);
-        const roofMaterial = new THREE.MeshPhongMaterial({
-          color: isPlayer ? 0xff4500 : color,
-          opacity: 1,
-          transparent: false,
-        });
-        const roof = new THREE.Mesh(roofGeometry, roofMaterial);
-        roof.position.y = carHeight + 0.2;
-        group.add(roof);
-
-        // Windows
-        const windowMaterial = new THREE.MeshPhongMaterial({
-          color: 0x87ceeb,
-          opacity: 0.7,
-          transparent: true,
-        });
-
-        const windowFront = new THREE.Mesh(
-          new THREE.PlaneGeometry(0.8, 0.4),
-          windowMaterial
-        );
-        windowFront.rotation.y = Math.PI / 2;
-        windowFront.position.set(0.51, carHeight + 0.2, 0);
-        group.add(windowFront);
+        // Roof - different for each type
+        if (type === "car") {
+          const roofGeometry = new THREE.BoxGeometry(
+            props.width * 0.8,
+            props.height * 0.5,
+            props.length * 0.75
+          );
+          const roofMaterial = new THREE.MeshPhongMaterial({
+            color: isPlayer ? 0xff4500 : color,
+            opacity: 1,
+            transparent: false,
+          });
+          const roof = new THREE.Mesh(roofGeometry, roofMaterial);
+          roof.position.y = baseHeight + props.height * 0.5;
+          group.add(roof);
+        } else if (type === "bus") {
+          const roofGeometry = new THREE.BoxGeometry(
+            props.width,
+            props.height * 0.5,
+            props.length * 0.95
+          );
+          const roofMaterial = new THREE.MeshPhongMaterial({
+            color: isPlayer ? 0xff4500 : color,
+          });
+          const roof = new THREE.Mesh(roofGeometry, roofMaterial);
+          roof.position.y = baseHeight + props.height * 0.5;
+          group.add(roof);
+        } else if (type === "truck") {
+          // Cab for truck
+          const cabGeometry = new THREE.BoxGeometry(
+            props.width,
+            props.height * 0.7,
+            props.length * 0.3
+          );
+          const cabMaterial = new THREE.MeshPhongMaterial({
+            color: isPlayer ? 0xff4500 : color,
+          });
+          const cab = new THREE.Mesh(cabGeometry, cabMaterial);
+          cab.position.y = baseHeight + props.height * 0.35;
+          cab.position.z = props.length * 0.35;
+          group.add(cab);
+
+          // Cargo container
+          const cargoGeometry = new THREE.BoxGeometry(
+            props.width * 1.1,
+            props.height * 1,
+            props.length * 0.65
+          );
+          const cargoMaterial = new THREE.MeshPhongMaterial({
+            color: 0x888888,
+          });
+          const cargo = new THREE.Mesh(cargoGeometry, cargoMaterial);
+          cargo.position.y = baseHeight + props.height * 0.5;
+          cargo.position.z = -props.length * 0.17;
+          group.add(cargo);
+        }
 
-        const windowBack = windowFront.clone();
-        windowBack.position.set(-0.51, carHeight + 0.2, 0);
-        group.add(windowBack);
+        // Windows (for cars and buses)
+        if (type !== "truck") {
+          const windowMaterial = new THREE.MeshPhongMaterial({
+            color: 0x87ceeb,
+            opacity: 0.7,
+            transparent: true,
+          });
+
+          // Side windows
+          const windowSize = type === "car" ? 0.4 : 0.6;
+          const windowFront = new THREE.Mesh(
+            new THREE.PlaneGeometry(props.width * 0.9, windowSize),
+            windowMaterial
+          );
+          windowFront.rotation.y = Math.PI / 2;
+          windowFront.position.set(
+            props.width / 2 + 0.01,
+            baseHeight + props.height * 0.5,
+            0
+          );
+          group.add(windowFront);
+
+          const windowBack = windowFront.clone();
+          windowBack.position.set(
+            -props.width / 2 - 0.01,
+            baseHeight + props.height * 0.5,
+            0
+          );
+          windowBack.rotation.y = -Math.PI / 2;
+          group.add(windowBack);
+        }
 
         // Wheels
-        const wheelGeometry = new THREE.CylinderGeometry(0.2, 0.2, 0.2, 16);
+        const wheelRadius = type === "car" ? 0.2 : 0.3;
+        const wheelGeometry = new THREE.CylinderGeometry(
+          wheelRadius,
+          wheelRadius,
+          0.2,
+          16
+        );
         const wheelMaterial = new THREE.MeshPhongMaterial({ color: 0x000000 });
 
-        // Front left wheel
-        const wheelFL = new THREE.Mesh(wheelGeometry, wheelMaterial);
-        wheelFL.rotation.z = Math.PI / 2;
-        wheelFL.position.set(-0.4, carHeight - 0.4, 0.7);
-        group.add(wheelFL);
+        // Position wheels based on vehicle type
+        const wheelOffsetX = (props.width / 2) * 0.8;
+        const wheelOffsetY = baseHeight - props.height * 0.3;
+        let wheelZPositions;
+
+        if (type === "car") {
+          wheelZPositions = [props.length / 2 - 0.3, -props.length / 2 + 0.3];
+        } else if (type === "bus") {
+          wheelZPositions = [
+            props.length / 2 - 0.5,
+            0,
+            -props.length / 2 + 0.5,
+          ];
+        } else {
+          // truck
+          wheelZPositions = [
+            props.length / 2 - 0.5,
+            0,
+            -props.length / 2 + 0.5,
+          ];
+        }
 
-        // Front right wheel
-        const wheelFR = wheelFL.clone();
-        wheelFR.position.set(0.4, carHeight - 0.4, 0.7);
-        group.add(wheelFR);
+        // Add wheels
+        wheelZPositions.forEach((zPos) => {
+          const wheelLeft = new THREE.Mesh(wheelGeometry, wheelMaterial);
+          wheelLeft.rotation.z = Math.PI / 2;
+          wheelLeft.position.set(-wheelOffsetX, wheelOffsetY, zPos);
+          group.add(wheelLeft);
 
-        // Back left wheel
-        const wheelBL = wheelFL.clone();
-        wheelBL.position.set(-0.4, carHeight - 0.4, -0.7);
-        group.add(wheelBL);
+          const wheelRight = wheelLeft.clone();
+          wheelRight.position.set(wheelOffsetX, wheelOffsetY, zPos);
+          group.add(wheelRight);
+        });
 
-        // Back right wheel
-        const wheelBR = wheelFL.clone();
-        wheelBR.position.set(0.4, carHeight - 0.4, -0.7);
-        group.add(wheelBR);
+        // Add collision box
+        group.userData = {
+          type: type,
+          width: props.width,
+          length: props.length,
+          speed: props.speed,
+          boundingBox: new THREE.Box3().setFromObject(group),
+        };
 
         return group;
       }
@@ -232,52 +331,114 @@
       road.rotation.x = -Math.PI / 2;
       scene.add(road);
 
+      // Lane markings
+      function createLaneMarkings() {
+        // Lane dividers
+        for (let i = -1; i <= 1; i += 2) {
+          const lineGeometry = new THREE.PlaneGeometry(0.15, config.roadLength);
+          const lineMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
+          const line = new THREE.Mesh(lineGeometry, lineMaterial);
+          line.rotation.x = -Math.PI / 2;
+          line.position.x = i * 2.5; // Center line between lanes
+          line.position.y = 0.01; // Slightly above road
+          scene.add(line);
+        }
+
+        // Dashed center lines
+        for (
+          let z = -config.roadLength / 2;
+          z < config.roadLength / 2;
+          z += 5
+        ) {
+          const dashGeometry = new THREE.PlaneGeometry(0.15, 3);
+          const dashMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
+
+          // Left dashed line
+          const leftDash = new THREE.Mesh(dashGeometry, dashMaterial);
+          leftDash.rotation.x = -Math.PI / 2;
+          leftDash.position.set(-2.5, 0.01, z);
+          scene.add(leftDash);
+
+          // Right dashed line
+          const rightDash = new THREE.Mesh(dashGeometry, dashMaterial);
+          rightDash.rotation.x = -Math.PI / 2;
+          rightDash.position.set(2.5, 0.01, z);
+          scene.add(rightDash);
+        }
+      }
+
       // Player Car
       const playerColor = 0xff0000;
-      const playerCar = createCarModel(playerColor, true);
+      const playerCar = createVehicleModel("car", playerColor, true);
       playerCar.position.y = 0;
       scene.add(playerCar);
 
-      // Traffic Cars
-      const trafficCars = [];
-      function createTrafficCar() {
+      // Traffic Vehicles
+      const trafficVehicles = [];
+      function createTrafficVehicle() {
+        // Randomly select vehicle type
+        const vehicleType =
+          config.vehicleTypes[
+            Math.floor(Math.random() * config.vehicleTypes.length)
+          ];
         const colorObj =
           config.colors[Math.floor(Math.random() * config.colors.length)];
-        const car = createCarModel(colorObj.color);
 
-        // Randomize lane position
-        car.position.x =
-          config.lanePositions[
-            Math.floor(Math.random() * config.lanePositions.length)
-          ];
+        const vehicle = createVehicleModel(vehicleType, colorObj.color);
 
-        // Stagger car positions
-        car.position.z = (-Math.random() * config.roadLength) / 2;
+        // Place in a random lane
+        const laneIndex = Math.floor(
+          Math.random() * config.lanePositions.length
+        );
+        vehicle.position.x = config.lanePositions[laneIndex];
+
+        // Stagger vehicle positions - longer range for traffic jam effect
+        vehicle.position.z = -Math.random() * config.roadLength * 0.75;
 
-        scene.add(car);
-        trafficCars.push(car);
+        // Add to scene and array
+        scene.add(vehicle);
+        trafficVehicles.push(vehicle);
+
+        // Update the bounding box after positioning
+        vehicle.userData.boundingBox.setFromObject(vehicle);
       }
 
       // Spawn initial traffic
       function initTraffic() {
-        for (let i = 0; i < config.maxTrafficCars; i++) {
-          createTrafficCar();
+        createLaneMarkings();
+        for (let i = 0; i < config.maxTrafficVehicles; i++) {
+          createTrafficVehicle();
         }
       }
 
       // Camera positioning
-      camera.position.y = 2;
-      camera.position.z = 5;
+      camera.position.y = 3;
+      camera.position.z = 7;
       camera.lookAt(playerCar.position);
 
-      // Collision detection
+      // Improved collision detection using bounding boxes
       function checkCollisions() {
-        trafficCars.forEach((car) => {
-          const distance = playerCar.position.distanceTo(car.position);
-          if (distance < 1) {
+        if (state.gameOver) return;
+
+        // Update player bounding box
+        playerCar.userData.boundingBox.setFromObject(playerCar);
+
+        for (let i = 0; i < trafficVehicles.length; i++) {
+          // Update vehicle bounding box
+          trafficVehicles[i].userData.boundingBox.setFromObject(
+            trafficVehicles[i]
+          );
+
+          // Check for intersection
+          if (
+            playerCar.userData.boundingBox.intersectsBox(
+              trafficVehicles[i].userData.boundingBox
+            )
+          ) {
             endGame();
+            break;
           }
-        });
+        }
       }
 
       // Format time to MM:SS
@@ -304,13 +465,13 @@
 
         if (
           keys["ArrowLeft"] &&
-          playerCar.position.x > -(config.roadWidth / 2 - 0.5)
+          playerCar.position.x > -(config.roadWidth / 2 - 1)
         ) {
           playerCar.position.x -= config.playerSpeed;
         }
         if (
           keys["ArrowRight"] &&
-          playerCar.position.x < config.roadWidth / 2 - 0.5
+          playerCar.position.x < config.roadWidth / 2 - 1
         ) {
           playerCar.position.x += config.playerSpeed;
         }
@@ -326,21 +487,41 @@
         }
       }
 
-      // Update traffic cars
-      function updateTrafficCars() {
+      // Update traffic vehicles
+      function updateTrafficVehicles() {
         // Increase difficulty based on score and time
         state.difficultyMultiplier =
-          1 + state.score / 1000 + state.elapsedTime / 60000;
-
-        trafficCars.forEach((car, index) => {
-          // Move cars forward with increasing speed
-          car.position.z += config.trafficSpeed * state.difficultyMultiplier;
+          1 + state.score / 2000 + state.elapsedTime / 80000;
+
+        trafficVehicles.forEach((vehicle, index) => {
+          // Move vehicles with their specific speeds
+          const vehicleSpeed =
+            config.trafficSpeed *
+            vehicle.userData.speed *
+            state.difficultyMultiplier;
+
+          vehicle.position.z += vehicleSpeed;
+
+          // Update bounding box with new position
+          vehicle.userData.boundingBox.setFromObject(vehicle);
+
+          // Award points when successfully dodging a vehicle
+          if (
+            !vehicle.userData.passed &&
+            vehicle.position.z > playerCar.position.z
+          ) {
+            vehicle.userData.passed = true;
+            state.score++;
+            document.getElementById(
+              "score"
+            ).textContent = `Score: ${state.score}`;
+          }
 
-          // Remove cars that are out of view and create new ones
-          if (car.position.z > 10) {
-            scene.remove(car);
-            trafficCars.splice(index, 1);
-            createTrafficCar();
+          // Remove vehicles that are out of view and create new ones
+          if (vehicle.position.z > 15) {
+            scene.remove(vehicle);
+            trafficVehicles.splice(index, 1);
+            createTrafficVehicle();
           }
         });
       }
@@ -356,16 +537,21 @@
       // Animation loop
       function animate() {
         requestAnimationFrame(animate);
-
         updatePlayerMovement();
-        updateTrafficCars();
+        updateTrafficVehicles();
         checkCollisions();
         updateTimer();
 
         // Update camera to follow player
         camera.position.x = playerCar.position.x;
-        camera.position.z = playerCar.position.z + 5;
-        camera.lookAt(playerCar.position);
+        camera.position.z = playerCar.position.z + 7; // Positioned further back
+        camera.lookAt(
+          new THREE.Vector3(
+            playerCar.position.x,
+            playerCar.position.y,
+            playerCar.position.z - 3
+          )
+        );
 
         renderer.render(scene, camera);
       }
@@ -384,13 +570,13 @@
         document.getElementById("gameOverScreen").style.display = "none";
         document.getElementById("hud").style.display = "block";
 
-        // Reset player and traffic positions
+        // Reset player position
         playerCar.position.x = 0;
         playerCar.position.z = 0;
 
         // Clear existing traffic
-        trafficCars.forEach((car) => scene.remove(car));
-        trafficCars.length = 0;
+        trafficVehicles.forEach((vehicle) => scene.remove(vehicle));
+        trafficVehicles.length = 0;
 
         // Respawn traffic
         initTraffic();
@@ -407,15 +593,13 @@
       function endGame() {
         state.gameOver = true;
 
-        // Stop rendering
-        cancelAnimationFrame(animate);
-
         // Show game over screen
         document.getElementById("hud").style.display = "none";
         document.getElementById("gameOverScreen").style.display = "flex";
         document.getElementById("finalScore").textContent = `Score: ${
           state.score
-        }\nTime: ${formatTime(state.elapsedTime)}`;
+        }
+Time: ${formatTime(state.elapsedTime)}`;
       }
 
       // Event Listeners
@@ -434,4 +618,4 @@
       });
     </script>
   </body>
-</html>
+</html>