Final Project

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.

final project
// 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.

Leave a Reply