Rock, paper, scissors game with HTML, CSS & JavaScript

A simple example of a Rock, paper, scissors game made with HTML, CSS and JS.

CodePen example.

HTML-structure

Everything is gathered under <section>-tag. Then there is <article>-tag to place the header where the game state is displayed (which side won and the players choices). There are also four buttons: three are gathered under one <div>-tag (rock, paper, scissors) and one is placed separately (to reset the game).

IDs are used for the elements that need to be accessed through JavaScript (<h1>-tag — to change the state text of the game, <span>-tags with player’s and opponent’s choices — to display the choices: rock, paper or scissors).

Buttons have onclick-events to add the appropriate functionality to each.

<section>
  <article>
    <h1 id="gameState">Make your choice to start the game.</h1>
    <b>Opponent's choice: </b><span id="opponentChoice">?</span>
    <b>Your choice: </b><span id="playerChoice">?</span>
  </article>
  <div>
    <button onclick="playerRoll('✊')">✊</button>
    <button onclick="playerRoll('✋')">✋</button>
    <button onclick="playerRoll('✌')">✌</button>
  </div>
  <button onclick="reset()">Reset</button>
</section>

CSS-structure

Mostly basic styling to separate HTML-elements and add a little bit of interactive-look: centering the elements, adding background and text colors, adjusting padding and margin, adding hovering and click effects to buttons.

section {
  text-align: center;
  color: blue;
  width: 500px;
  max-width: 90vw;
  padding: 5px;
  margin: auto;
  border: 1px solid blue;
  border-radius: 5px;
  font-size: 1.5rem;
  background: azure;
  box-shadow: 1px 1px black;
}

article {
  display: flex;
  flex-flow: column nowrap;
}

h1 {
  border-bottom: 1px solid blue;
  padding-bottom: 1rem;
  text-shadow: 0.5px 0.5px black;
}

#gameState {
  margin-bottom: 1rem;
}

button {
  margin: 1rem 0.5rem;
  font-size: 1.5rem;
  border: 1px solid blue;
  border-radius: 5px;
  color: blue;
  background: azure;
  cursor: pointer;
  box-shadow: 1px 1px black;
  transition: 0.5s;
  text-transform: uppercase;
  padding: 5px 10px;
}

button:hover {
  scale: 0.9;
  transition: 0.5s;
}

button:active {
  scale: 0.8;
  transition: 0.5s;
}

JavaScript-structure

Three main buttons (rock, paper, scissors) are using the same function playerRoll(). It has parameter roll which defines which button is being clicked. Initially three HTML-elements are accessed by their IDs (to display the current state of the game and players choices) and a random number between 0 and 2 is generated. Based on that random number the opponent’s choice is being made: if/else-statement checks which number it is and assigns an appropriate symbol to the HTML-element (to display the opponent’s choice).

Another if/else-statement checks which button is clicked (based on the argument passed to the function on each button). That defines which symbol will be displayed for the player’s choice.

The last if/else-statement checks if innerHTML of the player and opponent matches (to set the game state to tie), or if any of the three winning conditions for the player are met (to display that player wins). In any other case (when two of the above conditions are not met) opponent wins.

The second function (reset()) is used to set the game state text and players choices to initial ones (it simply changes innerHTML of the elements).

function playerRoll(roll) {
  const gameState = document.getElementById("gameState");
  const opponentChoice = document.getElementById("opponentChoice");
  const playerChoice = document.getElementById("playerChoice");
  const randomNumber = Math.floor(Math.random() * 3);

  if (randomNumber === 0) {
    opponentChoice.innerHTML = "✊";
  } else if (randomNumber === 1) {
    opponentChoice.innerHTML = "✋";
  } else if (randomNumber === 2) {
    opponentChoice.innerHTML = "✌";
  }

  if (roll === "✊") {
    playerChoice.innerHTML = "✊";
  } else if (roll === "✋") {
    playerChoice.innerHTML = "✋";
  } else if (roll === "✌") {
    playerChoice.innerHTML = "✌";
  }

  if (opponentChoice.innerHTML === playerChoice.innerHTML) {
    gameState.innerHTML = "Tie!";
  } else if (
    (opponentChoice.innerHTML === "✊" && playerChoice.innerHTML === "✋") ||
    (opponentChoice.innerHTML === "✋" && playerChoice.innerHTML === "✌") ||
    (opponentChoice.innerHTML === "✌" && playerChoice.innerHTML === "✊")
  ) {
    gameState.innerHTML = "You won!";
  } else {
    gameState.innerHTML = "Your opponent won!";
  }
}

function reset() {
  const gameState = document.getElementById("gameState");
  const opponentChoice = document.getElementById("opponentChoice");
  const playerChoice = document.getElementById("playerChoice");

  gameState.innerHTML = "Make your choice to start the game.";
  opponentChoice.innerHTML = "?";
  playerChoice.innerHTML = "?";
}

Conclusion

There are many ways to make a game like that, and here I just tried to come up with the first solution that came to mind. The main function can probably be simplified further by changing the structure of the if-statements and combining them or looping through the array-elements, and reset function can be merged with it as well, but, once again, this is more of a “go-with-the-most-straightforward-approach” type of solution.

Thank you for reading.