Designed by Lu Jia

Critical Computation p7 Bitmap Game

Nov 10, 2020

*/

​

/*

DESCRIPTION:

In this Information Age, we are inblued with all kinds of information all the time. Are those all true? Do we really need to know a lot of those? I feel the answer is no. We are sometimes "forced" to observe those informations. And those will leave trace in our mind even if we don't intent to. And our perception can be altered by all the information. We may lose our own opinion when we browse through too much information. Since our perceptions are built and composed over time, while we are browsing. I build the game to let the avatar tries to "escape" from the layers of informations, not being blocked/limited by the perspectives that the news are giving.

*/

​

/*

REFLECTION:

There are pros and cons of fast information. We observe more and quicker. But sometimes it can be too much as well. The important thing is to not conform to what all informations are standing for. As it is presented in the game, the player sometimes can go through the "info" quickly, sometimes super slow. Because of the randomness of where and what "information" pops up, there are certain times that it becomes very hard to pass through the information. Reflecting on the fact that there are times that we get constrained by the information that are presented to us.

*/

​

​

let pixelFont;

let notify;

let notify2;

let gaming;

let radio;

let win;

let lose;

​

let score = 3;

let redEyes;

let eyes1;

let textBlock1, textBlock3, textBlock4, textBlock5, textBlock6, textBlock7, textBlock8;

let ear;

let hand;

let magni;

let sceneNum = 0;

let posts = [];

let postsNum = 16;

let webAds = [];

let AdsNum = 12;

​

let switch1 = true;

let switch2 = true;

let switch3 = true;

let switch4 = true;

let switch5 = true;

let switch6 = true;

​

​

​

function preload() {

  pixelFont = loadFont('PressStart2P-Regular.ttf');

  notify = loadSound('notification.m4a');

  notify2 = loadSound('notif.m4a');

  gaming = loadSound('gaming.m4a');

  radio = loadSound('radio.m4a');

  win = loadSound('win.m4a');

  lose = loadSound('lose.m4a');

  redEyes = loadImage('eyes-1.png');

  ear = loadImage('ear1.png');

  hand = loadImage('hand1.png');

  magni = loadImage('magnifier.png');

}

​

​

function setup() {

  createCanvas(600, 400);

  notify.setVolume(0.1);

  notify2.setVolume(0.1);

  gaming.setVolume(0.1);

  radio.setVolume(0.1);

  win.setVolume(0.1);

  lose.setVolume(0.1);

  eyes1 = new Eyes(width - 91, 14, redEyes.width * 0.1, redEyes.height * 0.1);

  ear1 = new Ear(width - 99, 7, ear.width * 0.17, ear.height * 0.17);

  hand1 = new Hand(width - 99, 7, hand.width * 0.17, hand.height * 0.17);

​

  textBlock1 = new TextBlock(8, 185, 70, 60, color(random(255), random(255), random(255)), 0.6, 185, 310);

  // textBlock2 = new TextBlock(95, 86, 150, 30, color(random(255), random(255), random(255)), 2, 85, 338);

  textBlock2 = new TextBlock(95, 340, 150, 20, color(random(255), random(255), random(255)), 0.6, 85, 350);

  textBlock3 = new TextBlock(263, 85, 15, 100, color(random(255), random(255), random(255)), 0.3, 85, 268);

  textBlock4 = new TextBlock(290, 85, 35, 30, color(random(255), random(255), random(255)), 0.5, 85, 290);

  textBlock5 = new TextBlock(345, 310, 45, 10, color(random(255), random(255), random(255)), 0.2, 100, 310);

  textBlock6 = new TextBlock(405, 100, 55, 60, color(random(255), random(255), random(255)), 0.3, 100, 300);

  textBlock7 = new TextBlock(475, 355, 83, 15, color(random(255), random(255), random(255)), 0.5, 180, 355);

​

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

    posts[i] = new Post(random(width), random(90, height - 160), random(5, 15), random(70, 110), color(random(255), random(255), random(255)));

  }

​

  for (let a = 0; a < AdsNum; a++) {

    webAds[a] = new WebAd(random(-50, width - 100), random(height), random(15, 50), random(70, 100), color(random(255), random(255), random(255)));

  }

}

​

​

​

​

function draw() {

  switch (sceneNum) {

    case 0:

      let ms = millis();

      if (ms < 7000) {

        background(15);

        mosaic0();

        intro();

      } else {

        sceneNum = 1;

      }

​

      if (switch1) {

        notify.play();

        switch1 = false;

      }

      break;

​

    case 1:

      background(160);

      textBlock1.body();

      textBlock1.move();

      textBlock2.body();

      textBlock2.move();

      textBlock3.body();

      textBlock3.move();

      textBlock4.body();

      textBlock4.move();

      textBlock5.body();

      textBlock5.move();

      textBlock6.body();

      textBlock6.move()

      textBlock7.body();

      textBlock7.move();

​

      textBlock1.checkCollision();

      textBlock2.checkCollision();

      textBlock3.checkCollision();

      textBlock4.checkCollision();

      textBlock5.checkCollision();

      textBlock6.checkCollision();

      textBlock7.checkCollision();

​

      newsPaper1();

      guide();

      eyes1.body();

      eyes1.move();

      eyes1.wall();

​

      if (score == 0) {

        sceneNum = 5;

      }

​

      if (switch1 == false) {

        notify.pause();

      }

​

      if (switch2) {

        gaming.loop();

        switch2 = false;

      }

​

      break;

​

    case 2:

      background(15);

      mosaic2();

      fm();

      guide();

​

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

        posts[i].body();

        posts[i].move();

        posts[i].checkCollision();

      }

​

      ear1.body();

      ear1.move();

      ear1.wall();

      if (score == 0) {

        sceneNum = 5;

      }

​

      if (switch2 == false) {

        gaming.pause();

      }

​

      if (switch3) {

        radio.loop();

        switch3 = false;

      }

​

      break;

​

    case 3:

      background(160);

      for (let a = 0; a < AdsNum; a++) {

        webAds[a].body();

        webAds[a].move();

        webAds[a].checkCollision();

      }

      guide();

      browser();

​

      hand1.body();

      hand1.move();

      hand1.wall();

      if (score == 0) {

        sceneNum = 5;

      }

​

      if (switch3 == false) {

        radio.pause();

      }

​

      if (switch4) {

        notify2.loop();

        switch4 = false;

      }

      break;

​

    case 4:

      background(20);

      mosaic();

      winning();

      if (switch4 == false) {

        notify2.pause();

      }

​

      if (switch5) {

        win.loop();

        switch5 = false;

      }

      break;

​

    case 5:

      background(160);

      mosaic();

      losing();

      if (switch2 == false || switch3 == false || switch4 == false || switch5 == false ) {

        notify2.pause();

        gaming.pause();

        radio.pause();

      }

​

      if (switch6) {

        lose.loop();

        switch6 = false;

      }

      break;

  }

}

​

​

​

​

​

​

​

​

​

​

​

​

//scene 0

function intro() {

  push();

  textAlign(CENTER);

  textFont(pixelFont);

  fill(245, 212, 7);

  textSize(25);

  text("* WARNING *", width / 2, height / 2 - 35);

  textSize(9);

  text("TONS OF INFORMATION IS COMING UP.\n\nBE CAREFUL DON'T LET THE THEM TAKE\nOVER YOU WHILE BROWSING THROUGH.", width / 2, height / 2 - 5)

  pop();

}

​

// scene 0

function mosaic0() {

  push();

  for (let x = 5; x <= width; x += 35) {

    for (let y = 5; y <= height; y += 35) {

      stroke(random(255), random(255), random(255), random(250));

      noFill();

      ellipse(x, y, 1, 1);

    }

  }

  pop();

}

​

​

​

​

​

​

​

​

​

​

​

​

//scene 1

class Eyes {

  constructor(x, y, w, h) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

  }

​

  body() {

    image(redEyes, this.x, this.y, this.w, this.h);

  }

​

  move() {

    if (keyIsDown(40)) {

      this.y += 3;

    }

    if (keyIsDown(38)) {

      this.y -= 3;

    }

    if (keyIsDown(37)) {

      this.x -= 3;

    }

    if (keyIsDown(39)) {

      this.x += 3;

    }

    if (this.y > height) {

      sceneNum = 2;

      this.x = width - 91;

      this.y = 14;

    }

  }

​

  wall() {

    if (this.x < -1) {

      this.x = -1;

    }

    if (this.x > 533) {

      this.x = 533;

    }

    if (this.y < -2) {

      this.y = -2;

    }

    if (this.y > 335 && this.x > 135) {

      this.y = 335;

    }

  }

}

​

​

//scene 1

class TextBlock {

  constructor(x, y, w, h, c, s, miy, my) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.c = c;

    this.speed = s;

    this.minY = miy;

    this.maxY = my;

  }

​

  body() {

    push();

    fill(this.c);

    strokeWeight(1);

    rect(this.x, this.y, this.w, this.h, 2);

    pop();

  }

​

  move() {

    this.y += this.speed;

​

    if (this.y > this.maxY) {

      this.speed = -this.speed;

    }

​

    if (this.y < this.minY) {

      this.speed = -this.speed;

    }

  }

​

  checkCollision() {

    if (eyes1.x - this.w < this.x && eyes1.x + eyes1.w > this.x && eyes1.y < this.y + this.h && eyes1.y + eyes1.h > this.y) {

      eyes1.x = width - 99;

      eyes1.y = 7;

      score--;

    }

  }

}

​

​

// scene 1

function newsPaper1() {

  textSize(47);

  textFont(pixelFont);

  fill(10);

  text('DAILY NEWS', 9, 68.5);

​

  strokeWeight(1.5);

  line(9, 9, 473, 9);

  line(9, 14, 473, 14);

​

  line(9, 70, 473, 70);

  line(9, 75, 473, 75);

}

​

​

//scene 1, 2 & 3

function guide() {

  push();

  textFont(pixelFont);

  textSize(10);

  fill(245, 212, 7);

  // noStroke();

  text('TO THE NEXT PAGE', 8, 393);

  // text('ESCAPE HERE', 8, 393);

  text('SCORE' + ' ' + score, width - 90, 393);

  pop();

}

​

​

​

​

​

​

​

​

​

​

​

//scene 2

class Ear {

  constructor(x, y, w, h) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

  }

​

  body() {

    image(ear, this.x, this.y, this.w, this.h);

  }

​

  move() {

    if (keyIsDown(40)) {

      this.y += 3;

    }

    if (keyIsDown(38)) {

      this.y -= 3;

    }

    if (keyIsDown(37)) {

      this.x -= 3;

    }

    if (keyIsDown(39)) {

      this.x += 3;

    }

    if (this.y > height) {

      sceneNum = 3;

      this.x = width - 99;

      this.y = 7;

    }

  }

​

  wall() {

    if (this.x < -1) {

      this.x = -1;

    }

    if (this.x > 533) {

      this.x = 533;

    }

    if (this.y < -2) {

      this.y = -2;

    }

    if (this.y > 335 && this.x > 135) {

      this.y = 335;

    }

  }

}

​

​

​

// scene 2

class Post {

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

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.c = c;

  }

​

  body() {

    push();

    fill(this.c);

    noStroke();

    rect(this.x, this.y, this.w, this.h, 5);

    pop();

  }

​

  move() {

    this.x++;

​

    if (this.x > width) {

      this.x = -50;

    }

  }

​

  checkCollision() {

    if (ear1.x - this.w < this.x && ear1.x + ear1.w > this.x && ear1.y < this.y + this.h && ear1.y + ear1.h > this.y) {

      ear1.x = width - 99;

      ear1.y = 7;

      score--;

    }

  }

}

​

​

​

// scene 2

function fm() {

  textSize(40);

  textFont(pixelFont);

  fill(8, 255, 0, random(180, 255));

  text('94.5 FM', 12, 63);

}

​

​

​

// scene 2

function mosaic2() {

  push();

  for (let x = 5; x <= width; x += 20) {

    for (let y = 5; y <= height; y += 20) {

      stroke(random(255), random(255), random(255), random(250));

      noFill();

      ellipse(x, y, 1, 1);

    }

  }

  pop();

}

​

​

​

​

​

​

​

​

​

​

​

//scene 3

class Hand {

  constructor(x, y, w, h) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

  }

​

  body() {

    image(hand, this.x, this.y, this.w, this.h);

  }

​

  move() {

    if (keyIsDown(40)) {

      this.y += 3;

    }

    if (keyIsDown(38)) {

      this.y -= 3;

    }

    if (keyIsDown(37)) {

      this.x -= 3;

    }

    if (keyIsDown(39)) {

      this.x += 3;

    }

    if (this.y > height) {

      sceneNum = 4;

      this.x = width - 99;

      this.y = 7;

    }

  }

​

  wall() {

    if (this.x < -7) {

      this.x = -7;

    }

    if (this.x > 533) {

      this.x = 533;

    }

    if (this.y < -2) {

      this.y = -2;

    }

    if (this.y > 322 && this.x > 135) {

      this.y = 322;

    }

  }

}

​

​

//scene 3

function browser() {

  push();

  fill(205);

  strokeWeight(1);

  rect(9, 18, 280, 50, 5);

  textSize(30);

  textFont(pixelFont);

  fill(10);

  text('SEARCH', 20, 60);

  image(magni, 235, 23.5, magni.width * 0.09, magni.height * 0.09);

  pop();

}

​

​

//scene 3

class WebAd {

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

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.c = c;

  }

​

  body() {

    push();

    fill(this.c);

    // noStroke();

    strokeWeight(1);

    rectMode(CENTER);

    rect(this.x, this.y, this.w, this.h, 5);

    pop();

  }

​

  move() {

    this.y--;

    if (this.y < -50) {

      this.y = height + 50;

    }

  }

​

  checkCollision() {

    if (hand1.x - this.w < this.x && hand1.x + hand1.w > this.x && hand1.y < this.y + this.h && hand1.y + hand1.h > this.y) {

      hand1.x = width - 99;

      hand1.y = 7;

      score--;

    }

  }

}

​

​

​

​

​

​

​

​

​

​

//scene 4

function winning() {

  push();

  textAlign(CENTER);

  textFont(pixelFont);

  textSize(20);

  fill(245, 212, 7);

  text('WOOHOO!\nYOU MADE IT!', width / 2, height / 2 - 10);

  textSize(10);

  text('PLAY AGAIN', width / 2, 393);

  if (mouseIsPressed && mouseX > 200 && mouseX < 400 && mouseY > 380 && mouseY < 400) {

    sceneNum = 1;

    score = 3;

  }

  pop();

}

​

​

// scene 4

function mosaic() {

  push();

  for (let x = 5; x <= width; x += 15) {

    for (let y = 5; y <= height; y += 15) {

      // fill(random(255),random(255), random(255));

      // strokeWeight(3/4);

      stroke(random(255), random(255), random(255), random(250));

      noFill();

      ellipse(x, y, 1, 1);

    }

  }

  pop();

}

​

​

​

​

​

​

​

​

​

​

​

//scene 5

function losing() {

  push();

  textAlign(CENTER);

  textFont(pixelFont);

  textSize(15);

  fill(25);

  text('OH NO...\nINFORMATION TAKES OVER YOUR MIND.', width / 2, height / 2 - 15);

  textSize(10);

  text('START OVER', width / 2, 393);

​

  if (mouseIsPressed && mouseX > 200 && mouseX < 400 && mouseY > 380 && mouseY < 400) {

    sceneNum = 1;

    score = 3;

  }

  pop();

}