How I built a simple 'word guessing game' using Javascript ( for Beginners )

I wanted to build something fun for my portfolio. After spending sometime thinking, I decided to code a game that was popular in my childhood.

Hangman

Players will have to fill the dashes with letters, until they guess the word. The game ends if the player guesses the correct word or if he chooses the wrong letter 5 times.

Here’s how the game looks:

Before we start building, let's see what the game needs to do.

1. Generate a random word
2. Generate dashes for the players to fill letters
3. Provide letters for the players to choose
4. End the game when the player loses or wins

Now, with that sorted, lets start building.

Also, you might want to keep the game and the source code open for reference.

HTML:

The basic structure of the game is quite simple.

1. A section for the title : This section contains the title and the number of chances a player has left

2. A section for the word: The blank space for the word is displayed here. We will dynamically display this, depending on the word length

3. A section for the letters: English alphabet to select will be displayed here. You can create a span tag for each letter, but it is much easier to do this with Javascript.

Styling

Styling entirely depends on your preferences, but to get started, here’s the link to my stylesheet.

The dynamics of the game ( Javascript )

As I said earlier, we need to create a section of alphabets that the players can select.

Steps:

1. Create an array of alphabets, from a - z
2. Map through this array with array.map
3. For each alphabet on the array, create a span node, set the id to the alphabet and set a common classname ("alphabet")
4. Create a text node with the letter as the inner text
5. Append the textnode to the span and the span to our div ( alphabet section)

It should look something like this ( after styling )

Fetching a random word.

I’m sure you have heard about the acronym API before. We will be using an API called ‘Random word Api’ by M C Naveen, to generate a random word.

The endpoint we are going to use is https://random-words-api.vercel.app/word.

Steps:

1. Fetch request at endpoint
2. Resolve the promise with .then.
3. Resolve the json promise returned
4. Inside the callback, invoke a function that adds functionality to the game. By doing this, we make sure that the game becomes functional only after the fetch is successful

The game function:

Let’s split the fetched word into an array and store it.

To create empty spaces for the players to fill in, we use a similar method we used to create alphabets, but instead of an alphabet, the textnode will be an empty string.

Let’s then append it the div called word section.

It should ook like this.

Also, using foreach, we add an event listener to each alphabet.

We now define a call back for the event listener (click) we added in each letter, so that whenever a player clicks a letter, the call back is executed.

Inside the callback

1. Select the letter with event.taget.innertext
2. Check if the letter is in the word we fetched with array.includes
3. Mark the letter as selected in the DOM ( for styling )

Now, the conditional. We have 2 conditions. \
a. The selected letter is in the word fetched.
b. The selected letter isn’t.

Selected letter is in the word

1. Check where the selected letter is in the word and store it in an array(indexes). This lets us store multiple values.
2. With DOM manipulation, add the letter in position stored in the array indexes
3. Store the number of elements in the indexes array in a variable.
4. If the variable becomes equal to word length, the player wins the game.

Selected letter is not in the word

1. Increase the false count by 1
2. When false count is 5, game over

That’s it! You successfully created a Word Game.

Feel free to build this on your own and modify it as you see fit.

If you have questions or improvements, feel free to ping me here.

Comments

[GrahamTheDev]

Wow I got obtenebrate followed by neossoptile - they aren’t even words my phone recognised for auto correct!

Can we have a version for people who are thick like me? 🤣🤣

In all seriousness though, fun little game! I am off to look those words up now! 🤣

[GrahamTheDev]

obtenebrate - to make dark; darken

neossoptile - one of the downy feathers of a newly hatched bird.

Just for those who are curious. Mission for the week, squeeze those words into a conversation!!! 😜

[fawazsullia]

Man, in all honesty, I tried looking for an API that generates words that normal people like us, understand. Butno, I couldnt :(
How about if one loses, displaying the meaning of the word? How does that sound?

[GrahamTheDev]

That would be great as then you have an incentive to play as you might widen your vocabulary.

At the end of the day it is fun either way and a great demo! ❤️

[Will]

This is pretty cool and I would love to be able to work up something like this on my own portfolio once I'm more versed in JS. Thank you for sharing it.

[fawazsullia]

All the best man. There was a time when I was like, " Man, I can't do something like this". Bur hey, once you get the concept clear, it's all easy.