How to Make Hangman Game Using HTML JavaScript

Submitted by alpha_luna on Monday, June 1, 2015 - 22:38.
A game is a good way to keep your visitors and yourself occupied in your site. This script is a reincarnation of the classic "Hang Man" game. You have to play against the computer. The vocabulary used in this game is configurable. This is a customized Hang Man game with images to display the wrong guesses. This is a cool and fun game to play. This is the game that the user/player will predict what is the word that the computer ask. It's only a simple game, but it can help to the user/player to improve their vocabulary and logical thinking.

Directions:

First: Kindly add this code below to the HEAD section of your page. 
  1. <script type="text/javascript">
  2. var can_play = true;
  3. var words = new Array("SOURCECODESTER", "ARTICLE", "BLOG", "TUTORIALS", "PROGRAMMING", "CODES");
  4.  
  5. var to_guess = "";
  6. var display_word = "";
  7. var used_letters = "";
  8. var wrong_guesses = 0;
  9.  
  10. function selectLetter(l)
  11. {
  12. if (can_play == false)
  13. {
  14. return;
  15. }
  16.  
  17. if (used_letters.indexOf(l) != -1)
  18. {
  19. return;
  20. }
  21.  
  22. used_letters += l;
  23. document.game.usedLetters.value = used_letters;
  24.  
  25. if (to_guess.indexOf(l) != -1)
  26. {
  27.  // correct letter guess
  28. pos = 0;
  29. temp_mask = display_word;
  30.  
  31. while (to_guess.indexOf(l, pos) != -1)
  32. {
  33. pos = to_guess.indexOf(l, pos);			
  34. end = pos + 1;
  35.  
  36. start_text = temp_mask.substring(0, pos);
  37. end_text = temp_mask.substring(end, temp_mask.length);
  38.  
  39. temp_mask = start_text + l + end_text;
  40. pos = end;
  41. }
  42.  
  43. display_word = temp_mask;
  44. document.game.displayWord.value = display_word;
  45.  
  46. if (display_word.indexOf("#") == -1)
  47. {
  48. // won
  49. alert("Well done, you have won!");
  50. can_play = false;
  51. }
  52. }
  53. else
  54. {
  55. // incortect letter guess
  56. wrong_guesses += 1;
  57. eval("document.hm.src=\"hm" + wrong_guesses + ".gif\"");
  58.  
  59. if (wrong_guesses == 10)
  60. {
  61. // lost
  62. alert("Sorry, you have lost!");
  63. can_play = false;
  64. }
  65. }
  66. }
  67.  
  68. function reset()
  69. {
  70. selectWord();
  71. document.game.usedLetters.value = "";
  72. used_letters = "";
  73. wrong_guesses = 0;
  74. document.hm.src="hmstart.gif";
  75. }
  76.  
  77. function selectWord()
  78. {
  79. can_play = true;
  80. random_number = Math.round(Math.random() * (words.length - 1));
  81. to_guess = words[random_number];
  82. //document.game.theWord.value = to_guess;
  83.  
  84. // display masked word
  85. masked_word = createMask(to_guess);
  86. document.game.displayWord.value = masked_word;
  87. display_word = masked_word;
  88. }
  89.  
  90. function createMask(m)
  91. {
  92. mask = "";
  93. word_lenght = m.length;
  94.  
  95. for (i = 0; i < word_lenght; i ++)
  96. {
  97. mask += "#";
  98. }
  99. return mask;
  100. }
  101. </script>
Second: This is the code for your BODY section of your page. 
  1. <body onLoad="reset(); return true;">
  2.  
  3. <center>
  4. <h2>Simple Hangman</h2>
  5.  
  6. <p>
  7. 	<img src="hmstart.gif" height="125" width="75" name="hm">
  8. </p>
  9.  
  10. <form name="game">
  11. 	<p style="font-weight:bold; font-size:18px;">
  12. 		Display Word: &nbsp;&nbsp;&nbsp;<input type="text" style="cursor:no-drop; width:200px; font-size:18px;" name="displayWord" disabled />
  13. 		<br />
  14. 		<br />
  15. 		Used Letters: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" style="cursor:no-drop; width:200px; font-size:18px;" name="usedLetters" disabled />
  16. 	</p>
  17. </form>
  18.  
  19. <p style="font-weight:bold; font-size:18px;">
  20.  
  21. <label>Choose a letter:</label>
  22.  
  23. <br />
  24. <br />
  25.  
  26. <a href="javascript:selectLetter('Q');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="Q"></a>
  27. <a href="javascript:selectLetter('W');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="W"></a>
  28. <a href="javascript:selectLetter('E');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="E"></a>
  29. <a href="javascript:selectLetter('R');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="R"></a>
  30. <a href="javascript:selectLetter('T');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="T"></a>
  31. <a href="javascript:selectLetter('Y');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="Y"></a>
  32. <a href="javascript:selectLetter('U');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="U"></a>
  33. <a href="javascript:selectLetter('I');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="I"></a>
  34. <a href="javascript:selectLetter('O');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="O"></a>
  35. <a href="javascript:selectLetter('P');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="P"></a>
  36. <br />
  37. <br />
  38. <a href="javascript:selectLetter('A');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="A"></a>
  39. <a href="javascript:selectLetter('S');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="S"></a>
  40. <a href="javascript:selectLetter('D');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="D"></a>
  41. <a href="javascript:selectLetter('F');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="F"></a>
  42. <a href="javascript:selectLetter('G');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="G"></a>
  43. <a href="javascript:selectLetter('H');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="H"></a>
  44. <a href="javascript:selectLetter('J');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="J"></a>
  45. <a href="javascript:selectLetter('K');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="K"></a>
  46. <a href="javascript:selectLetter('L');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="L"></a>
  47. <br />
  48. <br />
  49. <a href="javascript:selectLetter('Z');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="Z"></a>
  50. <a href="javascript:selectLetter('X');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="X"></a>
  51. <a href="javascript:selectLetter('C');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="C"></a>
  52. <a href="javascript:selectLetter('V');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="V"></a>
  53. <a href="javascript:selectLetter('B');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="B"></a>
  54. <a href="javascript:selectLetter('N');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="N"></a>
  55. <a href="javascript:selectLetter('M');"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="M"></a>
  56.  
  57. </p>
  58.  
  59. <br />
  60.  
  61. <p>
  62. <a href="javascript:reset()"><input type="button" style="cursor:pointer; margin-left: 10px; font-size:18px;" value="Start game / Reset game"></a>
  63. </p>
  64. </center>
  65.  
  66. </body>
Note: To change the words used, kindly find the code var words = new Array(). Words for all game appear between the brackets in a double quotes, with a comma for separating the words. Words should be in uppercase. Example: var words = new Array("SOURCECODESTER", "ARTICLE", "BLOG", "TUTORIALS", "PROGRAMMING", "CODES"); And, that's all!!! You already have a Simple HANGMAN game. Try it, and enjoy gaming.

Tags

Comments

Submitted byAnees A. (not verified)on Sun, 10/29/2017 - 13:23

the hangman gifs are not showing up for me. i think it has something to do with the document tag. plz help

Submitted byMegan Karavites (not verified)on Wed, 11/08/2023 - 22:19

How do you make a hangman game online/on the internet? What is the purpose for playing hangman games?

Add new comment

About text formats