A Day of Steve

/* Jiayi Chen
   jiayiche    Section A */
// sketch.js template for sound and DOM
//
// This is the 15104 Version 1 template for sound and Dom.
// This template prompts the user to click on the web page
// when it is first loaded.
// The function useSound() must be called in setup() if you
// use sound functions.
// The function soundSetup() is called when it is safe
// to call sound functions, so put sound initialization there.
// (But loadSound() should still be called in preload().)

/*Story:
One beautiful morning Steve heard there's birds singing outside,
so he went out to check for the birds that hides in the tree.
He didn't notice there is a creeper on top of his house, and 
the creeper follows Steve to the tree. The Steve realized creeper 
is behind him, but it's too late for him to stop creeper from exploding.  

Reflection:
Though I was asked to use 2-3 seconds sounds for this project, I 
mostly able to find 4-5 second sounds that I felt fits for my story. 
Somehow the Audacity also does not works for the sounds I selected, 
so I have to use these 4-5 seconds sounds files directly.I also don't 
know how to find the images that directly blends into the canvas. 
*/
//Stevemovements
var steve=[]; //array for stevemovement
var idle;
var walk;
var run;
var swordright;
var damaged;
//creeper
var creeperMovement =[]; //array for creeper movement
var creeper;
var glowing;
var exploasion;
//house and bird for tree
var house;
var bird;
//sounds
var walkingsound;
var exploadsound;
var hurt;
var dooropen;
var morningbirds;

// track the time
var frame=0;
var steveX=200;
var CreeperX=300;
var CreeperY=0;
function preload() {
    //images
    house=loadImage("https://i.imgur.com/hAeVVrM.jpeg");
    exploasion=loadImage('https://i.imgur.com/u0RA0C9.png');
    glowing=loadImage('https://i.imgur.com/wpqSTpR.png');
    creeper=loadImage('https://i.imgur.com/oXqwDBa.png');
    damaged=loadImage('https://i.imgur.com/27nSdZi.png');
    swordright=loadImage('https://i.imgur.com/UgtoVei.png');
    run=loadImage('https://i.imgur.com/3JwarD4.png');
    walk=loadImage('https://i.imgur.com/6adTjcs.png');
    idle=loadImage('https://i.imgur.com/bIFUPG3.png');
    bird=loadImage('https://i.imgur.com/Ttx4W2C.png');
    //sounds
    walkingsound = loadSound('http://localhost:8000/walkingsound.wav');
    exploadsound = loadSound('http://localhost:8000/exploadsound.wav');
    hurt = loadSound('http://localhost:8000/hurt.wav');
    dooropen = loadSound('http://localhost:8000/dooropen.wav');
    morningbirds = loadSound('http://localhost:8000/morningbirds.wav');
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(500, 400);
    //======== call the following to use sound =========
    useSound();
    frameRate(1);
    steve[0]=idle;
    steve[1]=walk;
    steve[2]=run;
    steve[3]=swordright;
    steve[4]=damaged;
    //attribute sounds
    creeperMovement[0]=creeper;
    creeperMovement[1]=glowing;
    creeperMovement[2]=exploasion;
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    morningbirds.setVolume(0.3);
    dooropen.setVolume(0.3);
    hurt.setVolume(0.3);
    exploadsound.setVolume(0.3);
    walkingsound.setVolume(0.3)
}


function draw() {
    background('Cyan');
    grassland();
    tree(0,50);
    frame += 1; //track of frames  
    //print("Seconds = " + frame);
    //end the canvas
    if(frame == 28){
        noLoop();
    }
    //house
    image(house, 250, 100, 200, 200);

    steveMoving();

    creeperMoving();

    birdsmoving();

    //start the audio
    if(frame == 4){
        morningbirds.play();//birds chats
    }if(frame==9){
        dooropen.play();//door opens 
    }if(frame==11){
        walkingsound.play();//steve walks
    }if(frame==20){
        exploadsound.play();//creeper exploads
    }if(frame==24){
        hurt.play();//steve cries
    }

}
//build background grassland
function grassland(){
    push();
    fill('lime');
    noStroke();
    rect(0,height/2,width,height/2);
    pop();
}
//build a tree
function tree(x,y){
    push();
    fill('lime');
    noStroke();
    rect(x,y,100,100);
    fill('brown')
    rect(x+25,y+50,50,125);
    pop();
}

function creeperMoving(){//movement of creeper depend on framecount
    var a=0;
    if (frame >= 0 & frame <=11){
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame > 11 & frame <13){
        CreeperX-=100;
        CreeperY+=25;
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame >= 13 & frame <=15){
        CreeperX-=25;
        CreeperY+=50;
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame >= 16 & frame <=20){
        a=1;
        CreeperX-=3;
        CreeperY+=3;
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame > 20 & frame <=21){
        a=1;
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame >= 22 & frame <26){
        a=2;
        b=50;
        image(creeperMovement[a],CreeperX-b,CreeperY-b,75+b,125+b);//explosion
    }
}

function steveMoving(){
    var a=0;
    if(frame==9 ){
        image(steve[a],steveX,200,75,125);//movement of steve depend on framecount
    }else if(frame>9 & frame<=11){
        steveX -= 10;
        a=1;
        image(steve[a],steveX,200,75,125);
    }else if(frame>11 & frame<16){
        a = 2;
        steveX -=25;
        if(frame==13){
            steveX -=25;
        }else if(frame==15){
            steveX -=50;
        }
        image(steve[a],steveX,200,75,125);
    }else if((frame>=16 & frame<20)){
        a = 0;
        image(steve[a],steveX,200,75,125);
    }else if(frame>=20 & frame <=22){
        a = 3;
        image(steve[a],steveX,200,75,125);
    }else if(frame >=22 & frame<= 25){ //steve hurt by the explosion
        a=4;
        image(steve[a],steveX,200,75,125);
    }else if(frame == 26){
        a=4;
        image(steve[a],steveX,200+50,75,125);
    }else if(frame == 27){
        a=4;
        image(steve[a],steveX,200+100,75,125);
    }
}

function birdsmoving(){
    if(frame>=4 & frame <=11){//birds scared off by steve
        image(bird,0,50,50,50);
    }
}