HTML and CSS Reference
In-Depth Information
This application, like all the examples in this topic, is only a start. Both the plain and audio versions keep a
running score for the player in which a loss results in a decrease. An alternative approach is to keep
individual scores for player and computer, with only wins counted for either side. You could display a
separate count of the games played. This is preferable if you don't want to show negative numbers. You
could also save the player's score using
localStorage
, as described in the maze game in Chapter 7.
A more elaborate enhancement might feature video clips (look back at Chapter 6) or animated GIFs that
show rock crushing scissors, paper covering rock, and scissors cutting paper. You can also look at this
as a model for many different games. In all cases, you need to determine how to capture the player's
moves and how to generate the computers moves; you need to represent and implement the rules of the
game; and you need to maintain the state of the game and display it for the player. The rock-paper-
scissors game has no state information except for the running score. Putting it another way, a game
consists of just one turn. This is in contrast to the dice game described in Chapter 2 in which a game can
involve one to any number of throws of the dice, or the concentration game described in Chapter 5 in which
a turn consists of two selections of cards and a completed game can take any number of turns with the
minimum equal to half the number of cards.
Note: There are competitions for rock-paper-scissors and also computer systems in which the
computer makes moves based on the player's history of moves. You may find it interesting to check
Critical requirements
The implementation of rock-paper-scissors makes use of many HTML5 and JavaScript constructs
demonstrated in earlier chapters, put together here in different ways. Programming is similar to writing. It
is putting the representation of ideas together in some logical order, just like combining words into
sentences and the sentences into paragraphs, and so on. While reading this chapter, think back to what
you have learned about drawing rectangles, images, and text on the canvas, detecting where the player
has clicked the mouse, setting up a timing event using
setInterval
to produce animation, and using
arrays to hold information. These are the building blocks for the rock-paper-scissors application.
In planning this application, I knew I wanted our player to click on buttons, one button for each of the
types of throws in the game. Once the player makes a throw, I wanted the program to make its own move,
namely a random choice, and have a picture corresponding to that move appear on the screen. The
program would then apply the rules of the game to display the outcome. A sound would play,
corresponding to the three possible situations in which one throw beats another, plus a groan when there
was a tie.
This application starts off with what appear as buttons or icons on the screen. These are pictures that the
player can click on to make his or her move. There is also a box for the score.
The application must generate the computer move randomly and then display it in a way that appears as if
the computer and the player are throwing their moves at the same time. My idea for this is to have the
appropriate symbol start small on the screen and then get larger, seemingly emerging from the screen as if
the computer were making its throw towards the player. This action starts right after the player clicks on
one of the three possible throws, but it is soon enough to give the impression that the two happened at the
same time.
