How to play: In order to win the game, the player must move the polar bear to its home (the iceberg) while avoiding the obstacles. The polar bear can be moved in four directions using the arrow keys. When the polar bear comes into contact with an obstacle, the number of lives will decrease and the background will slightly turn blue (representing ice melting). There’s a total of 60 lives to start with, and there’s also a timer that counts down from a minute. If the number of lives or time runs out before the polar bear reaches home, then the game is over.
// variables for images
var bear;
var home;
var factory;
var fire;
var bottle;
//variable for bear & obstacles
var bearx = 90;
var beary = 550;
var fires = [];
var factories = [];
var bottles = [];
// variables for background color
var colorR = 255;
var colorG = 253;
var colorB = 240;
var stepR;
var stepG;
var stepB;
// variable for timer
var timer = 60;
// variable for lives
var lives = 60;
// variables for winning
var victory = false;
var angle = 0;
function preload() {
bear = loadImage("https://i.imgur.com/P6jBMLN.png");
home = loadImage("https://i.imgur.com/GZBJAQt.png");
factory = loadImage("https://i.imgur.com/8uJDtMZ.png");
fire = loadImage("https://i.imgur.com/P8Og7bN.png");
bottle = loadImage("https://i.imgur.com/Q3Qch7G.png");
}
function setup() {
createCanvas(500, 600);
imageMode(CENTER);
home.resize(170, 0);
bear.resize(100, 0);
fire.resize(60, 0);
factory.resize(60, 0);
bottle.resize(60, 0);
// get dimensions of images
print("fire width" + " " + fire.width);
print("fire height" + " " + fire.height);
print("bear width" + " " + bear.width);
print("bear height" + " " + bear.height);
print("factory width" + " " + factory.width);
print("factory height" + " " + factory.height);
print("bottle width" + " " + bottle.width);
print("bottle height" + " " + bottle.height);
// make obstacles
for (var i = 0; i < 3; i ++) {
var startposition = random(0, width/5)*5;
var startspeed = random(0, 3);
fires.push(makeFire(startposition, 0, startspeed));
}
for (var i = 0; i < 3; i ++) {
var startposition = random(0, width/5)*5;
var startspeed = random(0, 3);
factories.push(makeFactory(startposition, 0, startspeed));
}
for (var i = 0; i < 3; i ++) {
var startposition = random(0, width/5)*5;
var startspeed = random(0, 3);
bottles.push(makeBottle(startposition, 0, startspeed));
}
}
function draw() {
background(colorR, colorG, colorB); // initial cream color
// game over melted ice will be blue => (177, 224, 230)
stepR = (255 - 177) / 60;
stepG = (253 - 224) / 60;
stepB = (240 - 230) / 60;
// timer
textSize(20);
textAlign(CENTER);
text("Timer: " + timer, 430, 580);
text("Lives: " + lives, 330, 580);
if (frameCount % 60 == 0 & timer > 0) {
timer -= 1; // counts down
}
if (timer == 0) { // if times run out, game ends
gameover();
}
image(home, width/2, 70);
image(bear, bearx, beary);
// controlling bear's position through arrow keys
if (keyIsPressed & victory == false) {
if (keyCode === LEFT_ARROW && bearx >= 50) {
bearx -= 2;
}
if (keyCode === RIGHT_ARROW & bearx <= width - 50) {
bearx += 2;
}
if (keyCode === UP_ARROW & beary >= 28.5) {
beary -= 2;
}
if (keyCode === DOWN_ARROW & beary <= height - 28.5) {
beary += 2;
}
}
if (bearx >= width/2 - 20 & bearx <= width/2 + 20 && beary >= 50 && beary <= 90) { // if bear reaches home
win();
}
obstacles(fires, 44);
obstacles(factories, 35);
obstacles(bottles, 26.5);
}
// function to show & update obstacles + interaction
function obstacles(array, size) {
for (var i = 0; i < array.length; i++) {
array[i].show();
array[i].update();
if ((bearx >= array[i].x - 80 & bearx <= array[i].x + 80) && (beary >= array[i].y - size && beary <= array[i].y + size)) {
if (colorR >= 177 || colorG >= 224 || colorB >= 230) {
colorR -= stepR;
colorG -= stepG;
colorB -= stepB;
lives -= 1;
} else {
gameover(); break;
}
}
}
}
// fire object
function makeFire(fx, fy, fspeed) {
var fireobject = {x: fx, y: fy, speed: fspeed, show: fireShow, update: fireUpdate};
return fireobject;
}
function fireShow() {
image(fire, this.x, this.y);
}
function fireUpdate() {
this.y += this.speed;
if (this.y - 44 >= height) {
this.y = -44;
}
}
// factory object
function makeFactory(facx, facy, facspeed) {
var factoryobject = {x: facx, y: facy, speed: facspeed, show: factoryShow, update: factoryUpdate};
return factoryobject;
}
function factoryShow() {
image(factory, this.x, this.y);
}
function factoryUpdate() {
this.y += this.speed;
if (this.y - 35 >= height) {
this.y = -35;
}
}
// bottle object
function makeBottle(bx, by, bspeed) {
var bottleobject = {x: bx, y: by, speed: bspeed, show: bottleShow, update: bottleUpdate};
return bottleobject;
}
function bottleShow() {
image(bottle, this.x, this.y);
}
function bottleUpdate() {
this.y += this.speed;
if (this.y - 26.5 >= height) {
this.y = -26.5;
}
}
// game over function
function gameover() {
background(212, 36, 17); // red background if game over
textSize(45);
text("GAME OVER!", width/2, height/2);
//stopping everything else
fires = [];
factories = [];
bottles = [];
victory = true;
noLoop();
}
// you win function
function win() {
background(149, 217, 143); // green background if win
textSize(45);
text("YOU WIN!", width/2, height/2);
// rotating the bear if win
push();
translate(width/2, 200);
rotate(radians(angle));
imageMode(CENTER);
image(bear, 0, 0);
pop();
angle += 5;
//stopping everything else
fires = [];
factories = [];
bottles = [];
victory = true;
}
Since the theme of our final project was climate change, I wanted to incorporate different causes of climate change through the form of an interactive game where the polar bear symbolizes the victims of global warming. The polar bear has to avoid obstacles including pollution from a factory, plastic waste in the ocean, and forest fires, in order to safely reach home. It’s difficult to win the game, which symbolizes how we’ve neglected this issue for so long that it’s now quite impossible to reverse the impact.
If I had more time to work on this project, I might add positive objects such as renewable energy sources that the bear can touch and will increase the number of lives or the remaining time, representing potential actions to reverse or reduce climate change.