Game Programming Basics - Building JavaScript Games for Phones, Tablets, and Desktop - page 21

As you can see, there are a couple of different functions in this script. The start function is called
when the body of the HTML document has loaded, because of this instruction:
document.addEventListener('DOMContentLoaded', start);
In the start function, you retrieve the canvas and the canvas context; you store them in variables so
you can use them in other parts of the program (more about that later). Then, you execute another
function called mainLoop . This function, in turn, contains other instructions. Two instructions take
care of setting a background color. Then you call the update function, followed by the draw function.
Each of these functions may again contain other instructions. The final instruction that is called is
the following:
window.setTimeout(mainLoop, 1000 / 60);
What this does is simply call the mainLoop function again, after waiting for a certain period of time
(1,000/60 = 16.6 milliseconds in this case). When the mainLoop function is called again, the canvas
background color is set and the update and draw functions are called. At the moment, update and
draw are empty, but you can start filling them with instructions to update and draw a game world.
Note that using setTimeout to wait between loop iterations isn't always the best solution. Sometimes
this approach may be adversely affected by events beyond your control, such as slow computers,
other tabs that are open in your browser, concurrently running apps that need processing power, and
so on. When you have to deal with sensitive time operations (such as the player needing to survive
for five minutes), you may not want to rely on setTimeout but rather on some sort of system that
schedules events at certain points in time and checks in the update function whether these events
have occurred.
When you run the example program, the update and draw functions are continuously executed:
update, draw, update, draw, update, draw, update, draw, update, draw, and so on. Furthermore, this
happens at a very high speed. This particular example creates a simple game loop that runs at about
60 frames per second. This kind of loop is called a fixed timestep loop, and it's a very popular kind of
loop for casual games. You could also design the program differently so that the game would try to
execute the loop as many times as possible instead of 60 times per second.
Note When you create programs that rely on a (game) loop, you might want to avoid using fully automated
loops in the early stages of implementation and testing. You might create an infinite loop that could bog down
the development machine accidentally. Instead, you can set the loop to run a limited number of times, or you
can let the loop run once every time you press a button. Most browsers also support debugging of JavaScript.
For example, in Firebug (in the Firefox browser), you can place a breakpoint at some point in the loop. That
way, you can keep track of what is happening when the program is running.
This topic shows you a lot of different ways to fill the update and draw functions with the tasks you
need to perform in your game. During this process, I also introduce many programming techniques
that are useful for games (and other applications). The following section looks into the basic game
application in more detail. Then, you fill this basic skeleton of a game with additional instructions.