![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
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);
}