mountain,

  trees = [],

  clouds = [];

​

function setup() {

  createCanvas(400, 400);

  car = new Car(25, 275, 5);

  mountain = new Mountain(0, 110, 0.5)

  for (i = 0; i < 4; i++) {

    let tree = new Tree(i * 120, 200, 10);

    trees.push(tree);

​

    let cloud = new Cloud(i * 100 + random(0, 100), random(25, 150), 10);

    clouds.push(cloud);

  }

}

​

function draw() {

  background('#C0D6DF');

  noStroke();

​

  //mountains

  mountain.display();

​

  if (mountain.x < -368) {

    mountain.x = 400;

  }

​

  mountain.update();

​

  //grass

  fill('#7B8A53');

  rect(0, 250, 400, 150);

​

  //road

  fill('#4F6D7A');

  rect(0, 325, 400, 75);

​

  //sun

  fill('#E8DAB2')

  rect(310, 10, 80, 80, 10);

​

  //clouds

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

    clouds[i].display();

    clouds[i].x -= 0.2;

​

    if (clouds[i].x < -88) {

      clouds[i].x = 400 + random(0, 100);

      clouds[i].y = random(25, 150);

    }

​

    clouds[i].update();

  }

​

  //trees

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

    trees[i].display();

​

    if (trees[i].x < -88) {

      trees[i].x = 400;

    }

​

    trees[i].update();

  }

​

​

  //car

  car.display();

  // car.drive();

​

  //instruction text

  fill('white');

  textAlign(CENTER);

  textSize(32);

  text('PRESS SPACE TO DRIVE', 200, 385);

}

​

​

class Object_Base {

  constructor(x, y, maxSpeed) {

    this.x = x;

    this.y = y;

    this.maxSpeed = maxSpeed;

    this.velocity = 0;

    this.accel = 0.2;

  }

​

  //movement controls

  update() {

    if (keyIsDown(32) /*spacebar*/ ) {

      this.velocity += this.accel;

    } else if (this.velocity > 0) {

      this.velocity -= this.accel;

    } else {

      this.velocity = 0;

    }

    if (this.velocity > this.maxSpeed) {

      this.velocity = this.maxSpeed;

    }

    this.x -= this.velocity;

  }

​

  //basic shape for clouds, trees

  shape(color) {

    noStroke();

    fill(color);

    rect(this.x, this.y + 36, 88, 26, 5);

    rect(this.x + 10, this.y + 18, 60, 26, 5);

    rect(this.x + 28, this.y, 32, 26, 5);

  }

}

​

​

​

class Car extends Object_Base {

  constructor(x, y, maxSpeed) {

    super(x, y, maxSpeed);

  }

​

  display() {

    noStroke();

    //body

    fill('#DD6E42');

    rect(this.x, this.y + 30, 146, 40, 5);

    rect(this.x + 14, this.y, 100, 48, 5);

    //wheels

    fill('#160F29')

    rect(this.x + 14, this.y + 50, 28, 28, 5);

    rect(this.x + 102, this.y + 50, 28, 28, 5);

    //window

    fill('#C0D6DF')

    rect(this.x + 18, this.y + 4, 10, 26, 5);

    rect(this.x + 32, this.y + 4, 32, 26, 5);

    rect(this.x + 68, this.y + 4, 42, 26, 5);

  }

​

​

  drive() {

    //

  }

}

​

​

​

class Tree extends Object_Base {

  constructor(x, y, maxSpeed) {

    super(x, y, maxSpeed);

  }

​

  display() {

    //trunk

    noStroke();

    fill("#6D435A");

    rect(this.x + 28, this.y + 48, 32, 50, 5);

    //leaves

    this.shape('#6E7E42');

  }

}

​

​

​

class Cloud extends Object_Base {

  constructor(x, y, maxSpeed) {

    super(x, y, maxSpeed);

  }

​

  display() {

    this.shape('#EAEAEA');

  }

}

​

​

​

class Mountain extends Object_Base {

  constructor(x, y, maxSpeed) {

    super(x, y, maxSpeed);

  }

​

  display() {

    noStroke();

    fill('#D6D6D6');

    rect(this.x, this.y + 80, 368, 60, 5);

    fill('#DADADA');

    rect(this.x + 40, this.y + 40, 248, 60, 5);

    fill('#DDDDDD');

    rect(this.x + 118, this.y, 134, 60, 5);

  }

}