{"id":68769,"date":"2021-11-07T21:52:29","date_gmt":"2021-11-08T02:52:29","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68769"},"modified":"2021-11-07T21:52:29","modified_gmt":"2021-11-08T02:52:29","slug":"project-10-sonic-story-7","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/07\/project-10-sonic-story-7\/","title":{"rendered":"Project 10: Sonic-Story"},"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><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"300\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-27.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"300\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Yash Mittal\n\/\/ Section D\n\/\/I made a basic 1v1 fighting game where two figures are fighting with swords\n\/\/The health bar of the two figures is shown at the bottom of the screen \n\nvar count = 0; \/\/variable for tracking frame count\n\nfunction preload(){\n    pimg = loadImage (\"https:\/\/i.imgur.com\/Fn5pkxI.jpg\"); \/\/background arena image\n    thunderimg = loadImage (\"https:\/\/i.imgur.com\/VAJWvZZ.png\"); \/\/thunder image\n    countdownThree = loadSound(\"http:\/\/localhost:8000\/countdown_three.wav\");\n    countdownTwo = loadSound(\"http:\/\/localhost:8000\/countdown_two.wav\");\n    countdownOne = loadSound(\"http:\/\/localhost:8000\/countdown_one.wav\");\n    countdownFight = loadSound(\"http:\/\/localhost:8000\/countdown_fight.wav\");\n    thunder = loadSound(\"http:\/\/localhost:8000\/thunder_1.wav\");\n    sword = loadSound(\"http:\/\/localhost:8000\/sword_1.wav\");\n    ouch = loadSound(\"http:\/\/localhost:8000\/ouch_1.wav\");\n}\n\nfunction soundSetup () {\n    countdownThree.setVolume(0.5);\n    countdownTwo.setVolume(0.5);\n    countdownOne.setVolume(0.5);\n    countdownFight.setVolume(0.5);\n    thunder.setVolume(0.5);\n    sword.setVolume(0.5);\n    ouch.setVolume(0.9);\n}\n\nfunction setup () {\n    createCanvas (480, 300);\n    frameRate (10); \n    pimg.resize (480, 300); \/\/resizing background image to canvas\n    thunderimg.resize(480,300);\n    useSound();\n}\n\nfunction draw () {\n\n    image(pimg,0,0,width,height); \/\/drawing background\n\n    if (count&gt;0 & count<9) { \/\/countdown\n        textSize(100);\n        fill(255);\n        stroke(255);\n        text(\"3\",width\/2-40,height\/2)\n    }\n\n    if (count&gt;1 & count<3) {\n        countdownThree.play();\n    }\n\n    if (count&gt;=10 & count<19) { \/\/countdown\n        text(\"2\",width\/2-40,height\/2)\n    }\n\n    if (count>10 && count < 12) {\n        countdownTwo.play();\n    }\n\n    if (count&gt;19 & count<28) { \/\/countdown\n        text(\"1\",width\/2-40,height\/2)\n    }\n\n    if (count>19 && count<21) {\n        countdownOne.play();\n    }\n\n    if (count&gt;28 & count <38) { \/\/fight\n        text(\"FIGHT!\",width\/2-170,height\/2)\n    }\n\n    if (count>28 && count<30) {\n        countdownFight.play();\n    }\n\n    if (count&gt;56 & count<=60) { \/\/thunder\n        image(thunderimg,45,-55,400,400)\n    }\n\n    if (count>56 && count <=58) {\n        thunder.play();\n    }\n\n    if (count&gt;=43) { \/\/UI bars appear\n        leftCharacterUI(0,0)\n        rightCharaterUI(0,0)\n    }\n \n    if (count&gt;=43 & count<=65) { \/\/left player appears\n        leftPlayer(160,122)\n        swordLeft(0,0)\n    }\n\n    if (count>=43 && count<=75) { \/\/right player appears\n        rightPlayer(300,122)\n        swordRight(0,0)\n    }\n\n    if (count>=43 && count<75) { \/\/right player health bar shows up\n        push();\n        strokeWeight(0);\n        fill (0,255,0)\n        rect(320,270,70,5)\n        pop();\n    }\n\n    if (count&gt;=43 & count<105) { \/\/left player health bar shows up \n        push();\n        strokeWeight(0);\n        fill(255,0,0);\n        rect(90,270,70,5);\n        pop();\n    }\n\n    if (count&gt;=66 & count<=105) { \/\/left player moves  right\n        leftPlayer(245,122)\n        swordLeft(60,60)\n    }\n\n    if (count>=75 && count<=105) { \/\/right player moves right & health decreases\n        rightPlayer(380,122)\n        swordRight(-57,-57)\n        fill(0,255,0)\n        rect(320,270,40,5) \/\/green health bar\n    }\n\n    if (count>70 && count<76) {\n        sword.play();\n    }\n\n    if (count&gt;=105 & count<=120) { \/\/right & left player move left\n        rightPlayer(280,122)\n        swordRight(14,14)\n        leftPlayer(145,122)\n        swordLeft(-10,-10)\n        fill(255,0,0)\n        rect(90,270,70,5) \/\/red health bar\n        fill(0,255,0)\n        rect(320,270,40,5) \/\/green health bar\n    }\n\n    if (count>=121 && count<=145) { \/\/right player moves left and hits left player\n        rightPlayer(203,122)\n        swordRight(69,69)\n        leftPlayer(145,122)\n        swordLeft(-10,-10)\n        fill(0,255,0)\n        rect(320,270,40,5) \/\/green health bar\n        fill(255,0,0)\n        rect(90,270,30,5) \/\/red health bar decreases\n        sword.play();\n    }\n\n    if (count&gt;=146 & count<=170) { \/\/ players move to bottom floor\n        rightPlayer(300,196)\n        swordRight(-54,52)\n        fill(0,255,0)\n        rect(320,270,40,5) \/\/green health bar\n        leftPlayer(230,192)\n        swordLeft(0,100)\n        fill(255,0,0)\n        rect(90,270,30,5)\n    }\n\n    if (count>=171 && count<=195) { \/\/left player kills right player\n        rightPlayer(300,196)\n        swordRight(-54,52)\n        leftPlayer(271,192)\n        swordLeft(28,128)\n        fill(255,0,0)\n        rect(90,270,30,5) \/\/red health bar\n    }\n\n    if (count>169 && count<171) {\n        sword.play();\n    }\n\n    if (count&gt;196 & count<198) {\n        ouch.play();\n    }\n\n    if (count&gt;=196 & count<=270) { \/\/player falls on ground and text appears\n        leftPlayer(271,192)\n        swordLeft(28,128)\n        fill(255,0,0) \n        rect(90,270,30,5) \/\/red health bar\n        rightPlayerDead(330,220);\n        textSize(13)\n        fill(0)\n        stroke(0)\n        strokeWeight(0.5)\n        text(\"Winner\",100,287)\n        text(\"Loser\",335,287)\n    }\n\n    count++;\n}\n\nfunction leftPlayer(x,y) {\n\n    noStroke();\n    fill(232,190,172); \/\/light head fill\n    circle(x,y,20); \/\/head of left character\n\n    fill(200,0,0); \/\/body fill\n    beginShape(); \/\/main body of left character\n    curveVertex(x,y+22);\n    curveVertex(x-10,y+8);\n    curveVertex(x,y+13);\n    curveVertex(x+10,y+8);\n    endShape(CLOSE);\n\n    fill(0,0,200); \/\/feet fill\n    beginShape(); \/\/lower body of left character\n    vertex(x,y+20);\n    vertex(x-8,y+35);\n    vertex(x,y+30);\n    vertex(x+8,y+35);\n    endShape(CLOSE);\n}\n\nfunction rightPlayer(x,y) {\n\n    noStroke();\n    fill(68,59,49); \/\/dark head fill\n    circle(x,y,20); \/\/head of right character\n\n    fill(255,215,0); \/\/body fill\n    beginShape(); \/\/main body of right character\n    curveVertex(x,y+22);\n    curveVertex(x-10,y+8);\n    curveVertex(x,y+13);\n    curveVertex(x+10,y+8);\n    endShape(CLOSE);\n\n    fill(192,96,168); \/\/feet fill\n    beginShape(); \/\/lower body of right character\n    vertex(x,y+20);\n    vertex(x-8,y+35);\n    vertex(x,y+30);\n    vertex(x+8,y+35);\n    endShape(CLOSE);\n}\n\nfunction rightPlayerDead(x,y) {\n\n    noStroke();\n    fill(68,59,49); \/\/dark head fill\n    circle(x,y,20); \/\/ head of right character\n\n    fill(255,215,0); \/\/body fill\n    beginShape(); \/\/main body of right character\n    curveVertex(x-22,y);\n    curveVertex(x-8,y+10);\n    curveVertex(x-13,y);\n    curveVertex(x-8,y-10);\n    endShape(CLOSE);\n\n    fill(192,96,168); \/\/feet fill\n    beginShape(); \/\/lower body of right character\n    vertex(x-20,y);\n    vertex(x-35,y-8);\n    vertex(x-30,y);\n    vertex(x-35,y+8);\n    endShape(CLOSE);\n}\n\nfunction swordLeft(x,y) {\n\n    push();\n    translate(155,130);\n    angleMode(DEGREES);\n    rotate(315);\n    noStroke();\n    fill(0,230,40);\n    rect(x+10,y+9,13,4); \/\/bottom rectangle of sword\n    fill(30,50,80);\n    rect(x+20,y+5,4,12);\/\/middle rectangle of sword\n    fill(125,125,125);\n    beginShape();\/\/blade of sword\n    vertex(x+24,y+13);\n    vertex(x+39,y+13);\n    vertex(x+43,y+11);\n    vertex(x+39,y+9);\n    vertex(x+24,y+9);\n    endShape(CLOSE);\n    pop();\n}\n\nfunction swordRight(x,y){\n\n    push();\n    translate(305,130);\n    angleMode(DEGREES);\n    rotate(45);\n    scale(-1,1);\n    noStroke();\n    fill(0,250,0);\n    rect(x+10,y+9,13,4); \/\/bottom rectangle of sword\n    fill(30,50,80);\n    rect(x+20,y+5,4,12);\/\/middle rectangle of sword\n    fill(125,125,125);\n    beginShape();\/\/blade of sword\n    vertex(x+24,y+13);\n    vertex(x+39,y+13);\n    vertex(x+43,y+11);\n    vertex(x+39,y+9);\n    vertex(x+24,y+9);\n    endShape(CLOSE);\n    pop();\n}\n\nfunction leftCharacterUI(x,y) {\n\n    push();\n    translate(80,250);\n    fill(232,190,172);\n    circle(x,y,30);\n    fill(255);\n    rect(x+10,y+20,70,20);\n    pop();\n}\n\nfunction rightCharaterUI(x,y) {\n\n    push();\n    translate(310,250);\n    fill(68,59,49);\n    circle(x+90,y,30);\n    fill(255);\n    rect(x+10,y+20,70,20);\n    pop();\n}<\/code><\/pre><\/p><p>\n\n\n\n<\/p><p>For this project, I wanted to have the the sound of swords colliding with each other, and some environmental sounds like the thunder and the announcer voice at the beginning of the animation.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/ Yash Mittal \/\/ Section D \/\/I made a basic 1v1 fighting game where two figures are fighting with swords \/\/The health bar of the two figures is shown at the bottom of the screen var count = 0; \/\/variable for tracking frame count function preload(){ pimg = loadImage (&#8220;https:\/\/i.imgur.com\/Fn5pkxI.jpg&#8221;); \/\/background arena image thunderimg &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/07\/project-10-sonic-story-7\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 10: Sonic-Story&#8221;<\/span><\/a><\/p>\n","protected":false},"author":661,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[113,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68769"}],"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\/661"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68769"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68769\/revisions"}],"predecessor-version":[{"id":68801,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68769\/revisions\/68801"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}