Hangman is a game developed using HTML, CSS, and Javascript. It generates a random word for the user to solve. The user guesses letters to solve the word using the keyboard displayed on screen. This project was made to get a grasp of DOM manipulation along with learning CSS transitions and making API calls.
-
Converts randomly generated word from API call to uppercase letters
-
Finds the location of the letter and places it in correct position on wordbank
-
Handles repetitive letters in a word
-
Correct letter will pop up above selected keyboard button and animated to correct placement on wordbank
Option 1:
Download zip from this repository
OR Clone Repo: https://github.com/ajay-k/hangman.git:
Then, open index.html using Firefox or Google Chrome.
Option 2:
A random word is generated automatically upon page loading, if you want another word refresh the page
Select letters on the keyboard to guess the word
-
Vowels are highlighted in orange on the keyboard to make it easier to distingush
-
If letter is in word, keyboard button is turned green and animation takes effect to move letter onto correct word position a button is disabled.
-
If letter is not in word, keyboard button is turned red and button is disabled.
Intially the word was choosen by me, to make it more difficult and dynamic I choose to obtain random words from an API. Once this word is retrieved I create the empty div elements with black bottoms borders on bottom to simulate a empty word bank. I create divs according to the letter for the word, so one empty div for each letter. Then I generate the buttons with corresponding alphabet letters as their values. Once the user clicks on a button I check to see if that letter appears in the word and find all placements of that button and place the letter to its div element. If player guesses the letter wrong I update the image to add a piece of body part and decrease their remaining turns.
When resizing the browser window the animiation may animate the letter to the wrong location, but the correct letter will appear on the word bank.