let numCars = 5; // Number of cars

let roadLines = [];

let buildings = []; // Array to store building objects

let crashFlash = null; // Variable to store the crash flash effect

​

function setup() {

  createCanvas(800, 600);

  // Create cars with random starting positions and speeds

  for (let i = 0; i < numCars; i++) {

    let x = random(-width, width);

    let y = height - 120; // Place cars at the bottom of the canvas, above the road

    let speed = random(2, 5);

    let carColor = color(random(100, 255), random(100, 255), random(100, 255));

    cars.push(new Car(x, y, speed, carColor));

  }

​

  // Create road lines

  for (let i = 0; i < 10; i++) {

    roadLines.push(new RoadLine(i * 80, height - 60)); // Align road lines on the road at the bottom

  }

​

  // Create buildings without space between road and buildings

  for (let i = 0; i < 8; i++) {

    buildings.push(new Building(i * 100 + random(-20, 20), random(50, 150), random(100, 250)));

  }

}

​

function draw() {

  background(150, 200, 255); // Light pastel blue sky

  drawSunlight();

  drawCityscape();

  drawRoad();

​

  // Loop through road lines and cars, move and display them

  for (let line of roadLines) {

    line.move();

    line.display();

  }

  for (let car of cars) {

    car.move();

    car.display();

    // Check for crash (mouse collision)

    if (car.checkCrash(mouseX, mouseY)) {

      crashFlash = car; // Trigger crash flash on the car

      car.crash(); // Stop the car if it crashes

    }

  }

​

  // If a crash happens, draw the flash effect

  if (crashFlash) {

    drawCrashFlash(crashFlash.x, crashFlash.y);

  }

}

​

function drawRoad() {

  fill(90); // Darker road color

  rect(0, height - 120, width, 120); // Road at the bottom

​

  stroke(255);

  strokeWeight(4);

  // Draw road lines

  for (let i = 0; i < roadLines.length; i++) {

    roadLines[i].display();

  }

}

​

function drawCityscape() {

  for (let building of buildings) {

    building.display();

  }

}

​

function drawSunlight() {

  fill(255, 204, 0, 150); // Sunlight color

  ellipse(650, 100, 100, 100); // Sunlight effect in the top-right corner

}

​

// Function to draw a yellow crash flash effect

function drawCrashFlash(x, y) {

  noStroke();

  fill(255, 255, 0, 200); // Yellow color for crash flash

  ellipse(x + random(-20, 20), y + random(-20, 20), 60, 60); // Flash effect with random variation for realism

}

​

// Car class definition

class Car {

  constructor(x, y, speed, carColor) {

    this.x = x;

    this.y = y;

    this.speed = speed;

    this.carColor = carColor;

    this.width = random(110, 140);

    this.height = this.width * 0.45;

    this.isCrashed = false;

  }

​

  move() {

    if (!this.isCrashed) {

      this.x += this.speed;

      if (this.x > width) {

        this.x = -this.width;

      }

    }

  }

​

  display() {

    fill(this.carColor);

    stroke(0);

    strokeWeight(2);

    // Car body with rounded corners for realism

    rect(this.x, this.y, this.width, this.height, 15);

​

    // Windshield

    fill(200, 200, 255);

    quad(this.x + this.width * 0.2, this.y, 

         this.x + this.width * 0.8, this.y, 

         this.x + this.width * 0.7, this.y - this.height * 0.5, 

         this.x + this.width * 0.3, this.y - this.height * 0.5);

​

    // Roof

    fill(this.carColor);

    rect(this.x + this.width * 0.25, this.y - this.height * 0.5, this.width * 0.5, this.height * 0.2);

​

    // Headlights

    fill(255, 255, 100);

    ellipse(this.x + this.width * 0.1, this.y + this.height * 0.3, 15, 15);

    ellipse(this.x + this.width * 0.9, this.y + this.height * 0.3, 15, 15);

​

    // Taillights

    fill(255, 0, 0);

    ellipse(this.x + this.width * 0.1, this.y + this.height * 0.7, 10, 10);

    ellipse(this.x + this.width * 0.9, this.y + this.height * 0.7, 10, 10);

​

    // Wheels with better proportions

    fill(0);

    ellipse(this.x + this.width * 0.2, this.y + this.height, this.width * 0.2, this.width * 0.2);

    ellipse(this.x + this.width * 0.8, this.y + this.height, this.width * 0.2, this.width * 0.2);

​

    // Grille

    fill(50);

    rect(this.x - 5, this.y + this.height * 0.3, 5, this.height * 0.4);

  }

​

  checkCrash(mouseX, mouseY) {

    if (

      mouseX > this.x && mouseX < this.x + this.width &&

      mouseY > this.y && mouseY < this.y + this.height

    ) {

      return true;

    }

    return false;

  }

​

  crash() {

    this.isCrashed = true; // Car stops moving

    this.speed = 0; // Set speed to 0 for a realistic stop

  }

}

​

// Road line class definition

class RoadLine {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.speed = 3;

  }

​

  move() {

    this.x += this.speed;

    if (this.x > width) {

      this.x = -80;

    }

  }

​

  display() {

    fill(255);

    noStroke();

    rect(this.x, this.y, 40, 5);

  }

}

​

// Building class definition

class Building {

  constructor(x, w, h) {

    this.x = x;

    this.w = w;

    this.h = h;

  }

​

  display() {

    fill(180, 180, 220);

    rect(this.x, height - this.h - 120, this.w, this.h); // Place buildings directly above the road

​

    // Windows with variation for realism

    fill(255, 255, 180);

    for (let i = this.x + 10; i < this.x + this.w - 10; i += 20) {

      for (let j = height - this.h - 110; j < height - 120; j += 30) {

        rect(i, j, 10, 15);

      }

    }

  }

}

​