{"id":69390,"date":"2021-12-04T18:11:33","date_gmt":"2021-12-04T23:11:33","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69390"},"modified":"2021-12-04T18:11:33","modified_gmt":"2021-12-04T23:11:33","slug":"final-project-14","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-14\/","title":{"rendered":"Final Project 14"},"content":{"rendered":"\n

Game Code<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">let noiseY;\nlet noiseSpeed = 0.07;\nlet noiseHeight = 20;\nlet bubbles = [];\nlet enemies = [];\nlet score = 0;\n\n\n\n\n\n\nfunction setup() {\n createCanvas(600, 600);\n \/\/background(10, 50, 255);\n noiseY = height * 3.2 \/ 4;\n \n\/\/}\n\n \n \/\/ spawn the enemies or in this case trash\/waste\n for (let e = 0; e < 15; e++) {\n let enemy = {\n x: random(0, width),\n y: random(-600, 0),\n c: color(random(255), random(255), random(255))\n };\n enemies.push(enemy);\n }\n\n}\n\nfunction drawOceanWaves() {\n \/\/ draw ocean waves\n for (let i = 0; i < 4; i++) {\n let offsetY = i * 90;\n noFill();\n \/\/fill('blue')\n stroke(255, 20);\n strokeWeight(height \/ 2);\n beginShape();\n curveVertex(2, height \/ 2);\n for (let x = 0; x < width; x += 40) {\n let y = noise(frameCount * noiseSpeed + x + i) * noiseHeight + noiseY + offsetY;\n curveVertex(x, y);\n }\n curveVertex(width, height \/ 4);\n endShape();\n }\n}\n\n\n\n\n\n\n\n\nfunction draw() {\n \n\n background(10, 20, 200);\n\n \/\/ draw ocean waves\n \n drawOceanWaves ();\n\n fill('blue');\n strokeWeight(0);\n \/\/ draw player\n rectMode(CENTER);\n ellipse(mouseX, height - 20, 20);\n\n\n \/\/ draw bubbles update\n for (let bubble of bubbles) {\n bubble.y -= 15;\n circle(bubble.x, bubble.y, 20);\n \/\/fill('blue');\n }\n fill(255);\n\n \/\/ draw enemies update\n for (let enemy of enemies) {\n enemy.y += 4;\n fill(enemy.c);\n square(enemy.x, enemy.y, 40);\n if (enemy.y > height) {\n fill(255);\n text(\"Game Over!\", width \/ 2.5, height \/ 2);\n noLoop();\n }\n }\n\n \/\/ collisions\n for (let enemy of enemies) {\n for (let bubble of bubbles) {\n if (dist(enemy.x, enemy.y, bubble.x, bubble.y) < 80) {\n enemies.splice(enemies.indexOf(enemy), 1);\n bubbles.splice(bubbles.indexOf(bubble), 1);\n let newEnemy = {\n x: random(0, width),\n y: random(-800, 0),\n c: color(random(255), random(255), random(255))\n };\n enemies.push(newEnemy);\n \/\/ each hit counts as 1\n score += 1;\n }\n }\n }\n fill(255);\n textSize(30); \n text(score, 20, 30);\n\n}\n \/\/ shoot bubbles\nfunction keyPressed() {\n if (key === \" \") {\n let bubble = {\n x: mouseX,\n y: height - 50,\n };\n bubbles.push(bubble);\n\n }\n\n\n \n}\n\n<\/code><\/pre><\/p>\n\n\n\n<p>So originally I was going to create an image with trash being left out in the ocean to represent ocean pollution. I dropped that idea since I felt like it was too simple and I couldn’t run a local server in the past. I finally decided that I wanted to code a game. The idea was to represent squares as waste being thrown in the ocean and there’s a player who has to shoot down as many waste before it reaches past the canvas. I re wrote all of my code and started from scratch. I watched tutorials on youtube and looked up on google on how to use for of loop on JavaScript. When coding the game I had a lot of issues especially with the text and textsize syntax. I found out later that my brackets were off and were interfering with my other parameters. I finally got the game to work and I’ve never felt this satisfied with myself since coding for me is a whole different language and a very difficult skill to learn. How the game works is that you have to shoot as many squares (trash) before it reaches past the canvas. You drag MouseX to move around the canvas. There is also a score on the top left. Each hit counts as 1. You press spacebar to shoot the bubbles. If the squares go past the canvas “Game Over!”. If I had more time to work on this game I would want to add a healthbar for the player or randomize the speed of the squares. Its a simple game but I am proud of the results.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Game Code let noiseY; let noiseSpeed = 0.07; let noiseHeight = 20; let bubbles = []; let enemies = []; let score = 0; function setup() { createCanvas(600, 600); \/\/background(10, 50, 255); noiseY = height * 3.2 \/ 4; \/\/} \/\/ spawn the enemies or in this case trash\/waste for (let e = 0; e … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-14\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Final Project 14”<\/span><\/a><\/p>\n","protected":false},"author":637,"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\/69390"}],"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\/637"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69390"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69390\/revisions"}],"predecessor-version":[{"id":69394,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69390\/revisions\/69394"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}