Learn Create Your Own Split Screen

Next Page

Now that we've got some really useful functionality added to our Sprite, we can get to work on the game.

This will proceed quite quickly because you've seen most of these techniques before -- we're just showing how to assemble things.

We're going at have a score, and an array of fish which is initially empty.

var fish=[]; // an array of fish var score = 0; // the score
In our function that gets called for every frame, we're going to also ask each of the fish to render itself onto the frame and update its position:
function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the frame jelly.Point_Towards(mouse_x, mouse_y); // tell jelly to point to mouse jelly.Move_Towards(mouse_x, mouse_y, 3); // and move that way jelly.Do_Frame_Things(); // let the jelly do its thing for (var i=0; i < fish.length; i++) fish[i].Do_Frame_Things(); }
We are going to define a function which adds a new random fish to the fish array. We'll add the details later.
function add_a_random_fish() { }
And we'll arrange for that function to be called every two seconds:
setInterval(add_a_random_fish, 2000); // add a fish every two seconds