Let's Start with 'Game Over'

If you have been following this blog you will know that we are looking at a simple page that shows six dogs racing across the screen. You can find our sample page by clicking this link.
In this post we will focus on the end of the game and review how we move the images across the canvas. In a earlier version we were picking dogs at random and nudging them along one at a time. This version still has to move them one at a time, but we move each dog one after the other. We make it a race by picking a random distance for each move.

Testing the end of the race is simple enough. Our array, hisSpot[], keeps track of the location of each dog. We pick a random number and store it in step. Then use that to bump up the value in the array. Once that has been done we put a new copy of the image down at the new location. The left side of our image blots out any part of the dog that might have been visible in the old location. Here is the code that does that.

step=Math.floor(Math.random()*8)+1;
hisSpot[dog]=hisSpot[dog]+step;
ctx.putImageData(dogImage[dog],hisSpot[dog],dog * 60 + 15);

The code above picks a number between 1 and 8. Math.random()*8 actually picks a number between 0 and 7 so we just add 1 to that value. You can experiment with different values, I didn't want zero to ever come up which would mean that the dog didn't move.

So how do we get a dog to stop moving when it reaches the finish line. Here is a slick trick! Rather than set up yet one more array to keep track of which of the six dogs has finished, we will use hisSpot[] for two purposes. When we initiallized the array we set each value at canvasLeft, which currently is 120. So after we have moved the dog the last time, we change that value to zero. Later on we are going to cover the topic of user screen size and adjust the size of our canvas to look well on different devices. To be ready for this in the future I have set up a variable called leaderNose and given it a value that we can experiment with. By subtracting canvasLeft from this value we leave the door open for shifting things left and right on the page. We can move the board around and not have to hunt for a new value to put in here.

var leaderNose = 1230-canvasLeft;

With that in place, all we need to do is move our dog and then test the location:

if(hisSpot[dog]>leaderNose){
    hisSpot[dog]=0;

 
Do you see where this takes us? Knowing that, we only move dogs that have a value greater than zero in hisSpot[]. So we wrap an if structure around the whole thing.

if(hisSpot[dog]>0){
    .
    .
    .
} 

That leaves us with one more problem to solve. We have started a loop running that keeps calling this function over and over. We need to stop that loop when the dogs are all done running. Here is another slick trick. Each time the function is called we set up a simiple variable:  var keepGoing = 0;

Every time we move one of the dogs we increment that variable: keepGoing++;

So if we try to move all six dogs and every one of them has already finished, keepGoing will still be zero which tells us it is time to quit:

if(keepGoing==0){clearInterval(delayLoop); }

How cool is that?

Finally, let's display the first three finishers and put a place number next to each dog when he finishes the race. We need another global variable: var place = 0; and the following code:

if(place<3){showWinner(dog); }
place++;
ctx.fillText(place,1180,dog*60 + 60);

Let's look at the last two lines first. place++; will increment our counter. That means that it will be 1 when the first dog crosses the line. The third line simply puts the value of place on the screen. We are using an absolute value, 1180, here. Which means we will have to change it later when we want to support different screen sizes. Oh, well.

Now let's go back to the first line. Notice that we only call the function showWinner() when place is 0, 1 or 2. This is a rewite of the routine:

var placeText = new Array();
placeText[0] = "1st Place: ";
placeText[1] = "2nd Place: ";
placeText[2] = "3rd Place: ";

function showWinner(dog){
   ctx.fillStyle='White';
   ctx.font="24px Arial";
   ctx.textAlign="left";
   ctx.fillText(placeText[place] + thisDog[dog],canvasLeft + 20,40*place+30);
   }

It is important that we call this function before we print the places next to the dogs for two reasons. First, We are using a small array to hold text for the placing and the first item in an array is zero. Second, the code here sets up the font color and size for the numbers we will print next to the dogs at the finish line.


You can find the complete code ready for you to copy and paste at the bottom of the previous post. If you would like see a project that uses all of these techniques and more, check out my web app: Drop Your Anchor.


..