HTML and CSS Reference
In-Depth Information
Another Example: Guess The Letter
Now we will take a quick look at a more involved example of a “Hello World!”-type
application, the game “Guess The Letter.” We've included this example to illustrate
how much more Canvas programming is done in JavaScript than in the Canvas API.
In this game, shown in
Figure 1-4
, the player's job is to guess the letter of the alphabet
the computer has chosen randomly. The game keeps track of how many guesses the
player has made, lists the letters he has already guessed, and tells the player whether
he needs to guess higher (toward Z) or lower (toward A).
Figure 1-4. HTML5 Canvas “Guess The Letter” game
How the Game Works
This game is set up with the same basic structure as “Hello World!”
canvasApp()
is the
main function, and all other functions are defined as local to
canvasApp()
. We use a
drawScreen()
function to render text on the canvas. However, there are some other
functions included as well, which are described next.
The “Guess The Letter” Game Variables
Here is a rundown of the variables we will use in the game. They are all defined and
initialized in
canvasApp()
, so they have scope to the encapsulated functions that we
define locally.
