Section 1.1: Starting the Project

To initiate the Vue project, we use the Vue CLI. Begin by installing it with the following commands:

npm install -g @vue/cli

or, if you prefer Yarn:

yarn global add @vue/cli

Next, create your project by executing:

vue create hangman

Select the default options to set up the project.

Section 1.2: Building the Hangman Game

To develop the Hangman game, we proceed as follows:

In the template, we check if isWin is true. If it is, we display a message saying 'you win' along with a reset button to allow the user to restart the game.

If the game is still ongoing and guessesLeft is greater than 0, we present a form for the player to input their letter guesses. The form includes a field bound to guessLetter using v-model, which trims any whitespace with the trim modifier.

We handle the form submission using the @submit directive, linking it to the guess method. This method prevents the default server-side submission, opting instead for client-side handling.

After that, we loop through the guessed letters. If the player exhausts all guesses, we display a 'you lost' message and the reset button for restarting the game.

At the top of the script, we define the answer variable, which holds the correct word. The guessLetter variable represents the current letter being guessed, while guesses is an array containing the player's guesses.

To ensure valid input, the formValid computed property checks that the input is a single-letter string. The lettersToShow variable holds the correctly guessed letters, showing either the guessed letters or underscores for unguessed ones.

The remaining guesses are calculated as 6 minus the number of incorrect guesses, determined by filtering the guesses array based on whether the guessed letters are included in the answer.

The isWin property verifies if the player has won by checking if all letters in the answer are included in the includedLetters variable.

Next, we implement the guess method to process player input. The guess is accepted only if it passes the formValid check. If valid, the guessed letter is added to this.guesses, and guessLetter is reset.

Finally, the reset method clears the guesses and resets the guessLetter.

Conclusion

Creating a Hangman game is straightforward with Vue 3 and JavaScript. If you found this article helpful, consider subscribing to our YouTube channel for more content!