How to create a Rock Paper Scissors game using JavaScript and an AI opponent

Rock Paper Scissors is a classic hand game where players make shapes with their hands representing rock, paper, or scissors. In this tutorial, we'll create a version of Rock Paper Scissors that you can play against an AI opponent. We'll use JavaScript and the DOM to create the game interface and game logic.

Prerequisites

• Basic knowledge of HTML, CSS and Javascript
• A code editor like Notepad++ or Sublime Text
• A copy of brain.js

Getting started

Let's start by creating an HTML file named index.html and a Javascript file named app.js. In your HTML file, add the following code:

This creates a basic HTML structure with a link to a CSS file called styles.css and a script tag to include the brain.js file and another script tag for our app.js file.

Usually I would place the JS and CSS files in their own directories nested in an assets directory, but for the sake of simplicity, all the files in this tutorial are in the same directory.

That's all we need to do with index.html, you can save and close the file.

Creating the UI

Next we're going to create the user interface. Open app.js and add the following code:

The first few lines of the code initialise variables that will be used to keep track of the game's state, including the current pattern of moves, the player's score, the computer's score, and the game count.

The following lines of code create HTML elements and appends them to the game area, including a header, score board, buttons for the player, and buttons for the computer. Each button is given a unique ID and icon, and the player's buttons are given a "data-id" attribute to represent which move they correspond to (rock, paper, or scissors).

Finally, the code creates a notification area and appends it to the game area, and appends the entire game area to the body of the HTML document.

Now, when you refresh the page, you should see something like this

I'm going to leave the styling up to you and won't include any in this tutorial. Your imagination's your limit when it comes to how you want it to look, don't be afraid to experiment and play about with the style in the console of your browser and see what you can come up with.

Adding functionality

So now we have our basic UI, we need to add in some functionality. First we're going to create the button click events and the function to set the player's input. Back to app.js, enter the following code

Let's break down what each function here is doing:

• setBtnEvents(): This function adds event listeners to therockButton, paperButton, and scissorsButton buttons. When they are clicked, the playerInput() function is called. This function is used to set up the game at the beginning or after a round ends.
• removeBtnEvents(): This function removes the event listeners from the same three buttons (rockButton, paperButton, and scissorsButton). This is used to prevent the player from clicking any buttons while the computer is making its move and the game is determining the winner of the round.
• playerInput(): This function is called when one of the three buttons is clicked. It removes the event listeners from the buttons (using removeBtnEvents()), records the player's choice of rock, paper, or scissors (by getting the data-id attribute of the clicked button), sets the playerChoice variable to this value, increments the gameCount variable, and schedules two more functions to be called after a delay: aiPrediction() (which will predict the computer's choice) and checkWin() (which will determine the winner of the round). The delay is implemented using the setTimeout() function.

Next we create the functions for the computer moves

• prepareData: This function initializes a pattern array with 10 random numbers between 1 and 3 if the array is empty. The pattern array is used to train the AI to predict the player's moves.
• updatePattern: This function updates the pattern array with the player's choice, after removing the oldest element of the array. This is done after each round of the game.
• The aiPrediction() function is responsible for generating the AI's choice based on the current pattern of the player's choices.

First, it calls the prepareData() function to ensure that the pattern array has at least 10 elements in it. If the pattern array has less than 10 elements, prepareData() will add 10 new random values to the array.

Next, the function creates a new instance of the brain.recurrent.LSTMTimeStep() neural network. It trains the network on the pattern array, with the iterations option set to 100 to run the training 100 times.

After training, the function calls net.run(pattern) to get a prediction from the neural network for the next element in the sequence, which will be the next choice of the player. It rounds the predicted value to the nearest integer using Math.round(), and then calculates the AI's choice using (roundedPredicted % 3) + 1. This will give a value between 1 and 3, which is then assigned to the aiChoice variable.

The function then sets the class of the AI's choice button to btn-active using document.getElementById() and className. Finally, the updatePattern() function is called to update the pattern array with the latest player's choice.

Finally, we build the checkWin function and the function which will convert the chosen integers to their respected strings of either rock, paper or scissors:

The checkWin() function is called after the AI makes its prediction and it determines who won the round of rock-paper-scissors.

If the player and the AI made the same choice, the winningMessage variable is set to "draw". If the player wins, the winningMessage is set to "You win" and the player's score is incremented. If the AI wins, the winningMessage is set to "Computer wins" and the AI's score is incremented.

In each of these cases, the appropriate button is highlighted to indicate whether it was the winning or losing button. After a short delay, the notification area is cleared and the button classes are reset to their default state, and the button event listeners are added back so the player can make another choice.

The stringOf() function takes an integer argument and returns a string representing the choice corresponding to the integer value: "rock" for 1, "paper" for 2, "scissors" for 3, or an empty string if the argument is not 1, 2, or 3. This function is used to dynamically generate the ID of the button that corresponds to the AI's choice, so that the appropriate button can be highlighted as the winning or losing button.

All that's left to do is run the setBtnEvents function in app.js

And that's it. Now when you refresh the page, you should be able to play and see basic notifications of win, lose, draw and see the scores increment. Again, I won't add in the styling in this tutorial, but here's something I managed to come up with

The full code

index.html

app.js

Sources

The full script is available on Github

Click here to play the game