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

The second collection of tasks is related to displaying the game world to the player. In the case
of the Pac-Man game, this means drawing the labyrinth, the ghosts, Pac-Man, and information about
the game that is important for the player to know, such as how many points they've scored, how
many lives they have left, and so on. This information can be displayed in different areas of the game
screen, such as at the top or the bottom. This part of the display is also called the heads-up display
(HUD). Modern 3D games have a much more complicated set of drawing tasks. These games need
to deal with lighting and shadows, reflections, culling, visual effects like explosions, and much more.
I'll call the part of the game loop that deals with all the tasks related to displaying the game world to
the player the Draw action.
Building a Game Application in JavaScript
The previous chapter showed how to create a simple JavaScript application. In that JavaScript
application, you saw that instructions are grouped into a function, as follows:
function changeBackgroundColor () {
document.body.style.background = "blue";
}
This idea of grouping is coherent with the idea that JavaScript is a procedural language: instructions
are grouped in procedures/functions. The first step is setting up a simple game loop in JavaScript.
Have a look at the following example:
var canvas = undefined;
var canvasContext = undefined;
function start () {
canvas = document.getElementById("myCanvas");
canvasContext = canvas.getContext("2d");
mainLoop();
}
document.addEventListener('DOMContentLoaded', start);
function update () {
}
function draw () {
}
function mainLoop () {
canvasContext.fillStyle = "blue";
canvasContext.fillRect(0, 0, canvas.width, canvas.height);
update();
draw();
window.setTimeout(mainLoop, 1000 / 60);
}