{"id":69404,"date":"2021-12-04T20:50:37","date_gmt":"2021-12-05T01:50:37","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69404"},"modified":"2021-12-04T20:50:37","modified_gmt":"2021-12-05T01:50:37","slug":"final-project-10","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-10\/","title":{"rendered":"Final Project"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><p>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&rsquo;s a total of 60 lives to start with, and there&rsquo;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. <\/p>\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/sketch-25.js\" data-width=\"500\" data-height=\"600\">final project<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"500\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ variables for images\nvar bear; \nvar home; \nvar factory;\nvar fire;\nvar bottle;\n\n\/\/variable for bear & obstacles\nvar bearx = 90;\nvar beary = 550;\nvar fires = [];\nvar factories = [];\nvar bottles = [];\n\n\/\/ variables for background color\nvar colorR = 255;\nvar colorG = 253;\nvar colorB = 240;\nvar stepR;\nvar stepG;\nvar stepB;\n\n\/\/ variable for timer\nvar timer = 60;\n\n\/\/ variable for lives\nvar lives = 60; \n\n\/\/ variables for winning\nvar victory = false;\nvar angle = 0;\n\nfunction preload() {\n    bear = loadImage(\"https:\/\/i.imgur.com\/P6jBMLN.png\");\n    home = loadImage(\"https:\/\/i.imgur.com\/GZBJAQt.png\");\n    factory = loadImage(\"https:\/\/i.imgur.com\/8uJDtMZ.png\");\n    fire = loadImage(\"https:\/\/i.imgur.com\/P8Og7bN.png\");\n    bottle = loadImage(\"https:\/\/i.imgur.com\/Q3Qch7G.png\");\n}\n\nfunction setup() {\n    createCanvas(500, 600);\n    imageMode(CENTER);\n    home.resize(170, 0);\n    bear.resize(100, 0);\n    fire.resize(60, 0);\n    factory.resize(60, 0);\n    bottle.resize(60, 0);\n    \/\/ get dimensions of images\n    print(\"fire width\" + \" \" + fire.width);\n    print(\"fire height\" + \" \" + fire.height); \n    print(\"bear width\" + \" \" + bear.width);\n    print(\"bear height\" + \" \" + bear.height);\n    print(\"factory width\" + \" \" + factory.width);\n    print(\"factory height\" + \" \" + factory.height); \n    print(\"bottle width\" + \" \" + bottle.width);\n    print(\"bottle height\" + \" \" + bottle.height); \n    \n    \/\/ make obstacles \n    for (var i = 0; i &lt; 3; i ++) {\n        var startposition = random(0, width\/5)*5;\n        var startspeed = random(0, 3);\n        fires.push(makeFire(startposition, 0, startspeed));\n    }\n\n    for (var i = 0; i &lt; 3; i ++) {\n        var startposition = random(0, width\/5)*5;\n        var startspeed = random(0, 3);\n        factories.push(makeFactory(startposition, 0, startspeed));   \n    }\n\n    for (var i = 0; i &lt; 3; i ++) {\n        var startposition = random(0, width\/5)*5;\n        var startspeed = random(0, 3);\n        bottles.push(makeBottle(startposition, 0, startspeed));   \n    }\n}\n\nfunction draw() {\n    background(colorR, colorG, colorB); \/\/ initial cream color\n\n    \/\/ game over melted ice will be blue =&gt; (177, 224, 230)\n    stepR = (255 - 177) \/ 60;\n    stepG = (253 - 224) \/ 60;\n    stepB = (240 - 230) \/ 60;\n\n    \/\/ timer \n    textSize(20);\n    textAlign(CENTER);\n    text(\"Timer: \" + timer, 430, 580);\n    text(\"Lives: \" + lives, 330, 580);\n        \n    if (frameCount % 60 == 0 & timer > 0) {\n        timer -= 1; \/\/ counts down \n    } \n    if (timer == 0) { \/\/ if times run out, game ends\n        gameover();\n    }\n\n    image(home, width\/2, 70); \n    image(bear, bearx, beary);\n\n    \/\/ controlling bear's position through arrow keys \n    if (keyIsPressed & victory == false) {\n        if (keyCode === LEFT_ARROW && bearx >= 50) {\n            bearx -= 2;\n        }\n        if (keyCode === RIGHT_ARROW & bearx <= width - 50) {\n            bearx += 2;\n        }\n        if (keyCode === UP_ARROW & beary >= 28.5) {\n            beary -= 2;\n        }\n        if (keyCode === DOWN_ARROW & beary <= height - 28.5) {\n            beary += 2;\n        }\n    }\n    \n    if (bearx &gt;= width\/2 - 20 & bearx <= width\/2 + 20 && beary >= 50 && beary <= 90) { \/\/ if bear reaches home\n        win();\n    }\n\n    obstacles(fires, 44);\n    obstacles(factories, 35);\n    obstacles(bottles, 26.5);\n}\n\n\/\/ function to show & update obstacles + interaction \nfunction obstacles(array, size) {\n    for (var i = 0; i &lt; array.length; i++) {\n        array[i].show();\n        array[i].update();\n        if ((bearx &gt;= array[i].x - 80 & bearx <= array[i].x + 80) && (beary >= array[i].y - size && beary <= array[i].y + size)) {\n            if (colorR >= 177 || colorG >= 224 || colorB >= 230) {\n                colorR -= stepR;\n                colorG -= stepG;\n                colorB -= stepB;\n                lives -= 1;\n            } else {\n                gameover(); break;\n            }\n        } \n    }\n}\n\n\n\/\/ fire object\nfunction makeFire(fx, fy, fspeed) {\n    var fireobject = {x: fx, y: fy, speed: fspeed, show: fireShow, update: fireUpdate};\n    return fireobject;\n}\n\nfunction fireShow() {\n    image(fire, this.x, this.y);\n}\n\nfunction fireUpdate() {\n    this.y += this.speed;\n    if (this.y - 44 &gt;= height) {\n        this.y = -44;\n    }\n}\n\n\/\/ factory object \nfunction makeFactory(facx, facy, facspeed) {\n    var factoryobject = {x: facx, y: facy, speed: facspeed, show: factoryShow, update: factoryUpdate};\n    return factoryobject;\n}\n\nfunction factoryShow() {\n    image(factory, this.x, this.y);\n}\n\nfunction factoryUpdate() {\n    this.y += this.speed;\n    if (this.y - 35 &gt;= height) {\n        this.y = -35;\n    }\n}\n\n\/\/ bottle object\nfunction makeBottle(bx, by, bspeed) {\n    var bottleobject = {x: bx, y: by, speed: bspeed, show: bottleShow, update: bottleUpdate};\n    return bottleobject;\n}\n\nfunction bottleShow() {\n    image(bottle, this.x, this.y);\n}\n\nfunction bottleUpdate() {\n    this.y += this.speed;\n    if (this.y - 26.5 &gt;= height) {\n        this.y = -26.5;\n    }\n}\n\n\/\/ game over function\nfunction gameover() {\n    background(212, 36, 17); \/\/ red background if game over\n    textSize(45);\n    text(\"GAME OVER!\", width\/2, height\/2);\n    \/\/stopping everything else\n    fires = [];\n    factories = [];\n    bottles = [];\n    victory = true;\n    noLoop();\n}\n\n\/\/ you win function \nfunction win() {\n    background(149, 217, 143); \/\/ green background if win\n    textSize(45);\n    text(\"YOU WIN!\", width\/2, height\/2);\n    \/\/ rotating the bear if win\n    push();\n    translate(width\/2, 200);\n    rotate(radians(angle));\n    imageMode(CENTER);\n    image(bear, 0, 0);\n    pop();\n    angle += 5;\n    \/\/stopping everything else\n    fires = [];\n    factories = [];\n    bottles = [];\n    victory = true;\n}<\/code><\/pre><\/div>\n\n\n<p>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&rsquo;s difficult to win the game, which symbolizes how we&rsquo;ve neglected this issue for so long that it&rsquo;s now quite impossible to reverse the impact. <\/p>\n\n\n\n<p>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.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-10\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Final Project&#8221;<\/span><\/a><\/p>\n","protected":false},"author":671,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[116,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69404"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/671"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69404"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69404\/revisions"}],"predecessor-version":[{"id":69408,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69404\/revisions\/69408"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}