How to create a Hangman game with Javascript
This the part of Brad Traversy’s course.
Features:
SVG drawing with line and circle for a hangman
letter matching the words, separating the correct letters and wrong letters, then displaying
same typing letters notification box and success box
play again game with reset button and enter press
HTML
SVG drawing: the rode is a four-line shape.
x1,x2 are the axis of x,y1,y2 are the axis of y, which two-point makes a line
head is a circle with cx, cy(the center of the circle),r(the radius of the circle)
body ,arms and legs are all the lines
where displaying the wrong letters
success message box
same typing message box
CSS
the hangman fill and stroke set up
hide the hangman lines first
hide the popup container first and change it in the js
position the notification box outside of the page and change the y axis to show up
JS
all the DOMs needed
the data is the array with several words or can be fetched from API
each time the selected word should be a random one
the correctLetters and wrongLetters to strore the qualidied array
loop the selected word and if the letter is included in the correctLetter, show the letter
if the displaying word is the same as the selected word, the success final message box shows up.
when key pressing the letters from a to z, checking the condition that whether the pressing letter included in the selected word. If the letter is already in the correct array, show the notification, if not, then add to the correct array. The same as the wrong array.
When want to display the wrong letters, it’s the same way.
map the wrong array and display in the dom
loop each of the hangman lines, if the index smaller than the length of the wrong array, showing the line.
When the line length is the same as the wrong array length, the message box shows up.
show a notification if needed and hide after 2 second
When clicking the play again button or key press the enter, reset all the arrays, and run the functions again, also hide the popup box.
do not forget to call the displayWord() when loading the page
