3D Game Programming

❼The WebGLRenderer will work better than the regular CanvasRenderer. If your

browser can’t do WebGL, have no fear—this chapter should still work for

you (though you might not see the ground).

With that, we’re ready to start coding our jumping game.

15.3 Outline the Game

Before coding, let’s think about how we can organize our code. To have made

it this far in the book, you’ve written a lot of code. At times, it must have

gotten difficult to move through the code to see what you’ve done. You’re not

the first programmer to run into this problem, and you won’t be the last.

Thankfully, you can learn from the mistakes of programmers before you.

One of the easiest ways to organize code is to treat it a little bit like writing.

When you write an essay, you might start with an outline. After you have the

outline, you can fill in the details.

When organizing code, it helps to write the outline first, then add the code

below it. Since we’re programming, our outlines are also written in code. Type

in the following, including the double slashes, below START CODING ON THE NEXT

LINE.

//var ground = addGround();

//var avatar = addAvatar();

//var scoreboard = addScoreboard();

//animate();

//gameStep();

Recall from Comments, on page 69, that the double slashes at the beginning

of each of those lines introduce a JavaScript comment. This means JavaScript

will ignore those lines. This is a good thing since we have not defined those

functions yet.

Programmers call this commenting out code so that it will not run. There are

many reasons programmers do this. Here we’re doing it so that JavaScript

doesn’t get upset when we try to call functions that we haven’t defined.

As we define each of these functions, we’ll go back to this code outline so that

we can remove the double slashes before the function call. When programmers

remove the comment symbols, we call it uncommenting code.

This approach makes it easier to find code. Simply by looking at the code

outline, we know that the addGround() function will be defined before the addA-

vatar(). The faster we can find code, the faster we can fix it or add things to it.

When you write a lot of code, tricks like this can really help keep things

straight.

report erratum • discuss

16.3 Outline the Game

Prepared exclusively for Michael Powell