p5.js Web Editor | Doodle Jump Two Player

xxxxxxxxxx
/*
============================================================================
Name           : Midterm Project: Two Player Doodle Jump
Author         : Akhat Suleimenov
Date Created   : 02/03/2023
Date Modified  : 29/03/2023
Version        : 1.0.0
============================================================================    
*/
​
​
let WIDTH = 400; // static
let HEIGHT = 600; // static
let DOODLER_CHOSEN = false;
let BOOSTED = false;
let NUM_BOOSTERS = 0;
let DOODLE_TYPE_PICKED = 1;
let STARTER_DOODLER_X_POSITION = 0;
let STARTER_DOODLER_X_MOVEMENT = 1;
​
// button coordinates
let button_1 = [130, 100, 100, 100];
let button_2 = [10, 170, 100, 100];
let button_3 = [205, 210, 100, 100];
​
// image variables
let spray, b, topbar, lost, poggers, starter_background;
let sound_jump,
  sound_spray,
  sound_white,
  sound_hole_die,
  sound_ufo_die,
  sound_jump_on_monster,
  sound_monster,
  sound_ufo,
  sound_game_over,
  sound_choose_doodler;
​
// ending of the name of the image files used for loop in the preload function
let doodlers_words = [
  "_up.png",
  "_left.png",
  "_right.png",
  "_hat_left.png",
  "_hat_right.png",
  "_jetpack_left.png",
  "_jetpack_right.png",
];
let hazards_words = [
  "hole.png",
  "monster1.png",
  "monster7.png",
  "monster2.png",
  "ufo.png",
];
let platforms_words = ["green.png", "white.png", "blue.png", "darkblue.png"];
let boosters_words = ["jetpack_", "spring_", "hat_", "trampoline_"];
​
// array storing all the images of each doodler type
let doodlers_images = [];
​
// array storing all the images of each platform type
let platforms_images = [];
​
// array storing all the images of each hazard type
let hazards_images = [];
​
// array storing all the images of each booster type
let boosters_images = [];
​
function preload() {
  /*
   * preload function loading all the images and sounds
   */
​
  // iterating through 3 doodler and booster types and saving each image into appropriate array
  for (let i = 0; i < 3; i++) {
    doodlers_images[i] = [];
    boosters_images[i] = [];
    for (let j = 0; j < 7; j++) {
      doodlers_images[i][j] = loadImage(
        "images/doodle_" + str(i + 1) + doodlers_words[j]
      );
    }
    for (let j = 0; j < 4; j++) {
      boosters_images[i][j] = loadImage(
        "images/" + boosters_words[j] + str(i + 1) + ".png"
      );
    }
  }
​
  // iterating through platform types and saving each image into appropriate array
  for (let p of platforms_words)
    platforms_images.push(loadImage("images/" + p));
​
  // iterating through hazard types and saving each image into appropriate array
  for (let h of hazards_words) hazards_images.push(loadImage("images/" + h));
​
  // saving individual images
  spray = loadImage("images/spray.png");
  backgrounds = loadImage("images/background.png");
  topbar = loadImage("images/topbar.png");
  lost = loadImage("images/lost_2.jpg");
  poggers = loadImage("images/poggers.png");
  starter_background = loadImage("images/back.jpg");
​
  // saving individual sounds
  sound_jump = loadSound("/sounds/jump.wav");
  sound_hat = loadSound("/sounds/hat.mp3");
  sound_jetpack = loadSound("/sounds/jetpack1.mp3");
  sound_trampoline = loadSound("/sounds/trampoline.mp3");
  sound_spring = loadSound("/sounds/spring.mp3");
  sound_spray = loadSound("/sounds/spray.mp3");
  sound_white = loadSound("/sounds/white.mp3");
  sound_hole_die = loadSound("sounds/hole.mp3");
  sound_ufo_die = loadSound("sounds/ufo_die.mp3");
  sound_jump_on_monster = loadSound("sounds/jump_on_monster.mp3");
  sound_monster = loadSound("/sounds/monster.mp3");
  sound_ufo = loadSound("/sounds/ufo.mp3");
  sound_game_over = loadSound("/sounds/game_over.mp3");
  sound_choose_doodler = loadSound("/sounds/Choose_your_character.mp3");
}
​
class Doodler {
  constructor(x, y, r, g, img_w, img_h) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.g = g;
    this.vx = 0;
    this.vy = 0;
    this.img_w = img_w;
    this.img_h = img_h;
    this.key_handler = [false, false, false];
    this.dir = 1; // 0 - left, 1 - right, 2 - up
    this.alive = true;
​
    // all of the images of the doodler
    this.img_up = doodlers_images[DOODLE_TYPE_PICKED - 1][0];
    this.img_left = doodlers_images[DOODLE_TYPE_PICKED - 1][1];
    this.img_right = doodlers_images[DOODLE_TYPE_PICKED - 1][2];
    this.doodle_hat_left = doodlers_images[DOODLE_TYPE_PICKED - 1][3];
    this.doodle_hat_right = doodlers_images[DOODLE_TYPE_PICKED - 1][4];
    this.doodle_jetpack_left = doodlers_images[DOODLE_TYPE_PICKED - 1][5];
    this.doodle_jetpack_right = doodlers_images[DOODLE_TYPE_PICKED - 1][6];
    this.spray = spray;
​
    // doolder spray variables
    this.spray_y = 0; // moving y
    this.spray_flag = 0; // spray fired or not
    this.spray_coor_x = 0; // starting x
    this.spray_coor_y = 0; // // starting y
    this.spray_r = 20; // radius
​
    this.sound_jump = sound_jump;
    this.sound_spray = sound_spray;
  }
​
  display() {
    this.update();
    let not_boosted_doodler = true;
    
    // if the jetpack or hat activated then display them with doodler
    for (let b of game.boosters) {
      if (b.boost == true && b.type_boost == "jetpack") {
        if (this.dir == 0)
          image(
            this.doodle_jetpack_left,
            this.x - this.img_w / 2,
            this.y - this.img_h / 2,
            this.img_w,
            this.img_h
          );
        else
          image(
            this.doodle_jetpack_right,
            this.x - this.img_w / 2,
            this.y - this.img_h / 2,
            this.img_w,
            this.img_h
          );
        not_boosted_doodler = false;
        break;
      } else if (b.boost == true && b.type_boost == "hat") {
        if (this.dir == 0)
          image(
            this.doodle_hat_left,
            this.x - this.img_w / 2,
            this.y - this.img_h / 2,
            this.img_w * 1.2,
            this.img_h
          );
        else
          image(
            this.doodle_hat_right,
            this.x - this.img_w / 2,
            this.y - this.img_h / 2,
            this.img_w * 1.2,
            this.img_h
          );
        not_boosted_doodler = false;
        break;
      }
    }
    // display usual doodler
    if (not_boosted_doodler) {
      if (this.dir == 1)
        image(
          this.img_right,
          this.x - this.img_w / 2,
          this.y - this.img_h / 2,
          this.img_w,
          this.img_h
        );
      else if (this.dir == 0)
        image(
          this.img_left,
          this.x - this.img_w / 2,
          this.y - this.img_h / 2,
          this.img_w,
          this.img_h
        );
      else if (this.dir == 2) {
        image(
          this.img_up,
          this.x - this.img_w / 2,
          this.y - this.img_h / 2,
          this.img_w,
          this.img_h
        );
        this.dir = 1; // deafult direction
      }
       // display fired spray
      if (this.spray_flag == 1)
        image(
          this.spray,
          this.spray_coor_x,
          this.spray_coor_y + this.spray_y,
          this.spray_r,
          this.spray_r
        );
    }
  }
​
  update() {
    this.gravity();
​
    // moving doodler to left or right based on the key
    if (this.key_handler[0] == true) {
      this.vx = -5;
      this.dir = 0;
    } else if (this.key_handler[1] == true) {
      this.vx = 5;
      this.dir = 1;
    }
    
    // shouting the spray
    else if (this.key_handler[2] == true) {
      this.spray_coor_y = this.y - this.img_h;
      this.spray_coor_x = this.x - 10;
      this.spray_flag = 1;
      this.dir = 2;
      this.vx = 0;
      if (!this.sound_spray.isPlaying()) this.sound_spray.play();
    } else this.vx = 0;
​
    // updating the y position of the spray
    if (this.spray_flag == 1) this.spray_y -= 10;
​
    // checking if spray is out of the boarder
    if ((abs(this.spray_coor_y) % HEIGHT) + this.spray_y <= 0) {
      this.spray_flag = 0;
      this.spray_y = 0;
    }
​
    this.x += this.vx;
    this.y += this.vy;
​
    // teleporting doodler from side to side 
    if (this.x < 0) this.x = WIDTH;
    else if (this.x > WIDTH) this.x = 0;
​
    for (let h of game.hazards) {
      // checking if doodler jumped on the monster
      if (this.distance(h) <= this.r + h.r) {
        // if it's not a hole and her jumped on top, remove the monster
        if (
          this.vy > 0 &&
          this.y + this.r <= h.y &&
          this.x + this.r >= h.x - h.r &&
          this.x - this.r <= h.x + h.r &&
          h.c != "hole"
        ) {
          if (!h.sound_jump_on_monster.isPlaying())
            h.sound_jump_on_monster.play();
          let index = game.hazards.indexOf(h);
          game.hazards.splice(index, 1);
          this.vy = -10;
        } else {
          // if doodler is not in the boosted stage
          if (BOOSTED == false) {
            // checking if it's hole then die, and play sound
            if (h.c == "hole") {
              if (!h.sound_hole_die.isPlaying()) h.sound_hole_die.play();
              game.not_ufo_or_hole = false;
            }
            // if it's ufo dies, and play sound
            else if (h.c == "ufo") {
              if (!h.sound_ufo_die.isPlaying()) h.sound_ufo_die.play();
              game.not_ufo_or_hole = false;
            }
            this.alive = false;
          }
        }
      }
      // checking if spray hit the monster
      if (this.hit(h) <= this.spray_r + h.r) {
        h.hit_monster_times += 1;
        
        // if it's green monster then 2 hits are needed
        if (
          (h.c != "green" && h.c != "hole") ||
          (h.c == "green" && h.hit_monster_times == 2)
        ) {
          let index = game.hazards.indexOf(h);
          game.hazards.splice(index, 1);
          this.spray_flag = 0;
          this.spray_y = 0;
        }
      }
    }
​
    // y_shift of the game
    if (this.y < game.h / 2) {
      game.y_shift = game.h / 2 - this.y;
      this.y = game.h / 2;
​
      // shift platforms
      for (let p of game.platforms) {
        p.y += game.y_shift;
        game.score += game.y_shift;
      }
      
      // shift hazards
      for (let h of game.hazards) {
        h.y += game.y_shift;
      }
​
      // shift boosters
      for (let b of game.boosters) {
        b.y += game.y_shift;
      }
    }
​
    // if doodler fell then die
    if (this.y + this.r > HEIGHT) this.alive = false;
  }
​
  gravity() {
    // if not with the booster
    if (BOOSTED == false) {
      // jumping up
      if (this.y + this.r >= this.g) {
        this.vy = -10;
        // playing jump sound
        if (!this.sound_jump.isPlaying()) this.sound_jump.play();
      } else {
        // falling down
        this.vy += 0.3;
      }
​
      for (let p of [...game.platforms].reverse()) {
        // checking if doodler on the platform then change it to the ground, this.r/3 needed to cut the nose of the doodler and not count it
        if (
          this.y + this.r <= p.y &&
          this.x + this.r / 3 >= p.x &&
          this.x - this.r <= p.x + p.w &&
          this.dir == 1
        ) {
          this.g = p.y;
          break;
        } else if (
          this.y + this.r <= p.y &&
          this.x + this.r >= p.x &&
          this.x - this.r / 3 <= p.x + p.w &&
          this.dir == 0
        ) {
          this.g = p.y;
          break;
        } else {
          // ground is the under the screen
          this.g = game.g;
        }
      }
    }
  }
​
  distance(target) {
    // counting the distance between doodler and target
    return ((this.x - target.x) ** 2 + (this.y - target.y) ** 2) ** 0.5;
  }
​
  hit(target) {
    // distance of the spray to the target
    return (
      ((this.spray_coor_x - target.x) ** 2 +
        (this.spray_coor_y + this.spray_y - target.y) ** 2) **
      0.5
    );
  }
​
  touched(object, target) {
    // checking if doodler object touched the target, mainly platform
    return object.y + object.r >= target.y &&
      object.y + object.r <= target.y + target.h &&
      object.x + object.r >= target.x &&
      object.x - object.r <= target.x + target.w
      ? true
      : false;
  }
}
​
class Platform {
  constructor(x, y, w, h, c) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.c = c;
    this.vx = 2;
    this.vy = 2;
    this.count = 20;
    this.tmp_y = 0;
    this.tmp_x = 0;
    
    // loading the appropriate image
    if (this.c == "green") this.img = platforms_images[0];
    else if (this.c == "white") this.img = platforms_images[1];
    else if (this.c == "blue") this.img = platforms_images[2];
    else this.img = platforms_images[3];
​
    this.sound_white = sound_white;
  }
​
  display() {
    this.update();
    this.blue_move();
    this.darkblue_move();
    this.white();
    image(this.img, this.x, this.y, this.w, this.h);
  }
​
  update() {
    // removing left beрind platforms
    if (this.y > HEIGHT) {
      let index = game.platforms.indexOf(this);
      game.platforms.splice(index, 1);
    }
​
    // last level of platforms
    if (game.score > 100000) {
      
      // maintaining playable game logic
      while (game.platforms.length <= 7) {
        
        // randoming y position but making it possible to jump
        this.tmp_y =
          game.platforms[game.platforms.length - 1].y - int(random(100, 150));
        if (this.tmp_y > 70) {
          this.tmp_y =
            game.platforms[game.platforms.length - 1].y - int(random(50, 70));
        }
        this.tmp_x = int(random(0, WIDTH - this.w + 1));
        
        // counting the number of white platforms
        let count = 0;
        for (let p of game.platforms) {
          if (p.c == "white") {
            count += 1;
          }
        }
        
        // if their number is less than 2 then add them and call the monster method
        if (count < 2) {
          game.platforms.push(
            new Platform(this.tmp_x, this.tmp_y, 100, 20, "white")
          );
          this.monster();
        }
        
        // based on random add either darkblue or green platform and call the booster method
        else if (int(random(0, 10)) > 7) {
          if (int(random(0, 2)) == 0) {
            game.platforms.push(
              new Platform(this.tmp_x, this.tmp_y, 100, 20, "darkblue")
            );
          } else {
            game.platforms.push(
              new Platform(this.tmp_x, this.tmp_y, 100, 20, "green")
            );
            this.booster();
          }
        } else {
          game.platforms.push(
            new Platform(this.tmp_x, this.tmp_y, 100, 20, "blue")
          );
        }
      }
    }
    
    // second level of platforms
    else if (game.score > 50000) {
      if (game.platforms.length <= 10) {
        // randoming y position but making it possible to jump
        this.tmp_y =
          game.platforms[game.platforms.length - 1].y - int(random(20, 100));
        if (this.tmp_y > 70) {
          this.tmp_y =
            game.platforms[game.platforms.length - 1].y - int(random(40, 70));
        }
        this.tmp_x = int(random(0, WIDTH - this.w));
        
        // counting the number of brown and blue platforms
        let count = 0;
        for (let p of game.platforms) {
          if (p.c == "blue") {
            count += 1;
          }
        }
        
        // if their number is less than 2 then add them and call the monster method
        if (count < 2) {
          game.platforms.push(
            new Platform(
              this.tmp_x,
              this.tmp_y - int(random(20, 50)),
              100,
              20,
              "blue"
            )
          );
          this.monster();
        } else {
          game.platforms.push(
            new Platform(this.tmp_x, this.tmp_y, 100, 20, "green")
          );
          this.booster();
        }
      }
    }
    
    // first level of platforms
    else {
      if (game.platforms.length <= 12) {
        // randoming y position but making it possible to jump
        this.tmp_y =
          game.platforms[game.platforms.length - 1].y - int(random(30, 60));
        if (this.tmp_y > 70) {
          this.tmp_y =
            game.platforms[game.platforms.length - 1].y - int(random(20, 70));
        }
        this.tmp_x = int(random(0, WIDTH) - this.w);
        
        // based on random green platforms and call booster method
        if (int(random(0, 11)) > 9) {
          game.platforms.push(
            new Platform(
              int(random(0, WIDTH - this.w)),
              this.tmp_y - int(random(20, 50)),
              100,
              20,
              "green"
            )
          );
        } else {
          game.platforms.push(
            new Platform(this.tmp_x, this.tmp_y, 100, 20, "green")
          );
          this.booster();
        }
      }
    }
  }
​
  booster() {
    // based on randomness choose a booster and call the Boosters class
    let x = int(random(1, 5));
    if (game.boosters.length == 0) {
      if (x == 1)
        game.boosters.push(
          new Boosters(
            this.tmp_x + int(random(0, this.w - 20)),
            this.tmp_y - 15,
            20,
            40,
            40,
            "jetpack"
          )
        );
      else if (x == 2)
        game.boosters.push(
          new Boosters(
            this.tmp_x + int(random(0, this.w - 20)),
            this.tmp_y - 15,
            20,
            40,
            40,
            "hat"
          )
        );
      else if (x == 3)
        game.boosters.push(
          new Boosters(
            this.tmp_x + int(random(0, this.w - 20)),
            this.tmp_y - 5,
            10,
            20,
            20,
            "spring"
          )
        );
      else
        game.boosters.push(
          new Boosters(
            this.tmp_x + int(random(0, this.w - 20)),
            this.tmp_y - 15,
            20,
            40,
            40,
            "trampoline"
          )
        );
    }
  }
​
  monster() {
    // based on randomness choose a monster and call the Hazards class
    let x = int(random(1, 6));
    if (game.hazards.length == 0) {
      if (x == 1)
        game.hazards.push(
          new Hazards(
            this.tmp_x,
            this.tmp_y - int(random(30, 50)),
            50,
            "hole",
            100,
            100
          )
        );
      else if (x == 2)
        game.hazards.push(
          new Hazards(
            this.tmp_x,
            this.tmp_y - int(random(30, 50)),
            30,
            "blue",
            70,
            70
          )
        );
      else if (x == 3)
        game.hazards.push(
          new Hazards(
            this.tmp_x,
            this.tmp_y - int(random(30, 50)),
            30,
            "red",
            70,
            70
          )
        );
      else if (x == 4)
        game.hazards.push(
          new Hazards(
            this.tmp_x,
            this.tmp_y - int(random(30, 50)),
            30,
            "green",
            70,
            70
          )
        );
      else
        game.hazards.push(
          new Hazards(
            this.tmp_x,
            this.tmp_y - int(random(30, 50)),
            30,
            "ufo",
            70,
            70
          )
        );
    }
  }
​
  blue_move() {
    // moving blue platform from left to right
    if (this.c == "blue") {
      if (this.x + this.w >= WIDTH - 5) this.vx = -2;
      else if (this.x <= 5) this.vx = 2;
      this.x += this.vx;
    }
  }
​
  darkblue_move() {
    // moving darkblue platform up and down
    if (this.c == "darkblue") {
      if (this.count > 0) {
        this.vy = -2;
        this.count -= 1;
      } else if (this.count == 0 && this.vy == -2) this.count = -20;
      else if (this.count == 0 && this.vy == 2) this.count = 20;
      else if (this.count < 0) {
        this.vy = 2;
        this.count += 1;
      }
      this.y += this.vy;
    }
  }
​
  white() {
    // removing white platform if doodler jumped on it
    for (let p of [...game.platforms].reverse()) {
      if (
        p.c == "white" &&
        game.doodler.touched(game.doodler, p) &&
        game.doodler.vy > 0
      ) {
        // play the sound of white platform dissaperaing
        if (!this.sound_white.isPlaying()) this.sound_white.play();
        let index = game.platforms.indexOf(p);
        game.platforms.splice(index, 1);
        break;
      }
    }
  }
}
​
class Hazards {
  constructor(x, y, r, c, img_w, img_h) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.c = c;
    this.vx = 2;
    this.vy = 2;
    this.img_w = img_w;
    this.img_h = img_h;
    this.hit_monster_times = 0;
    this.tmp_x = this.x;
    this.tmp_y = this.y;
    
    // loading appropriate image
    if (this.c == "hole") this.img = hazards_images[0];
    else if (this.c == "blue") this.img = hazards_images[1];
    else if (this.c == "red") this.img = hazards_images[2];
    else if (this.c == "green") this.img = hazards_images[3];
    else this.img = hazards_images[4];
    
    // loading appropriate sound
    if (this.c == "hole") this.sound_hole_die = sound_hole_die;
    else {
      this.sound_ufo_die = sound_ufo_die;
      this.sound_jump_on_monster = sound_jump_on_monster;
    }
  }
​
  display() {
    this.update();
    this.monster_blue();
    this.monster_red();
    
    // display the image of the monster
    image(
      this.img,
      this.x - this.img_w / 2,
      this.y - this.img_h / 2,
      this.img_w,
      this.img_h
    );
  }
​
  update() {
    // removing monsters left behind
    for (let h of game.hazards) {
      if (h.y > HEIGHT) {
        let index = game.hazards.indexOf(h);
        game.hazards.splice(index, 1);
      }
    }
  }
​
  monster_blue() {
    // blue monster that moves from left to right
    if (this.c == "blue") {
      if (this.x + this.r >= WIDTH - 5 || this.x - this.r <= 5) this.vx *= -1;
      // going up and down
      if (this.x > 280) this.vy = -2;
      else if (this.x > 240) this.vy = 2;
      else if (this.x > 200) this.vy = -2;
      else if (this.x > 160) this.vy = 2;
      else if (this.x > 120) this.vy = -2;
      else if (this.x > 80) this.vy = 2;
      else if (this.x > 40) this.vy = -2;
      else if (this.x >= 0) this.vy = 1;
​
      // updating y and x positions
      this.y += this.vy;
      this.x += this.vx;
    }
  }
​
  monster_red() {
    // monster that moves from left to right but short distance
    if (this.c == "red") {
      if (this.x + this.r >= this.tmp_x + 40) this.vx = -2;
      else if (this.x - this.r <= this.tmp_x - 40) this.vx = 2;
​
      this.x += this.vx;
    }
  }
}
​
class Boosters {
  constructor(x, y, r, img_w, img_h, type_boost) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.vx = 0;
    this.vy = 0;
    this.img_w = img_w;
    this.img_h = img_h;
    this.boost_active = false;
    this.active_time = 0;
    this.boost_type = type_boost;
    if (this.boost_type == "jetpack") {
      this.img = boosters_images[DOODLE_TYPE_PICKED - 1][0];
    }
    if (this.boost_type == "spring") {
      this.img = boosters_images[DOODLE_TYPE_PICKED - 1][1];
      this.sound_spring = sound_spring;
    }
    if (this.boost_type == "hat") {
      this.img = boosters_images[DOODLE_TYPE_PICKED - 1][2];
      this.sound_hat = sound_hat;
    }
    if (this.boost_type == "trampoline") {
      this.img = boosters_images[DOODLE_TYPE_PICKED - 1][3];
      this.sound_trampoline = sound_trampoline;
    }
  }
​
  display() {
    //removing boosters if they are left below and wasn't used
    if (this.y > HEIGHT && this.boost_active == false) {
      let index = game.boosters.indexOf(this);
      game.boosters.splice(index, 1);
    }
​
    // call boosted function
    this.boosted();
    
    // display the booster when not used
    if (this.boost_active == false)
      image(
        this.img,
        this.x - this.img_w / 2,
        this.y - this.img_h / 2,
        this.img_w,
        this.img_h
      );
  }
​
  boosted() {
    
    // checking if doodler touched the booster
    if (this.distance(game.doodler) <= this.r + game.doodler.r) {
      // checking if the doodler fall down on the booster or touched it while going up
      if (
        game.doodler.y + game.doodler.r <= this.y ||
        this.boost_type == "jetpack" ||
        this.boost_type == "hat"
      ) {
        this.boost_active = true;
        BOOSTED = true;
      }
    }
    
    // calling the booster method type based on the booster
    if (this.boost_active == true) {
      // changing the doodler's velocity to 0
      if (this.active_time == 0) game.doodler.vy = 0;
      if (this.boost_type == "jetpack") this.jetpack();
      else if (this.boost_type == "spring") this.spring();
      else if (this.boost_type == "hat") this.hat();
      else if (this.boost_type == "trampoline") this.trampoline();
    }
  }
  
  jetpack() {
  // changing doodler's velocity with some numbers, playing sound and then removing the booster from the list
    if (this.active_time < 100) {
      this.active_time += 1;
      game.doodler.vy -= 0.3;
      if (!this.sound_jetpack.isPlaying()) this.sound_jetpack.play();
    } else {
      this.active_time = 0;
      this.boost_active = false;
      BOOSTED = false;
      this.sound_jetpack.pause();
      
      // removing booster from the array
      let index = game.boosters.indexOf(this);
      game.boosters.splice(index, 1);
    }
  }
​
  spring() {
    // same as above but for spring
    if (this.active_time < 50) {
      this.active_time += 1;
      game.doodler.vy -= 0.4;
      if (!this.sound_spring.isPlaying()) this.sound_spring.play();
    } else {
      this.active_time = 0;
      this.boost_active = false;
      BOOSTED = false;
      this.sound_spring.pause();
      let index = game.boosters.indexOf(this);
      game.boosters.splice(index, 1);
    }
  }
​
  hat() {
    // same as above but for hat
    if (this.active_time < 100) {
      this.active_time += 1;
      game.doodler.vy -= 0.2;
      if (!this.sound_hat.isPlaying()) this.sound_hat.play();
    } else {
      this.active_time = 0;
      this.boost_active = false;
      BOOSTED = false;
      this.sound_hat.pause();
      let index = game.boosters.indexOf(this);
      game.boosters.splice(index, 1);
    }
  }
​
  trampoline() {
    // same as above but for trampoline
    if (this.active_time < 50) {
      this.active_time += 1;
      game.doodler.vy -= 0.3;
      if (!this.sound_trampoline.isPlaying()) {
        this.sound_trampoline.play();
      }
    } else {
      this.active_time = 0;
      this.boost_active = false;
      BOOSTED = false;
      this.sound_trampoline.pause();
      let index = game.boosters.indexOf(this);
      game.boosters.splice(index, 1);
    }
  }
​
  distance(target) {
    
    return ((this.x - target.x) ** 2 + (this.y - target.y) ** 2) ** 0.5;
  }
}
​
class Game {
  constructor(w, h) {
    this.w = w;
    this.h = h;
    this.g = h;
    this.y_shift = 0;
    this.score = 0;
    this.not_ufo_or_hole = true;
    this.sound_monster = sound_monster;
    this.sound_ufo = sound_ufo;
    this.sound_game_over = sound_game_over;
    this.sound_played = false;
​
    this.doodler = new Doodler(240, 450, 35, this.g, 70, 70);
    this.doodler2 = new Doodler(160, 450, 35, this.g, 70, 70);
​
    this.platforms = [];
    this.platforms.push(new Platform(160, 500, 100, 20, "green"));
    this.hazards = [];
    this.number_boosters = 0;
    this.boosters = [];
​
    this.backgrounds = backgrounds;
    this.topbar = topbar;
    this.lost = lost;
    this.poggers = poggers;
  }
​
  display() {
    // if either of the players died display the game over screen
    if (this.doodler.alive == false || this.doodler2.alive == false) {
      // if doodler was killed by ufo or hole then wait till the sound finished and only after play the game over sound
      if (this.not_ufo_or_hole == true) {
        if (!this.sound_played) {
          this.sound_game_over.play();
          this.sound_played = true;
        }
      }
      
      // display game over images and text
      image(this.lost, 0, 0, WIDTH, HEIGHT);
      image(this.poggers, WIDTH / 3, 400, 120, 150);
      textAlign(CENTER, CENTER);
      fill(255);
      textSize(30);
      this.doodler.alive == true ? text("Player 2 (ARROWS) won!", width / 2, 100) : text("Player 1 (WASD) won!", width / 2, 100);
      textSize(15);
      fill(255, 0, 0);
      text("Retry [CLICK ANYWHERE]", width / 2, (9.5 * height) / 10);
      return;
    }
​
    // display background of the game
    image(this.backgrounds, 0, 0, this.w, this.h);
    image(this.topbar, 0, 0, this.w, 70);
​
    
    for (let p of this.platforms)
      p.display();
​
    for (let h of this.hazards) {
      h.display();
      // checking if hazards is ufo or hole
      if (h.c == "ufo") {
        // start the ufo sound
        if (!this.sound_ufo.isPlaying()) this.sound_ufo.play();
      } else if (h.c != "ufo" && h.c != "hole") {
        // start the monster sound
        if (!this.sound_monster.isPlaying()) this.sound_monster.play();
      }
    }
    
    // pausing the music if no more hazards
    if (this.hazards.length == 0) {
      this.sound_monster.pause();
      this.sound_ufo.pause();
    }
    
    // creating the boosters if the score reached specific threshold
    if (this.score > 10000)
      for (let b of this.boosters)
        b.display();
​
    // display both players
    this.doodler.display();
    this.doodler2.display();
​
    // displaying score
    fill(0, 0, 0);
    textSize(20);
    textAlign(LEFT);
    text("Score " + str(int(this.score / 10)), 0, 20);
  }
}
​
let game;
​
function text_instructions() {
  /*
   *. Displays instruction screen text at the beginnging of the game
   */
​
  // Top text of the instruction screen
  textAlign(CENTER, TOP);
  rect(0, 0, WIDTH, 50);
  textSize(15);
  fill(0);
  noStroke();
  text(
    "Two Player Game. Choose a Doodler you would like to play with by clicking on it",
    0,
    10,
    WIDTH
  );
​
  // Bottom text of the instruction screen
  stroke("blue");
  strokeWeight(2);
  fill(0);
  rect(0, 450, WIDTH, 200);
  fill(255);
  text("Instructions", 200, 452);
​
  textSize(13);
  text(
    "Player #1 use WASD keys to move. Player #2 use ARROWS to move. The goal of the game to outplay your opponent. You can do this by getting up the platformsfaster than your opponent.",
    0,
    470,
    WIDTH
  );
​
  line(0, 525, WIDTH, 525);
  text(
    "The boosters picked by any of the player applied to both of you. If you get hit by a monster, your opponent wins. The score shows how high two of you were able to get.",
    0,
    535,
    WIDTH
  );
  line(0, HEIGHT, WIDTH, HEIGHT);
}
​
function display_doodlers() {
  /*
   * displaying all doodlers at the instruction screen
   */
  image(starter_background, 0, 0, WIDTH, HEIGHT);
  image(
    doodlers_images[0][2],
    (WIDTH / 16) * 7 + STARTER_DOODLER_X_POSITION,
    HEIGHT / 5,
    100,
    100
  );
  image(
    doodlers_images[1][2],
    WIDTH / 15 + STARTER_DOODLER_X_POSITION,
    HEIGHT / 3,
    100,
    100
  );
  image(
    doodlers_images[2][2],
    (WIDTH / 3) * 2 + STARTER_DOODLER_X_POSITION,
    (HEIGHT / 5) * 2,
    100,
    100
  );
​
  // make them dance
  if (STARTER_DOODLER_X_POSITION > 10 || STARTER_DOODLER_X_POSITION < -10)
    STARTER_DOODLER_X_MOVEMENT *= -1;
  STARTER_DOODLER_X_POSITION += STARTER_DOODLER_X_MOVEMENT;
}
​
function setup() {
  createCanvas(WIDTH, HEIGHT);
  game = new Game(WIDTH, HEIGHT, HEIGHT);
}
​
function draw() {
  background(255);
​
  // first screen where player chooses his doodler
  if (DOODLER_CHOSEN == false) {
    if (sound_choose_doodler.isPlaying() == false) sound_choose_doodler.play();
    display_doodlers();
    text_instructions();
  }
  // if doodler chosen then start the game
  else {
    sound_choose_doodler.pause();
    game.display();
  }
}
​
function keyPressed() {
  /*
   * tracking the Arrows or WASD keys pressed
   */
  if (keyCode == LEFT_ARROW) game.doodler.key_handler[0] = true;
  else if (keyCode == RIGHT_ARROW) game.doodler.key_handler[1] = true;
  else if (keyCode == UP_ARROW) game.doodler.key_handler[2] = true;
  if (key == "a" || key == "A") game.doodler2.key_handler[0] = true;
  else if (key == "d" || key == "D") game.doodler2.key_handler[1] = true;
  else if (key == "w" || key == "W") game.doodler2.key_handler[2] = true;
}
​
function keyReleased() {
  /*
   * tracking the Arrows or WASD keys released
   */
  if (keyCode == LEFT_ARROW) game.doodler.key_handler[0] = false;
  else if (keyCode == RIGHT_ARROW) game.doodler.key_handler[1] = false;
  else if (keyCode == UP_ARROW) game.doodler.key_handler[2] = false;
  if (key == "a" || key == "A") game.doodler2.key_handler[0] = false;
  else if (key == "d" || key == "D") game.doodler2.key_handler[1] = false;
  else if (key == "w" || key == "W") game.doodler2.key_handler[2] = false;
}
​
function mouseClicked() {
  /*
   * tracking the mouse clicked position in order to choose the    * type of the doodler
   */
  if (DOODLER_CHOSEN == false) {
    DOODLER_CHOSEN = true;
    if (
      mouseX <= button_1[0] + button_1[1] &&
      mouseX >= button_1[0] &&
      mouseY <= button_1[1] + button_1[3] &&
      mouseY >= button_1[1]
    )
      DOODLE_TYPE_PICKED = 1;
    else if (
      mouseX <= button_2[0] + button_2[1] &&
      mouseX >= button_2[0] &&
      mouseY <= button_2[1] + button_3[3] &&
      mouseY >= button_2[1]
    )
      DOODLE_TYPE_PICKED = 2;
    else if (
      mouseX <= button_3[0] + button_3[1] &&
      mouseX >= button_3[0] &&
      mouseY <= button_3[1] + button_3[3] &&
      mouseY >= button_3[1]
    )
      DOODLE_TYPE_PICKED = 3;
    else DOODLER_CHOSEN = false;
​
    // starting the game
    if (DOODLER_CHOSEN == true) game = new Game(WIDTH, HEIGHT);
  }
  // restarting the game when either doodler died
  else if (game.doodler.alive == false || game.doodler2.alive == false) {
    game = new Game(WIDTH, HEIGHT);
  }
}
​
Cookies

Sketch Files

Console

Preview
