Creating a Game World - Building JavaScript Games for Phones, Tablets, and Desktop - page 41

The only thing you have to do is make sure to call this method before update and draw are called.
You do this in the mainLoop method:

Game.mainLoop = function() {
Game.clearCanvas();
Game.update();
Game.draw();
window.setTimeout(Game.mainLoop, 1000 / 60);
};

Now the example is complete! You can run this program by double-clicking the MovingSquare.html
file in the folder belonging to this chapter. Figure 3-8 shows what it looks like.

Figure 3-8. Output of the MovingSquare example

Play around with how the rectangle position is changed depending on the time. Try to get some of
the following things to work correctly (if you have other ideas, don't hesitate to try them as well):

Make the rectangle move from right to left.



Make the rectangle move from top to bottom.



Make the rectangle move diagonally across the screen.



Make the rectangle move twice as slowly.

