Aquarium Project

Animation Summitiave

Assets for Aquarium

variables: (red fish only) ← I place all variables needed at the top of the program along with asset declaration & source initialization

var redFishRight = new Image();
redFishRight.src = "./fish/redFishRight.png";

var redFishLeft = new Image();
redFishLeft.src = "./fish/redFishLeft.png";

var redX = canvas.width -150;
var redY = canvas.height/3;
var redspeed = 10;
var redspeedY = 2;
var r = 1; ← this is the toggle variable for left and right

You will need to change the sprite depending on direction

draw function: ← draw is where the background sprites in the scene are drawn

if (r < 3) {ctx.drawImage(redFishLeft, redX, redY, 100, 75);} else {ctx.drawImage(redFishRight , redX, redY, 100, 75);} ← if else in the draw function

If the toggle of the r variable is 1 then Left fish shows else if r is 5 then Right fish shows

update function ← update is where the math is done

redX = redX - redspeed; ← Fish movement Left & Right

if (redX < 0){

redspeed = redspeed*-1;
r = 5;} ← Fish change to Right

if (redX > canvas.width - 100){

redspeed = redspeed*-1;
r = 1;} ← Fish change to Left

redY= redY - redspeedY; ← Fish movement Up and Down
if (redY < 0){redspeedY = redspeedY*-1}
if (redY > canvas.height -100) {redspeedY=redspeedY*-1}

Assets:

→Under Water Backgroun	→redFishRight	→blueFishRight	→orangeFishRight	→yellowFishRight
→Crab	→redFishLeft	→blueFishLeft	→orangeFishLeft	→yellowFishLeft

These should auto download to your download file

you will need to tranfer them to your JS project file

You will emial attach a completed html file e:mail ghorvath@cheneysd.org

DO NOT Press Button unless stuck