Vanilla Javascript Project (Hangman Game)

This game requires you to guess a word and if you don’t succeed till the number of chances available then your game is over.
It’s a really nice project for freshers to improve their coding skills and here I am going to explain mainly the javascript logic behind the game.

I have focused very little on CSS

So, let's get started

Here is the link to the code and demo — https://codepen.io/susant01/pen/YzxbdVG

Starting with the HTML

I have used HTML SVG Element to create the hangman skeleton and for each line, I have provided the appropriate class name so that I can manipulate it later using javascript when a user types.

Now let's directly come to the JS logic.

So, The very first thing that we need to do always is to select the element that we need to manipulate or work within our JS code

So, I have done that from Line 1–12

The second thing is to think of the data we need and in this case, we need some words and all the body parts that we have captured like the arm-left, head, body, etc.
We will use array to store words and body parts.

So, lets see how the game works

As soon as the game starts the hangman bar shows up and a word is selected from our array and then some lines are shown that is equal to the letters in the selected word.

Now the user guess the letters and enters and if it is in the word then we put it in its position and if it not in the word then we start hanging the man from head to leg and keeping the wrong letter in the top right corner for reference and unabling user to type the same letter by alerting him.

And finally we restart the game either if he looses or wins

Lets see the code and let me explain everything

So, here I have made a words array and generated a random number from 0 to 3 and selected a word from the words array.

Hangman body parts are stored in an array for dom manipulation and wrongLettersArray is also assigned so we can put the wrong letters.

The for loop is used to make the lines according to the number of letter in the selected word and other 2 event listeners are to reload the page when game ends. (Restart button not working in codepen you can manually restart the game by reloading the page)

Now when the user click a button we have to take a series of steps

So, on each key press we will check if the letter is available in the current word variable by iterating it and if it is available we will put it in the appropriate place and if it is not available then we will remove one element from hangmanBody array and make a body part visible sequentially.

We are removing one part from the hangman body array because when the length of the array becomes 1 we can finish the game.

And for the win condition when the the user clicks a key

firstly we are examining the length of the word by selecting the guess class and storing it in guessDivs variable then iterating it to find non empty divs and pushing them in the guessDivLengthCounter and then we are comparing the length of guessDivLengthCounter and guessDivLength and if the length of both are same then user wins.

Take a look at the code