Hangman Game Using Javascript

Submitted by jaredgwapo on Friday, January 22, 2016 - 10:50.

Language

In this tutorial, we are going to make a simple hangman game using javascript and html. Just follow the instructions below and download the source code. You can you this in your projects or systems.

Instructions

Writing our html code

<FORM NAME="f">
 
<TABLE BGCOLOR=#428bca BORDER=1>
 <TR>
  <TD COLSPAN=4 ALIGN=RIGHT>
   Score : <INPUT TYPE=TEXT NAME="score" VALUE="0" onfocus="score.blur();" SIZE=2>
   <BR>
   Fails (6): <INPUT TYPE=TEXT NAME="lives" VALUE="0" onfocus="lives.blur();" SIZE=2>  
  </TD>
  <TD COLSPAN=7 ALIGN=CENTER>
   <INPUT TYPE=TEXT NAME="word" VALUE="    --- Hangman ---" onfocus="word.blur();" SIZE=25> 
    <BR>
   <INPUT TYPE=TEXT NAME="tried" VALUE="Click GO to get a word." onfocus="tried.blur();" SIZE=25>  
  </TD>
  <TD COLSPAN=2 ALIGN=CENTER>
   <INPUT TYPE=BUTTON onclick="new_word(this.form);" VALUE=" GO ">   
  </TD>
 </TR>
 <TR>
  <TD><INPUT TYPE=BUTTON VALUE=" A "   onclick="seek('A');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" B "   onclick="seek('B');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" C "   onclick="seek('C');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" D "   onclick="seek('D');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" E "   onclick="seek('E');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" F "   onclick="seek('F');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" G "   onclick="seek('G');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" H "   onclick="seek('H');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" I   " onclick="seek('I');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" J  "  onclick="seek('J');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" K "   onclick="seek('K');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" L  "  onclick="seek('L');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" M "   onclick="seek('M');"></TD>
 </TR>
 <TR>
  <TD><INPUT TYPE=BUTTON VALUE=" N "   onclick="seek('N');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" O "   onclick="seek('O');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" P "   onclick="seek('P');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" Q "   onclick="seek('Q');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" R "   onclick="seek('R');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" S "   onclick="seek('S');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" T "   onclick="seek('T');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" U "   onclick="seek('U');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" V "   onclick="seek('V');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" W "   onclick="seek('W');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" X  "  onclick="seek('X');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" Y "   onclick="seek('Y');"></TD>
  <TD><INPUT TYPE=BUTTON VALUE=" Z  "  onclick="seek('Z');"></TD>
 </TR>
</TABLE>
 
</FORM>

Writing our Javascript Code

<SCRIPT LANGUAGE="javascript">
 
/*
Script by Mike Mcgrath- http://website.lineone.net/~mike_mcgrath
Featured on JavaScript Kit (http://javascriptkit.com)
For this and over 400+ free scripts, visit http://javascriptkit.com
*/
 
var alpha=new Array();
var alpha_index=0;
 
var bravo=new Array();
var bravo_index=0;
 
var running=0;
var failnum=0;
var advising=0;
 
function pick()
{
  var choice="";
  var blank=0;
 
  for (i=0; i<words[index].length; i++)
  {
    t=0;
    for(j=0; j<=alpha_index; j++) 
    if(words[index].charAt(i)==alpha[j] || words[index].charAt(i)==alpha[j].toLowerCase()) t=1;
    
    if (t) choice+=words[index].charAt(i)+" ";
    else 
    {
      choice+="_ ";
      blank=1;
    }
  }   
    
  document.f.word.value=choice;
    
  if (!blank)
  {
    document.f.tried.value="   === You Win! ===";
    document.f.score.value++;
    running=0;
  }
} 
 
 
function new_word(form)
{
  if(!running)
  {
    running=1;
    failnum=0;
    form.lives.value=failnum;
    form.tried.value="";
    form.word.value="";
    index=Math.round(Math.random()*10000) % 100;
    alpha[0]=words[index].charAt(0);
    alpha[1]=words[index].charAt(words[index].length-1);
    alpha_index=1;
    bravo[0]=words[index].charAt(0);
    bravo[1]=words[index].charAt(words[index].length-1);
    bravo_index=1;
    pick();
  }
  else advise("A word is already in play!");
}
 
function seek(letter)
{
  if (!running) advise(".....Click GO to start !");
  else
  {
    t=0;
    for (i=0; i<=bravo_index; i++)
    {
      if (bravo[i]==letter || bravo[i]==letter.toLowerCase()) t=1;
    }
 
    if (!t) 
          {
            document.f.tried.value+=letter+" "
            bravo_index++;
            bravo[bravo_index]=letter;
            
      for(i=0;i<words[index].length;i++)
          if(words[index].charAt(i)==letter || words[index].charAt(i)==letter.toLowerCase()) t=1;
          
      if(t)
      {
            alpha_index++;
              alpha[alpha_index]=letter;
            }
            else failnum++;
        
      document.f.lives.value=failnum;
            if (failnum==6) 
      {
        document.f.tried.value="You lose - Try again!";
        document.f.word.value=words[index];
        document.f.score.value--;
        running=0;
      }
                        else pick();
          }
          else advise("Letter "+letter+" is already used!");
  }
}
 
function advise(msg)
{
  if (!advising)
  {
    advising=-1;
    savetext=document.f.tried.value;  
    document.f.tried.value=msg;
    window.setTimeout("document.f.tried.value=savetext; advising=0;",1000);
  }
}
 
var words = new Array("","acrimonious","allegiance","ameliorate","annihilate","antiseptic","articulate","authoritative","benefactor","boisterous","breakthrough","carcinogenic","censorious","chivalrous","collarbone","commendable","compendium","comprehensive","conclusive","conscientious","considerate","deferential","denouement","determinate","diffidence","disruption","earthenware","elliptical","entanglement","escutcheon","extinguish","extradition","fastidious","flamboyant","forethought","forthright","gregarious","handmaiden","honeysuckle","hypocritical","illustrious","infallible","lumberjack","mischievous","mollycoddle","nimbleness","nonplussed","obliterate","obsequious","obstreperous","opalescent","ostensible","pandemonium","paraphernalia","pawnbroker","pedestrian","peremptory","perfunctory","pernicious","perpetrate","personable","pickpocket","poltergeist","precipitous","predicament","preposterous","presumptuous","prevaricate","propensity","provisional","pugnacious","ramshackle","rattlesnake","reciprocate","recrimination","redoubtable","relinquish","remonstrate","repository","reprehensible","resolution","resplendent","restitution","retaliation","retribution","saccharine","salubrious","skulduggery","skyscraper","soothsayer","tearjerker","transcribe","turpentine","unassuming","underscore","undertaker","underwrite","unobtrusive","vernacular","waterfront","watertight");
 
</SCRIPT>

You have successfully created a simple hangman game using javascript. For more information, suggestions and queries feel free to comment below.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Comments

How to change the wordlist?

Add new comment

Add new comment
723 views