let clouds;

let ground;

let tree1, tree2,tree3;

let vulture, gazelle, elephant;

let trees = [];

let treeType = [];

let vultures = [];

let gazelles = [];

let elephants = [];

let vultureF;

let gazelleF;

let elephantF;

let xCloud1 = 0; 

let xCloud2 = 360;

let xCloud3 = -360;

let xGrass1 = 0; 

let xGrass2 = 360; 

let xGrass3 = -360; 

let xGround1 = 0; 

let xGround2 = 360; 

let xGround3 = -360; 

​

function preload(){

  grass = loadImage('grassfinal.png');

  clouds = loadImage('clouds.png');

  tree1 = loadImage('tree1.png');

  tree2 = loadImage('tree2.png');

  tree3 = loadImage('tree3.png');

  ground = loadImage('ground.png');

  vulture = loadImage('vulture.png');

  gazelle = loadImage('gazelle.png');

  elephant = loadImage('elephant.png');

  treeType.push(tree1);

  treeType.push(tree2);

  treeType.push(tree3);

}

​

function setup() {

  createCanvas(720, 600);

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

    let x, w, h, randType;

    let overlap = true;

    let attempts = 0;

    while(overlap && attempts < 100){

      x = random(15, 575); 

      w = random(200, 250);

      h = random(200, 300); 

      overlap = false;

      for (let tree of trees){

        if (abs(x-tree.x) < 150){

          overlap = true;

          break;

        }

      }

      attempts++;

    }

    if (!overlap) {

      trees.push(new Tree(x, 515, w, h, treeType[i])); 

      trees.push(new Tree(x-360, 515, w, h, treeType[i])); 

    }

  }

  let x = 0;  

  let y1 = random(150, 200);  

  vultureF = new Vulture(x, y1, 60, 60);  

  let y2 = 415;

  gazelleF = new Gazelle(width, y2, 100, 100);  

  let y3 = 380;

  elephantF = new Elephant(x, y3, 175, 175);  

​

}

​

function draw() {

  background('#D0E0E6');

  drawClouds();

  drawGround();

  for (let tree of trees) {

    tree.move();

    tree.display(); 

  }

  vultureF.move();

  vultureF.display();

  gazelleF.move();

  gazelleF.display();

  elephantF.move();

  elephantF.display();

  if (mouseIsPressed){

    background('#27295A');

    drawClouds();

    drawGround();

    for (let tree of trees) {

      tree.displayAtNight();

    }

    vultureF.displayAtNight();  

    gazelleF.displayAtNight();

    elephantF.displayAtNight();

  }

}

​

function drawGround(){

    if (mouseIsPressed){

    fill('#7D5528');

  }

  else{

    fill('#B2BA4AD3');

  }

  noStroke();

  rect(0,490,800,150);

​

  xGrass1 -= 1; 

  xGrass2 -= 1; 

  xGrass3 -= 1; 

  xGround1 -= 1; 

  xGround2 -= 1; 

  xGround3 -= 1; 

  if (xGrass1 < -350) {

    xGrass1 = width;

  }

  if (xGrass2 < -350) {

    xGrass2 = width;

  }

  if (xGrass3 < -350) {

    xGrass3 = width;

  }

  if (xGround1 < -350) {

    xGround1 = width;

  }

  if (xGround2 < -350) {

    xGround2 = width;

  }

  if (xGround3 < -350) {

    xGround3 = width;

  }

  tint(255, 255, 255, 120);

  image(ground,xGround1,300);

  image(ground,xGround2,300);

  image(ground,xGround3,300);

  tint(255, 255, 255, 150);

  image(grass,xGrass1,430);

  image(grass,xGrass2,430);

  image(grass,xGrass3,430);

}

​

function drawClouds(){

  tint(255, 255, 255, 125);

  xCloud1 -= 1; 

  xCloud2 -= 1; 

  xCloud3 -= 1;

  if (xCloud1 < -350) {

    xCloud1 = width;

  }

  if (xCloud2 < -350) {

    xCloud2 = width;

  }

  if (xCloud3 < -350) {

    xCloud3 = width;

  }

  image(clouds, xCloud1, 0, 350, 170);

  image(clouds, xCloud2, 0, 350, 170);

  image(clouds, xCloud3, 0, 350, 170);

}

​

class Tree {

  constructor(x, y, w, h, treeType) {

    this.x = x;

    this.y = y;

    this.width = w+75;

    this.height = h+150;

    this.treeImage = treeType;

    this.speed = 1;

  }

​

  move() {

    this.x -= this.speed;

    if (this.x < -this.width) {

      this.x = width;

    }

  }

  display() {

    tint(255, 255, 255, 205); 

    image(this.treeImage, this.x, this.y - this.height, this.width, this.height); 

  }

​

  displayAtNight() {

    tint(255, 255, 255, 120); 

    image(this.treeImage, this.x, this.y - this.height, this.width, this.height); 

  }

}

​

class Vulture {

  constructor(x, y, w, h) {

    this.x = x;

    this.y = y;

    this.width = w;

    this.height = h;

    this.speed = 3;  

  }

​

  move() {

    this.x += this.speed;

    if (this.x > width) {

      this.x = -this.width;

      this.y = random(100, 200);

    }

  }

​

  display() {

    tint(255, 255, 255, 220);  

    image(vulture, this.x, this.y, this.width, this.height); 

  }

​

  displayAtNight() {

    tint(255, 255, 255, 200); 

    image(vulture, this.x, this.y, this.width, this.height); 

  }

}

​

class Gazelle {

  constructor(x, y, w, h) {

    this.x = x;

    this.y = y;

    this.width = w;

    this.height = h;

    this.speed = 2.7;  

  }

​

  move() {

    this.x -= this.speed;

    if (this.x < -this.width) {

      this.x = width; 

    }

  }

​

  display() {

    tint(255, 255, 255, 240);  

    image(gazelle, this.x, this.y, this.width, this.height); 

  }

​

  displayAtNight() {

    tint(255, 255, 255, 220); 

    image(gazelle, this.x, this.y, this.width, this.height); 

  }

}

​

class Elephant {

  constructor(x, y, w, h) {

    this.x = x;

    this.y = y;

    this.width = w;

    this.height = h;

    this.speed = 1;  

  }

​

  move() {

    this.x += this.speed;

    if (this.x > width) {

      this.x = -this.width;

    }

  }

​

  display() {

    tint(255, 255, 255, 240);  

    image(elephant, this.x, this.y, this.width, this.height); 

  }

​

  displayAtNight() {

    tint(255, 255, 255, 220); 

    image(elephant, this.x, this.y, this.width, this.height); 

  }

}