Create a Hangman 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 hangman 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 hangman

and select all the default options to create the project.

Create a Hangman Game

To create the hangman game, we write:

<template>
  <div v-if="isWin">
    you win
    <button type="button" @click="reset">reset</button>
  </div>
  <div v-else>
    <div v-if="guessesLeft > 0">
      <p>guesses left: {{ guessesLeft }}</p>
      <form @submit.prevent="guess">
        <div>
          <label>guess</label>
          <input v-model.trim="guessLetter" />
        </div>
        <button type="submit">guess</button>
      </form>

      <span v-for="(l, index) of lettersToShow" :key="index">
        {{ l }}
      </span>
    </div>
    <div v-else>
      you lost
      <button type="button" @click="reset">reset</button>
    </div>
  </div>
</template>

<script>
const answer = "hangman";

export default {
  name: "App",
  data() {
    return {
      guessLetter: "",
      answer,
      guesses: [],
    };
  },
  computed: {
    formValid() {
      const { guessLetter } = this;
      return /[a-z]{1}/.test(guessLetter);
    },
    lettersToShow() {
      const { answer, guesses } = this;
      return answer.split("").map((a) => {
        if (guesses.includes(a)) {
          return a;
        }
        return "_";
      });
    },
    guessesLeft() {
      const { answer, guesses } = this;
      return (
        6 -
        guesses.filter((g) => {
          return !answer.includes(g);
        }).length
      );
    },
    isWin() {
      const { answer, guesses } = this;
      const includedLetters = guesses.filter((g) => {
        return answer.includes(g);
      });
      return answer.split("").every((a) => {
        return includedLetters.includes(a);
      });
    },
  },
  methods: {
    guess() {
      if (!this.formValid) {
        return;
      }
      this.guesses.push(this.guessLetter);
      this.guessLetter = "";
    },
    reset() {
      this.guesses = [];
      this.guessLetter = "";
    },
  },
};
</script>

In the template, we check is isWin is true .

If it is, then we show ‘you win’.

And we show the reset button to let the user restart the game.

Otherwise, we show a div with a form to let the player guess letters if guessesLeft is bigger than 0.

This indicates that the player can still guess.

The form has the guess field to let the player enter a letter to guess.

We bind it to guessLetter with v-model .

And we use the trim modifier to trim whitespaces.

We listen to the submit event with the @submit directive and the guess method.

prevent lets us prevent server-side form submission and do client-side submission instead.

Below that, we loop through the letters to show.

Otherwise, we show a ‘you lost’ message to the player since there are no more guesses left.

And we show the reset button on that div to let the player reset the game.

At the top of the script we have the answer variable.

guessLetter has the letter.

guesses has an array of guesses, which are single-letter strings.

We make sure that the input value is a single-letter string with the formValid computed property.

lettersToShow has the letters that are guessed so far.

We return the letter that are guessed corrected if they’re checked to be so with guess.includes(a) .

answers have correct string, so we can check the letters in that with includes to see if we have correct letters.

Otherwise, we return an underscore.

guessesLeft have the number of guesses left.

It’s 6 minus the number of incorrect guesses, which is determined by:

guesses.filter((g) => {
  return !answer.includes(g);
}).length

isWin determines if the player won or not.

We determine this by getting the correct letters that are stored in the includedLetters variable.

And we call every on the answer string split into an array to see if every letter in answer is included in includedLetters .

Now we add the guess method to let the player entered the guess.

We only accept the guess if the form is valid according to the formValid variable.

If that’s true , then we push the guessLetter to this.guesses and reset the value of guessLetter after that.

The reset method resets the guesses and guessLetter values.

Conclusion

We can create a hangman game easily with Vue 3 and JavaScript.