Rock, Scissors, Paper

This game is often used either as example code or as a homework question relating to JavaScript if statements - particularly in historical courses. This game is so common that I'll assume that you know how the game works and have possibly even tried writing a version for yourself.

If written using more modern JavaScript techniques this game actually serves as a good example of a lot more coding techniques than simple if statements. Let's look at a modern version of a script that plays this game and go through how the script actually works to see all of the different pieces of JavaScript code that it so simply demonstrates.

To start with we will code a form in our HTML that contains three radio buttons so that the player can make their selection of rock, paper or scissors. We'll give these radio buttons values of 0, 1 and 2 for a reason that will become obvious when we look at the JavaScript. We will also need a button that can be clicked to tell the computer to make its choice and display the result as well as somewhere to display that result.

Our JavaScript consists of two functions and a single command. Let's start with the command as even though it is at the bottom of our code it is the statement that actually runs first. What it does is to attach an event listener to the button we put in our page so that when the button is clicked the play function gets run.

The play function is the actual game itself which likely looks completely different to what you might have written when writing this for yourself.

There are a number of different ways that this game could be coded but the approach I have taken here is to put the possible choices in an array. This allows us to reference each of the three options directly by number based on their position in the array (hence assigning the numbers as the values in the HTML) and so makes the comparison much simpler than if we were going to compare text strings.

One way in which using the array makes the code simpler is that now the computer just needs to randomly select a number corresponding to a position in the array so just two statements into the play function we already have the computer having made its choice of rock, scissors or paper.

The next two lines get the player choice. First we call the valButton function which examines all of the radio buttons in the group to work out which one is checked and to return its value. The second line exits the game if the player hasn't made a choice yet.

At this point we have the computer's choice as a number and the player's choice also as a number, where the numbers in both cases correspond to the choices in the array. Now all we need to do is to compare the numbers to work out who won and display the result in the page. With the way the game works, if both made the same selection then the game is a tie so that's the result if the numbers are equal.

Working out who won if the numbers are not equal is the second spot in the code where using numbers rather than text strings has made the code much simpler. With the order of the strings in the array each entry 'beats' the entry immediately following it in the array with the last entry 'beating' the first one. This means that we can simply add one to the computer choice and then use the modulo operator to reference the 'next' position in the array wrapping around if we go past the end. If this 'next' position is the player's choice then the computer has won. If the next position is not the player's choice then the computer position is one after the player position (as there are only three alternatives) and so the player has won.

All that remains is to output the computer choice, the player choice and the result to the page so that the player can see the result.

Here's the complete code:

<form>
<input type="radio" name="a" id="rock" value="0"><label for="rock">Rock</label>
<input type="radio" name="a" id="scissors" value="1"><label for="scissors">Scissors</label>
<input type="radio" name="a" id="paper" value="2"><label for="paper">paper</label>
</form>
<button id="go">Go</button>
<p id="result"></p>
<script type="application/javascript">
(function() {
var valButton = function(btn) {
for (var i=btn.length-1; i > -1; i--) {
if (btn[i].checked) return btn[i].value;
}
return null;
};
var play = function() {
var o, n, p, a;
o = ['rock','scissors','paper'];
n = Math.floor(Math.random() * 3);
p = +valButton(document.getElementsByName('a'));
if (null === p) return;
if (n === p) a = 'Tie';
else if ((n+1)%3===p) a = 'Computer wins';
else a = 'You win';
document.getElementById('result').innerHTML = 'Computer picked '+o[n]+ ', you picked '+o[p]+'. '+a+'.';
};
document.getElementById('go').addEventListener('click', play, false); }());
</script>

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate