Final Project

I wanted to raise awareness about melting icebergs due to global warming so I created a game where a polar bear must jump on multiple floating icebergs to reach a safer large iceberg. I was inspired by games like frogger and crossy road and wanted to create an interactive easy game that would help users understand global warming better. To play the game user must press the space button to continue and press up to navigate. Land on the iceberg and you will be safe, if you land in the ocean, you will die. Make sure to move up before you drift off into the ocean. Also note that there are some weak icebergs that will break if you are unlucky. If I had more time I would work on creating levels with more iceberg rows and increasing speed of the icebergs, and maybe add more obstacles like a sea lion or natural predators of polar bears.

sketch

//code for screen changes
var currentScreen = "start";

//for the icebergs
var icebergs1 = [];
var icebergs2 = [];
var icebergs3 = [];
var icebergs4 = [];
var icebergs5 = [];
var x;

//for the movement of the game
var py = 0;
var count = 0;
var safe = true;

//for the melting icebergs
var beginIceberg = [];
var noiseParam = 0;
var noiseStep= 0.05;
var endingIceberg = [];
var noiseParam = 0;
var noiseStep= 0.05;

//for the baby polar bear location
var positionX = 250;
var positionY = 450;


function setup() {
    createCanvas(500, 500);
    text("p5.js vers 0.9.0 test.", 10, 15);
    start();
    //the initial icebergs
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = -50;
       icebergs1[i]=makeIceberg(x,y); 
      }
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 50;
       icebergs2[i]=makeIceberg(x,y); 
      }
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 150;
       icebergs3[i]=makeIceberg(x,y); 
      }
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 250;
       icebergs4[i]=makeIceberg(x,y); 
      }
       
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 350;
       icebergs5[i]=makeIceberg(x,y); 
      }
    //for the starting iceberg
      for (var i=0; i < width/5; i++){
        n=noise(noiseParam);
        value = map(n,0,1,400,450);
        beginIceberg.push(value);
        noiseParam += noiseStep;
    }

    //for the ending iceberg
     for (var i=0; i < width/5; i++){
      n=noise(noiseParam);
      value = map(n,0,1,-150,-100);
      endingIceberg.push(value);
      noiseParam += noiseStep;
    }
    
    frameRate(10);
}

function draw() {
  translate(0,py);
  //the blue ocean
  background(0,0,200);

  //the start screen
  if (currentScreen == "start"){
    start();
    if (keyIsPressed){
      currentScreen = "game";
    }
  }
  
  //plays the game screen
  else if (currentScreen == "game"){
    gameScreen();
  }
  
  //plays the lose screen
  else if (currentScreen == "lose"){
    elimination();
  }
  
  //playes the win screen
  else if (currentScreen == "win"){
    win();
  }
  

}

//Game Scene 

function gameScreen(){
  //the starting scene of the melting large iceberg
  meltingIceberg();
  
  //the icebergs
  updateAndDisplayIceberg();
  addNewIcebergs(); 
  
  //the movement of the game - to continuosly check if its on an iceberg
  if (count == 1){
      for (var i = 0; i < icebergs1.length; i++){
        if (positionX >= icebergs1[i].x & positionX + 20 <= icebergs1[i].x + icebergs1[i].width){
          positionX += 3;
          safe = true;
          break;;
        }
      }
    }
  if (count == 2){
      for (var i = 0; i < icebergs2.length; i++){
        if (positionX >= icebergs2[i].x & positionX + 20 <= icebergs2[i].x + icebergs2[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
  if (count == 3){
      for (var i = 0; i < icebergs3.length; i++){
        if (positionX >= icebergs3[i].x & positionX + 20 <= icebergs3[i].x + icebergs3[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
  if (count == 4){
      for (var i = 0; i < icebergs4.length; i++){
        if (positionX >= icebergs4[i].x & positionX + 20 <= icebergs4[i].x + icebergs4[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
  if (count == 5){
      for (var i = 0; i < icebergs5.length; i++){
        if (positionX >= icebergs5[i].x & positionX + 20 <= icebergs5[i].x + icebergs5[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
    
  if (positionX+20 > width){
    safe = false;
  }
    
  
    //if safe = false - game over
    if (safe == false){
      currentScreen = "lose";
      //noLoop()
    }
   
  //endgame
  if (count == 6){
    //display winning scene
    currentScreen = "win";
  }
 meltingIceberg2();
 
  //the baby polar bear 
  babyPolarBear();
}

//The large icebergs

function meltingIceberg(){
  fill("white");
  stroke("white");
  beginShape();
  vertex(0,height);
  
  for(i=0; i<width/5;i++){
    vertex(i*5,beginIceberg[i]);
  }
  
  vertex(width+50,height);
  endShape(CLOSE); 
  n=noise(noiseParam);
  value = map(n,0,1,400,450);
  beginIceberg.shift();
  beginIceberg.push(value);
  noiseParam += noiseStep;
}

function meltingIceberg2(){
 //The ending scene is a melting iceberg with the mother polar bear
  fill("white");
  stroke("white");
  beginShape();
  vertex(0,-600);
  
  for(i=0; i<width/5;i++){
    vertex(i*5,endingIceberg[i]);
  }
  
  vertex(width+50,-600);
  endShape(CLOSE); 
  n=noise(noiseParam);
  value = map(n,0,1,-150,-100);
  endingIceberg.shift();
  endingIceberg.push(value);
  noiseParam += noiseStep;
}


//code to do the jumps

//to draw baby polar bear and its respective movements (initally just a square, will later create details) 

function babyPolarBear(){
  fill("red");
  rect(positionX, positionY, 20,20); //might need to fix size later 
}

function keyPressed(){
  if (keyCode == UP_ARROW & currentScreen == "game"){
      py+=100;
      positionY -= 100;
      count++;
      safe = false;
      gameScreen();
    }
}

//object creation of the icebergs

function makeIceberg(x,y){
  var ice = {
    x,
    y,
    height: 25,
    width: floor(random(40,60)),
    speed: 3, 
    display: displayIceberg,
    move:moveIceberg
  }
  return ice;  
  }
 
 function displayIceberg(x,y){
   fill("white");
   rect(this.x,this.y,this.width,this.height);
 }   
 
 function moveIceberg(x){
   this.x+=this.speed;
 } 
 
 function updateAndDisplayIceberg(){
   for(var i = 0; i < icebergs1.length; i++){
     icebergs1[i].move();
     icebergs1[i].display();
   }
   for(var i = 0; i < icebergs2.length; i++){
     icebergs2[i].move();
     icebergs2[i].display();
   }
   for(var i = 0; i < icebergs3.length; i++){
     icebergs3[i].move();
     icebergs3[i].display();
   }
   for(var i = 0; i < icebergs4.length; i++){
     icebergs4[i].move();
     icebergs4[i].display();
   }
   for(var i = 0; i < icebergs5.length; i++){
     icebergs5[i].move();
     icebergs5[i].display();
   }
 }
   
 function addNewIcebergs(){ //should I change this to different logic?
   var newIcebergLikelihood = 0.05;
   var x = -40;
   if (random(0,1) < newIcebergLikelihood){
     icebergs1.push(makeIceberg(x,350));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs2.push(makeIceberg(x,250));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs3.push(makeIceberg(x,150));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs4.push(makeIceberg(x,50));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs5.push(makeIceberg(x,-50));
   }
 }
 

//Code to implement width

function icebergWidth(){
  return this.x + this.width;
}



//starting scene - instructions stuff - press space to continue
function start(){
  fill("green");
  rect(0,0,width,height);
  textSize(15);
  fill("white");
  text("Welcome to Save the POLAR BEAR from Global Warming", 50 ,200);
  textSize(15);
  fill("white");
  text("Press Space to Continue", 50,260);
  textSize(15);
  fill("white");
  let word = 'Instructions: Press the up key to move the polar bear (the red square) forward. Land on the iceberg and you will be safe, if you land in the ocean, you will die. Make sure to move up before you drift off into the ocean. Also note that there are some icebergs that are hidden if you are lucky and some weak icebergs that will break if you are unlucky. Can you reach the safe iceberg?'
  text(word,50,280, 400,200);
}

//The winning scene
function win(){
  fill("yellow");
  rect(0,0 - 100* count,width,height);
  textSize(50);
  fill("black");
  text("You have Won", 50 ,250 - 100* count);
  textSize(20);
  fill("black");
  text("Reload page to play again", 250,290 - 100* count);
}

// elimination scene 

function elimination(){
  fill("black");
  rect(0 ,0 - 100* count,width,height);
  textSize(50);
  fill("white");
  text("You have LOST", 50 ,250 - 100* count);
  textSize(20);
  fill("white");
  text("Reload page to play again", 250,290 - 100* count);
  
}


Leave a Reply