The Essential Guide to HTML5

ROCK, PAPER, SCISSORS

Building the application and making it your own ........................................................................................ viii

The basic rock-paper-scissors applications use styles, global variables, six functions, and HTML markup.

The six functions are described in Table 8-1. I follow the convention that functions start with lower-case

letters unless the function is a constructor for a programmer-defined object. I present the basic

application first, and then show the modifications necessary to add audio.

Table 8-1. Functions in the Basic Rock-Paper-Scissors Application

Function Invoked / Called By Calls

init Invoked by action of the onLoad in the tag drawall

drawall init, choose Invokes the draw method of
each object, which in this
application always in the
function drawThrow

Throw var statements for global variables

drawThrow drawall using the draw method of the Throw objects

choose Invoked by action of addEventListener call in init drawall

flyin Action of setInterval in choose

As you can see from the table, most of the invocation of functions is done implicitly—by event handling,

for example—as opposed to one function invoking another. After the init function does the set up, the

main work is performed by the choose function. The critical information for the rules of the games is held in

the two arrays of arrays.

Table 8-2 shows the code for the basic application, with comments for each line.

Table 8-2. Complete Code for the Basic Rock-Paper-Scissors Application

Code Explanation

Starting html tag
Starting head tag
Complete title element