HTML and CSS Reference
In-Depth Information
Chapter 8
Rock, Paper, Scissors
In this chapter, we will cover
•
playing against a computer
•
creating graphics to serve as buttons
•
arrays of arrays for game rules
•
the font-family property
•
inherited style settings
•
audio
Introduction
This chapter combines programming techniques with HTML5 JavaScript features to implement the familiar
rock-paper-scissors game. In the school yard version of this game, each player uses hand symbols to
indicate one of the three possibilities: rock, paper, or scissors. The terminology is that a player
throws
one of the three options. The game rules are stated this way:
•
Rock crushes scissors.
•
Paper covers rock.
•
Scissors cuts paper.
So each symbol beats one other symbol: rock beats scissors; paper beats rock; and scissors beats
paper. If both players throw the same thing, its a tie.
Since this is a two-player game that our player will play against the computer, we have to create the
computer's moves. We will generate random moves, and the player needs to trust that the program is
doing this and not basing its move on what the player threw. The presentation must reinforce this trust.
The first version of our game just uses the visuals youll see here. The second version adds audio, four
different clips governed by the three winning events plus the tie option. You can either use the sound files
