Project 10: Sonic-Story

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 ("https://i.imgur.com/Fn5pkxI.jpg"); //background arena image
    thunderimg = loadImage ("https://i.imgur.com/VAJWvZZ.png"); //thunder image
    countdownThree = loadSound("http://localhost:8000/countdown_three.wav");
    countdownTwo = loadSound("http://localhost:8000/countdown_two.wav");
    countdownOne = loadSound("http://localhost:8000/countdown_one.wav");
    countdownFight = loadSound("http://localhost:8000/countdown_fight.wav");
    thunder = loadSound("http://localhost:8000/thunder_1.wav");
    sword = loadSound("http://localhost:8000/sword_1.wav");
    ouch = loadSound("http://localhost:8000/ouch_1.wav");
}

function soundSetup () {
    countdownThree.setVolume(0.5);
    countdownTwo.setVolume(0.5);
    countdownOne.setVolume(0.5);
    countdownFight.setVolume(0.5);
    thunder.setVolume(0.5);
    sword.setVolume(0.5);
    ouch.setVolume(0.9);
}

function setup () {
    createCanvas (480, 300);
    frameRate (10); 
    pimg.resize (480, 300); //resizing background image to canvas
    thunderimg.resize(480,300);
    useSound();
}

function draw () {

    image(pimg,0,0,width,height); //drawing background

    if (count>0 & count<9) { //countdown
        textSize(100);
        fill(255);
        stroke(255);
        text("3",width/2-40,height/2)
    }

    if (count>1 & count<3) {
        countdownThree.play();
    }

    if (count>=10 & count<19) { //countdown
        text("2",width/2-40,height/2)
    }

    if (count>10 && count < 12) {
        countdownTwo.play();
    }

    if (count>19 & count<28) { //countdown
        text("1",width/2-40,height/2)
    }

    if (count>19 && count<21) {
        countdownOne.play();
    }

    if (count>28 & count <38) { //fight
        text("FIGHT!",width/2-170,height/2)
    }

    if (count>28 && count<30) {
        countdownFight.play();
    }

    if (count>56 & count<=60) { //thunder
        image(thunderimg,45,-55,400,400)
    }

    if (count>56 && count <=58) {
        thunder.play();
    }

    if (count>=43) { //UI bars appear
        leftCharacterUI(0,0)
        rightCharaterUI(0,0)
    }
 
    if (count>=43 & count<=65) { //left player appears
        leftPlayer(160,122)
        swordLeft(0,0)
    }

    if (count>=43 && count<=75) { //right player appears
        rightPlayer(300,122)
        swordRight(0,0)
    }

    if (count>=43 && count<75) { //right player health bar shows up
        push();
        strokeWeight(0);
        fill (0,255,0)
        rect(320,270,70,5)
        pop();
    }

    if (count>=43 & count<105) { //left player health bar shows up 
        push();
        strokeWeight(0);
        fill(255,0,0);
        rect(90,270,70,5);
        pop();
    }

    if (count>=66 & count<=105) { //left player moves  right
        leftPlayer(245,122)
        swordLeft(60,60)
    }

    if (count>=75 && count<=105) { //right player moves right & health decreases
        rightPlayer(380,122)
        swordRight(-57,-57)
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
    }

    if (count>70 && count<76) {
        sword.play();
    }

    if (count>=105 & count<=120) { //right & left player move left
        rightPlayer(280,122)
        swordRight(14,14)
        leftPlayer(145,122)
        swordLeft(-10,-10)
        fill(255,0,0)
        rect(90,270,70,5) //red health bar
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
    }

    if (count>=121 && count<=145) { //right player moves left and hits left player
        rightPlayer(203,122)
        swordRight(69,69)
        leftPlayer(145,122)
        swordLeft(-10,-10)
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
        fill(255,0,0)
        rect(90,270,30,5) //red health bar decreases
        sword.play();
    }

    if (count>=146 & count<=170) { // players move to bottom floor
        rightPlayer(300,196)
        swordRight(-54,52)
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
        leftPlayer(230,192)
        swordLeft(0,100)
        fill(255,0,0)
        rect(90,270,30,5)
    }

    if (count>=171 && count<=195) { //left player kills right player
        rightPlayer(300,196)
        swordRight(-54,52)
        leftPlayer(271,192)
        swordLeft(28,128)
        fill(255,0,0)
        rect(90,270,30,5) //red health bar
    }

    if (count>169 && count<171) {
        sword.play();
    }

    if (count>196 & count<198) {
        ouch.play();
    }

    if (count>=196 & count<=270) { //player falls on ground and text appears
        leftPlayer(271,192)
        swordLeft(28,128)
        fill(255,0,0) 
        rect(90,270,30,5) //red health bar
        rightPlayerDead(330,220);
        textSize(13)
        fill(0)
        stroke(0)
        strokeWeight(0.5)
        text("Winner",100,287)
        text("Loser",335,287)
    }

    count++;
}

function leftPlayer(x,y) {

    noStroke();
    fill(232,190,172); //light head fill
    circle(x,y,20); //head of left character

    fill(200,0,0); //body fill
    beginShape(); //main body of left character
    curveVertex(x,y+22);
    curveVertex(x-10,y+8);
    curveVertex(x,y+13);
    curveVertex(x+10,y+8);
    endShape(CLOSE);

    fill(0,0,200); //feet fill
    beginShape(); //lower body of left character
    vertex(x,y+20);
    vertex(x-8,y+35);
    vertex(x,y+30);
    vertex(x+8,y+35);
    endShape(CLOSE);
}

function rightPlayer(x,y) {

    noStroke();
    fill(68,59,49); //dark head fill
    circle(x,y,20); //head of right character

    fill(255,215,0); //body fill
    beginShape(); //main body of right character
    curveVertex(x,y+22);
    curveVertex(x-10,y+8);
    curveVertex(x,y+13);
    curveVertex(x+10,y+8);
    endShape(CLOSE);

    fill(192,96,168); //feet fill
    beginShape(); //lower body of right character
    vertex(x,y+20);
    vertex(x-8,y+35);
    vertex(x,y+30);
    vertex(x+8,y+35);
    endShape(CLOSE);
}

function rightPlayerDead(x,y) {

    noStroke();
    fill(68,59,49); //dark head fill
    circle(x,y,20); // head of right character

    fill(255,215,0); //body fill
    beginShape(); //main body of right character
    curveVertex(x-22,y);
    curveVertex(x-8,y+10);
    curveVertex(x-13,y);
    curveVertex(x-8,y-10);
    endShape(CLOSE);

    fill(192,96,168); //feet fill
    beginShape(); //lower body of right character
    vertex(x-20,y);
    vertex(x-35,y-8);
    vertex(x-30,y);
    vertex(x-35,y+8);
    endShape(CLOSE);
}

function swordLeft(x,y) {

    push();
    translate(155,130);
    angleMode(DEGREES);
    rotate(315);
    noStroke();
    fill(0,230,40);
    rect(x+10,y+9,13,4); //bottom rectangle of sword
    fill(30,50,80);
    rect(x+20,y+5,4,12);//middle rectangle of sword
    fill(125,125,125);
    beginShape();//blade of sword
    vertex(x+24,y+13);
    vertex(x+39,y+13);
    vertex(x+43,y+11);
    vertex(x+39,y+9);
    vertex(x+24,y+9);
    endShape(CLOSE);
    pop();
}

function swordRight(x,y){

    push();
    translate(305,130);
    angleMode(DEGREES);
    rotate(45);
    scale(-1,1);
    noStroke();
    fill(0,250,0);
    rect(x+10,y+9,13,4); //bottom rectangle of sword
    fill(30,50,80);
    rect(x+20,y+5,4,12);//middle rectangle of sword
    fill(125,125,125);
    beginShape();//blade of sword
    vertex(x+24,y+13);
    vertex(x+39,y+13);
    vertex(x+43,y+11);
    vertex(x+39,y+9);
    vertex(x+24,y+9);
    endShape(CLOSE);
    pop();
}

function leftCharacterUI(x,y) {

    push();
    translate(80,250);
    fill(232,190,172);
    circle(x,y,30);
    fill(255);
    rect(x+10,y+20,70,20);
    pop();
}

function rightCharaterUI(x,y) {

    push();
    translate(310,250);
    fill(68,59,49);
    circle(x+90,y,30);
    fill(255);
    rect(x+10,y+20,70,20);
    pop();
}

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.