p5.js Web Editor | Bitmap game

xxxxxxxxxx
//Sound effects from : https://www.zapsplat.com
​
let myFont;
​
let threshold;
​
let g_ava_img, r_ava_img, c_ava_img;
​
let stress_img, love_img, grad_img, study_img;
​
let gain_sound, wrong_sound, game_track, end_sound;
​
let scene0_X, scene0_Y; //**scene 1 mouse
let scene2_X, scene2_Y; //**scene 2 mouse
let scene3_X, scene3_Y; //**scene 3 mouse
​
let stress = [];
let love = [];
let grad = [];
let study = [];
​
let character;
​
let sceneNum;
​
function preload(){
  myFont = loadFont("Minecraft.ttf");
  
  //**images for Scene 1**
  g_ava_img = loadImage("GIE.png");
  r_ava_img = loadImage("RUPY.png");
  c_ava_img = loadImage("CUTET.png");
  
  //**images for Scene 2**
  stress_img = loadImage("stress.png");
  love_img = loadImage("love.png");
  grad_img = loadImage("grad.png");
  study_img = loadImage("study.png");
  
  //**sound tracks
  gain_sound = loadSound("gain.mp3");
  wrong_sound = loadSound("wrong.mp3");
  game_track = loadSound("game.mp3");
  end_sound = loadSound("end.mp3");
}
​
​
//**SET UP**
function setup() {
  createCanvas(600, 600);
  
  noStroke();
  
  threshold = 6;
  
  sceneNum = 0;
​
  character = 0;
​
  imageMode(CENTER);
  
  game_track.loop();
  
//**SCNENE 1 choosing player**
  g_avatar = new G_avatar(106, 313, 100, 100);
  r_avatar = new R_avatar(305, 313, 100, 100);
  c_avatar = new C_avatar(490, 313, 100, 100);
  
//**SCNENE 2 (game scene)**
  g_empl = new G_empl(300, 415, 50, 50);
  r_empl = new R_empl(300, 415, 50, 50);
  c_empl = new C_empl(300, 415, 50, 50);
  
for (let j = 0; j < 8; j++) {
    stress[j] = new Stress(random(width - 100), random(height - 100), 50, 50);
  }
​
  for (let s = 0; s < threshold; s++) {
    love[s] = new Love(random(width - 100), random(height - 100), 50, 50);
  }
​
  for (let i = 0; i < threshold; i++) {
    grad[i] = new Grad(random(width - 100), random(height - 100), 50, 50);
  }  
  
  for (let i = 0; i < threshold; i++) {
    study[i] = new Study(random(width - 100), random(height - 100), 40, 40);
  }  
​
  rest = new Rest_button(30, 520, 220, 53);  
  
  
//**Scene 3**
  g_avatar1 = new G_avatar(295, 360, 150, 150);
  r_avatar1 = new R_avatar(295, 360, 150, 150);
  c_avatar1 = new C_avatar(295, 360, 150, 150);
  youcandoit = new YCDI_button(200, 520, 200, 53);
}
​
//**Draw**
function draw() {
  background(153, 153, 255);
  
  switch (sceneNum) {
    case 0:
      startScene();
      break;
​
    case 1:
      gameScene();
      break;
​
    case 2:
      endScene();
      break;
​
    case 3:
      endScene();
      break;
​
    case 4:
      welldoneScene();
      break;
 }
}
​
//**Start Scene**
function startScene() {
​
  scene0_X = mouseX;
  scene0_Y = mouseY;
​
  textFont(myFont);
  textSize(38);
  fill(204, 163, 0);
  text('Choose your player !', 120, 143);
  
  textFont(myFont);
  textSize(38);
  fill(255, 204, 0);
  text('Choose your player !', 120, 140);
​
  push();
  textSize(30);
  fill(204, 163, 0);
  text('Challenge your life !', 165, 503);
  pop();
  
  push();
  textSize(30);
  fill(255, 204, 0);
  text('Challenge your life !', 165, 500);
  pop();
  
  g_avatar.show();
  fill(255);
  textSize(20);
  text("GIE", 92, 400);
​
  r_avatar.show();
  fill(255);
  textSize(20);
  text("RUPY", 292, 400);
​
  c_avatar.show();
  fill(255);
  textSize(20);
  text("CUTE T", 462, 400);
}
​
//**Game Scene**
function gameScene() {
​
  scene2_X = mouseX;
  scene2_Y = mouseY;
​
  for (let j = 0; j < stress.length; j++) {
    stress[j].show();
    stress[j].checkCollision();
    stress[j].move();
  }
​
  for (let s = 0; s < love.length; s++) {
    love[s].show();
    love[s].checkCollision();
  }
  
  for (let i = 0; i < grad.length; i++) {
    grad[i].show();
    grad[i].checkCollision();
  }
  
  for (let i = 0; i < study.length; i++) {
    study[i].show();
    study[i].checkCollision();
  }
  
   if (character == 1) {
    g_empl.show();
    g_empl.move();
    g_empl.checkBorder();
  }
​
  if (character == 2) {
    r_empl.show();
    r_empl.move();
    r_empl.checkBorder();
​
  }
​
  if (character == 3) {
    c_empl.show();
    c_empl.move();
    c_empl.checkBorder();
  }
​
//**rest button**
  rest.show();
​
  if (love.length == 0 &&
    grad.length == 0 &&
    study.length == 0){
    sceneNum = 4;
  }
}
​
//**Ending Scene**
function endScene() {
  scene3_X = mouseX;
  scene3_Y = mouseY;
​
  push();
  fill(204, 163, 0);
  textSize(25);
  text("Tired? You can always take a break", 78, 104);
  pop();
  
  push();
  fill(255, 204, 0);
  textSize(25);
  text("Tired? You can always take a break", 78, 100);
  pop();
  
  push();
  fill(204, 163, 0);
  textSize(30);
  text("But, don't give up", 175, 204);
  pop();
  
  push();
  fill(255, 204, 0);
  textSize(30);
  text("But, don't give up", 175, 200);
  pop();
​
  if (character == 1) {
    g_avatar1.show();
  }
​
  if (character == 2) {
    r_avatar1.show();
​
  }
​
  if (character == 3) {
    c_avatar1.show();
  }
​
  youcandoit.show();
}
​
//**Well done Scene**
function welldoneScene() {
  push();
  fill(204, 163, 0);
  textSize(50);
  text("Yayyy! Well done ! ! !", 80, 154);
  pop();
  
  push();
  fill(255, 204, 0);
  textSize(50);
  text("Yayyy! Well done ! ! !", 80, 150);
  pop();
​
  push();
  fill(204, 163, 0);
  textSize(30);
  text("Refresh page for a new challenge", 60, 504);
  pop();
  
  push();
  fill(255, 204, 0);
  textSize(30);
  text("Refresh page for a new challenge", 60, 500);
  pop();
​
  sceneWin_X = mouseX;
  sceneWin_Y = mouseY;
  
  if (character == 1) {
    g_avatar1.show();
  }
​
  if (character == 2) {
    r_avatar1.show();
​
  }
​
  if (character == 3) {
    c_avatar1.show();
  }
}
​
//**mousePressed function**
function mousePressed() {
​
  if (dist(scene0_X, scene0_Y, g_avatar.x, g_avatar.y) < g_avatar.z / 2) {
    character = 1;
    console.log('g empl');
    sceneNum = 1;
  }
​
  if (dist(scene0_X, scene0_Y, r_avatar.x, r_avatar.y) < r_avatar.z / 2) {
    character = 2;
    console.log('r empl');
    sceneNum = 1;
  }
​
  if (dist(scene0_X, scene0_Y, c_avatar.x, c_avatar.y) < c_avatar.z / 2) {
    character = 3;
    console.log('c empl');
    sceneNum = 1;
  }
  
  rest.checkCollision();
​
  youcandoit.checkCollision();
}
​
//**Scene 1 - GIE classes**
class G_avatar {
​
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }
  
  show() {
    fill(255);
    image(g_ava_img, this.x, this.y, this.z, this.z);
  }
}
​
//**Scene 1 - RUPY classes**
class R_avatar {
​
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }
​
  show() {
    fill(255);
    image(r_ava_img, this.x, this.y, this.z, this.z);
  }
}
​
//**Scene 1 - CUTE T classes**
class C_avatar {
​
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }
​
  show() {
    fill(255);
    image(c_ava_img, this.x, this.y, this.z, this.z);
  }
}
​
//**Game Scene - GIE classes**
class G_empl {
​
  constructor(x, y, z) { 
    this.x = x;
    this.y = y;
    this.z = z;
  }
​
  show() {
    fill(255);
    image(g_ava_img, this.x, this.y, this.z, this.z);
  }
​
  move() {
    if (keyIsDown(39)) {
      g_empl.x += 5;
    }
    if (keyIsDown(37)) {
      g_empl.x -= 5;
    }
    if (keyIsDown(38)) {
      g_empl.y -= 5;
    }
    if (keyIsDown(40)) {
      g_empl.y += 5;
    }
  }
  
  checkBorder() {
    if (this.x > width) {
      this.x = 600;
    }
​
    if (this.x < 0) {
      this.x = 0;
    }
​
    if (this.y > height) {
      this.y = 600;
    }
​
    if (this.y < 0) {
      this.y = 0;
    }
  }
}
​
//**Game Scene - RUPY classes**
class R_empl {
​
  constructor(x, y, z) { 
    this.x = x;
    this.y = y;
    this.z = z;
  }
​
  show() {
    fill(255);
    image(r_ava_img, this.x, this.y, this.z, this.z);
  }
​
  move() {
    if (keyIsDown(39)) {
      r_empl.x += 5;
    }
    if (keyIsDown(37)) {
      r_empl.x -= 5;
    }
    if (keyIsDown(38)) {
      r_empl.y -= 5;
    }
    if (keyIsDown(40)) {
      r_empl.y += 5;
    }
  }
​
  checkBorder() {
    if (this.x > width) {
      this.x = 600;
    }
​
    if (this.x < 0) {
      this.x = 0;
    }
​
    if (this.y > height) {
      this.y = 600;
    }
​
    if (this.y < 0) {
      this.y = 0;
    }
  }
}
​
//**Game Scene - CUTE T classes**
class C_empl {
​
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }
​
  show() {
    fill(255);
    image(c_ava_img, this.x, this.y, this.z, this.z);
  }
​
  move() {
    if (keyIsDown(39)) {
      c_empl.x += 5;
    }
    if (keyIsDown(37)) {
      c_empl.x -= 5;
    }
    if (keyIsDown(38)) {
      c_empl.y -= 5;
    }
    if (keyIsDown(40)) {
      c_empl.y += 5;
    }
  }
​
  checkBorder() {
    if (this.x > width) {
      this.x = 600;
    }
​
    if (this.x < 0) {
      this.x = 0;
    }
​
    if (this.y > height) {
      this.y = 600;
    }
​
    if (this.y < 0) {
      this.y = 0;
    }
  }
}
​
//**Stress class**
class Stress {
​
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }
​
  show() {
    fill(255);
    image(stress_img, this.x, this.y, this.z, this.z);
  }
​
  move(){
    this.x += 2;
    
    if (this.x > width) {
        this.x = 0;
        }
    
    if (this.x < 0) {
        this.x += 2;
        }
  }
  
  checkCollision() {
    if (dist(this.x, this.y, g_empl.x, g_empl.y) < this.z / 2 ||
      dist(this.x, this.y, r_empl.x, r_empl.y) < this.z / 2 ||
      dist(this.x, this.y, c_empl.x, c_empl.y) < this.z / 2) {
​
      this.x = random(width);
      this.y = random(height - 150);
      
      love.push(new Love(random(width - 100), random(height - 100), 30, 30));
      grad.push(new Grad(random(width - 100), random(height - 100), 30, 30));
      
      wrong_sound.play();
​
    }
  }
}
​
//**Love class**
class Love {
​
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }
​
  show() {
    fill(0);
    image(love_img, this.x, this.y, this.z, this.z);
  }
​
​
  checkCollision() {
    if (dist(this.x, this.y, g_empl.x, g_empl.y) < this.z / 2 ||
      dist(this.x, this.y, r_empl.x, r_empl.y) < this.z / 2 ||
      dist(this.x, this.y, c_empl.x, c_empl.y) < this.z / 2) {
​
      this.x = random(width);
      this.y = random(height - 150);
​
      gain_sound.play();
      
      love.pop();
    }
  }
}
​
//**Grad class**
class Grad {
​
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }
​
  show() {
    fill(0);
    image(grad_img, this.x, this.y, this.z, this.z);
  }
​
  checkCollision() {
    if (dist(this.x, this.y, g_empl.x, g_empl.y) < this.z / 2 ||
      dist(this.x, this.y, r_empl.x, r_empl.y) < this.z / 2 ||
      dist(this.x, this.y, c_empl.x, c_empl.y) < this.z / 2) {
​
      this.x = random(width);
      this.y = random(height - 150);
​
      gain_sound.play();
      
      grad.pop();
    }
  }
}
​
//**Study class**
class Study {
​
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }
​
  show() {
    fill(0);
    image(study_img, this.x, this.y, this.z, this.z);
  }
​
  checkCollision() {
    if (dist(this.x, this.y, g_empl.x, g_empl.y) < this.z / 2 ||
      dist(this.x, this.y, r_empl.x, r_empl.y) < this.z / 2 ||
      dist(this.x, this.y, c_empl.x, c_empl.y) < this.z / 2) {
​
      this.x = random(width);
      this.y = random(height - 150);
​
      gain_sound.play();
      
      study.pop();
    }
  }
}
​
//**Rest class**
class Rest_button {
​
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }
​
  show() {
    fill(112, 219, 219);
    rect(this.x, this.y, this.w, this.h);
​
    fill(255);
    text("Let me take a rest", this.x + 19, this.y + 35);
  }
​
  checkCollision() {
    if (scene2_X > this.x && scene2_X < this.x + this.w &&
      scene2_Y > this.y && scene2_Y < this.y + this.h) {
      console.log('rest button working');
      sceneNum = 3;
​
      scene2_X = scene3_X;
      scene2_Y = scene3_Y;
      
      game_track.stop();
      end_sound.play();
    }
  }
}
​
//**You can do it! class *****
class YCDI_button {
​
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }
​
  show() {
    fill(112, 219, 219);
    rect(this.x, this.y - 25, this.w -10 , this.h);
​
    fill(255);
    text("You can do it!", this.x + 30, this.y + 10);
  }
​
  checkCollision() {
    if (scene3_X > this.x && scene3_X < this.x + this.w &&
      scene3_Y > this.y && scene3_Y < this.y + this.h) {
      console.log('YCDI button working');
      sceneNum = 1;
​
      scene3_X = scene2_X;
      scene3_Y = scene2_Y;
      
      game_track.loop();
    }
  }
}
​
Cookies

Sketch Files

Console

Preview
