Create a Rock Paper Scissors Game with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a rock paper scissors game with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create rock-paper-scissors

and select all the default options to create the project.

Create a Rock, Paper, Scissors Game

To create the rock, paper, scissors game, we write:

<template>
  <div>
    <button @click="selected = 'rock'">rock</button>
    <button @click="selected = 'paper'">paper</button>
    <button @click="selected = 'scissors'">scissors</button>
  </div>
  <button @click="play">play</button>
  <p>your choice: {{ selected }}</p>
  <p>computer's choice: {{ computedSeletced }}</p>
  <div>{{ result }}</div>
</template>

<script>
const choices = ["rock", "paper", "scissors"];
export default {
  name: "App",
  data() {
    return {
      selected: "",
      computedSeletced: "",
    };
  },
  computed: {
    result() {
      const { computedSeletced, selected } = this;
      if (computedSeletced === selected) {
        return `it's a tie`;
      } else {
        if (
          (computedSeletced === "rock" && selected === "scissors") ||
          (computedSeletced === "paper" && selected === "rock") ||
          (computedSeletced === "scissors" && selected === "paper")
        ) {
          return "computer won";
        }
        return "player won";
      }
    },
  },
  methods: {
    play() {
      if (!this.selected) {
        return;
      }
      const computerChoiceIndex = Math.floor(Math.random() * choices.length);
      this.computedSeletced = choices[computerChoiceIndex];
    },
  },
};
</script>

In the template, we have a few buttons.

The top 3 buttons lets the player choose between rock, paper, and scissors.

Below, that we have the play button that calls play when we click the button.

The play method makes the computer pick a choice by setting the computedSelected reactive property to a random choice.

Next, we have 2 p elements to show the choices of the player and the computer.

And then we have a div to display the result.

In the script tag, we have the choices array with the choices.

data returns an array with the reactive properties and their initial values.

Then we add the result computed property to return the game’s result.

We get the computedSelected and selected reactive properties which have the computer and player choices respectively.

If they’re the same, then it’s a tie.

Then in the else block, we check according to the rules of the game.

Rock beats scissors, paper beats rock, and scissors beat paper.

So we check all those conditions to return who won.

Then finally, we have the play method which we mentioned earlier to let the computer pick a choice.

We check that the player picked a choice before letting the computer pick a choice.

Conclusion

We can create a rock, paper, scissors game easily with Vue 3 and JavaScript.