Question: Need help with the actual code. For this assignment you will be building Hangman. Your goal is to build this game using HTML, CSS and

Need help with the actual code.

For this assignment you will be building Hangman. Your goal is to build this game using HTML, CSS and JavaScript.

The process of the game should be:

Allow the user to specify the difficulty:

easy - for words of length 3-5

medium - for words of length 6-9

hard - for words of length 10-15

On difficulty selection, we'll make a HTTP Request to to get a word for the game.You'll need to specify the difficulty in the query string of your url.

Hint: Dont hard-code all three URLs. Instead, use string template-ing to populate the query string.

Show the word's length as underscores in place of letters which have not yet been guessed.

for the word BOOK where the Letters O, and K have been guessed, this would look like _ O O K

Show a display/paragraph/span containing previously guessed letters to the user

Previously Guessed: C, E, N, L

Show a display/Canvas drawing of the Hangman a. use canvas API for the hangman drawing

Allow user to input a letter to guess. with the following form validations.

Alert the user if they enter a letter they have already guessed

Alert the user if the provided input wasn't a letter

Alert the user if they hit the submit without providing any input (length == 0)

Alert the user if they provided more than one character.

If the guessed letter is correct, show it in the proper place for the word display (the underscored placeholder) a. check if the word has completely been guessed and announce winner if so.

If the guessed letter is incorrect, draw the next body part on the hangman (whatever order and number of lines/body parts you wish) a. check if all the body parts have been drawn to announce the game as lost.

When the game is over, alert the user if they won or lost and give an option to reset the game

For 1 Extra Credit point, use the animate.css library to animate the Hangman Title.

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!