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

Do you need to know which instructions are grouped together in the fillRect function in order to
use it? No, you don't! This is one of the nice things about grouping instructions in functions. You
(or other programmers) can use the function without knowing how it works. By smartly grouping
instructions in functions, it's possible to write reusable program pieces that can be used in many
different contexts. The fillRect function is a good example of this. It can be used for various
applications, and you don't need to know how the function works in order to use it. The only thing
you need to know is that it takes the dimensions of a rectangle as parameters.

Update and Draw
The game loop in the BasicGame example contains update and draw functions. Because a function
is basically a group of instructions, every time the update function is called, the instructions in that
functions are executed. The same goes for draw .
As an example, imagine that you want a simple game where a balloon is drawn at the position of the
mouse pointer. When you move the mouse around, the balloon moves along with it. In terms of the
update and draw functions, you can do this as follows. In the update function, you need to execute
an instruction that retrieves the current position of the mouse pointer and stores it in memory.
In the draw function, you need to execute an instruction that displays a balloon image at the stored
position. Of course, you don't yet know if these instructions exist (spoiler: they do!), and you don't
yet know what the instructions look like. Also, you might wonder why this would work. You're not
moving the balloon, you're simply drawing it at a position stored in the update function. Recall that
the update and draw functions are executed at a very high rate (60 times per second). Because
of this high rate, drawing the balloon at different positions makes it look like the balloon moves
(but it actually doesn't). This is how all game worlds are drawn and how the player is lured into
thinking there is movement in the world. In reality, you're just drawing the images quickly at different
positions. Stay tuned—you return to this example and make it work later on!

Program Layout
This section deals with the layout of a program's source code. You first see how to add clarifying
comments to your code. Then you learn how to write instructions as clearly as possible by using
single or multiple lines, whitespace, and indentation.

Comments
For the human reader of a program (another programmer, or yourself in a couple of months, when
you've forgotten the details of how your program worked), it can be very useful to add some
clarifying comments to a program. These comments are completely ignored by the compiler, but
they make for a more understandable program. There are two ways in JavaScript to mark comments
in your code:

/* and */ is ignored (there can be

 Everything between the symbol combinations

multiple lines of comments).

// and the end of the line is ignored.

 Everything between the symbol combination