<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Hangman</title>
    <link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
    <h1>Hangman Version 1</h1>
    <h2>By John Duprey</h2>
    <p>
      This is a very simple hangman game meant to illustrate concepts for the students, children, of the "<a href="http://learnwebdev.cloudvent.net/">Learn Web Development</a>" class.  It uses nothing but HTML5, CSS3, and Javascript.
    </p>
    <div id="gameBoard">
      <div id="gallows">
        <img id="gallowImg" src="https://dl.dropboxusercontent.com/u/261443/www/LearnWebDevelopment/sessions/session3/img/hangman_sm.png">
      </div>
      <div id="wordBox">
        <div id="word">
          <span class="letter">_</span>
        </div>
      </div>
      <div id="letters">
        <span class="letter clickable">A</span>
        <span class="letter clickable">B</span>
        <span class="letter clickable">C</span>
        <span class="letter clickable">D</span>
        <span class="letter clickable">E</span>
        <span class="letter clickable">F</span>
        <span class="letter clickable">G</span>
        <span class="letter clickable">H</span>
        <span class="letter clickable">I</span>
        <span class="letter clickable">J</span>
        <span class="letter clickable">K</span>
        <span class="letter clickable">L</span>
        <span class="letter clickable">M</span>
        <span class="letter clickable">N</span>
        <span class="letter clickable">O</span>
        <span class="letter clickable">P</span>
        <span class="letter clickable">Q</span>
        <span class="letter clickable">R</span>
        <span class="letter clickable">S</span>
        <span class="letter clickable">T</span>
        <span class="letter clickable">U</span>
        <span class="letter clickable">V</span>
        <span class="letter clickable">W</span>
        <span class="letter clickable">X</span>
        <span class="letter clickable">Y</span>
        <span class="letter clickable">Z</span>
      </div>
    </div>
    <script src="script.js"></script>
	</body>
</html>
// Hook into body onload event to initialize the game..
document.getElementsByTagName("body")[0].onload=initializeHangman;

function initializeHangman()
{
  document.getElementsByTagName("body")[0].onkeyup = keyClickEvent;
  document.getElementById("gallowImg").onload = imageLoaded;

  // Assign click handler for letter guesses
  var letters = document.getElementById("letters").getElementsByClassName("letter");
  for( var i = 0; i < letters.length; i++ )
  {
    var letter = letters[i];
    letter.onclick = mouseClickEvent;
  }

  // Display the word
  lettersLeft = word.length;
  var wordDiv = document.getElementById("word");
  wordDiv.innerHTML = "";
  for( var i = 0; i < word.length; i++ )
  {
    wordDiv.innerHTML += "<span class='letter'>_</span>";
  }
}

// Model
var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var word = "JavaScript".toUpperCase();
var lettersLeft;
var guesses = [];
var guessesLeft = 8;
var guessesWrong = 0;
var loadingImg = true;
var baseImgLocation = "https://dl.dropboxusercontent.com/u/261443/www/LearnWebDevelopment/sessions/session3/img/hangman";

// View
function updateImage(state)
{
  loadingImg = true;
  document.getElementsByTagName('body')[0].style.cursor  = 'wait';

  var gallowImg = document.getElementById("gallowImg");
  gallowImg.src = baseImgLocation + state + "_sm.png";
}

function imageLoaded(event)
{
  loadingImg = false;
  document.getElementsByTagName('body')[0].style.cursor = 'auto';
}

// Control
function keyClickEvent(event)
{
  choice(String.fromCharCode(event.keyCode))
}

function mouseClickEvent(event)
{
  choice(event.target.textContent);
}

function choice(letter)
{
  if( loadingImg )
  {
    console.log("Waiting for image to load, ignoring input.");
  }

  if( lettersLeft == 0 || guessesLeft == 0 )
  {
    console.log("Game over. Ignoring input.");
    return;
  }

  var letterPos = alphabet.indexOf(letter);
  if( letterPos < 0 )
  {
    console.log( letter + " is not a valid letter!");
    return;
  }

  if( guesses.indexOf(letter) > -1 )
  {
    console.log("You already guessed that!");
    return;
  }
  guesses.push(letter);

  var letters = document.getElementById("letters").getElementsByClassName("letter");

  if( word.indexOf(letter) > -1 ) // Correct guess
  {
    var wordLetters = document.getElementById("word").getElementsByClassName("letter");
    var foundLetterIndex = -1;
    while( (foundLetterIndex = word.indexOf(letter, foundLetterIndex+1)) > -1 )
    {
      lettersLeft--;
      wordLetters[foundLetterIndex].textContent = letter;
      wordLetters[foundLetterIndex].className = "letter correct";
      letters[letterPos].onclick = undefined;
      letters[letterPos].className = "letter correct";
    }
  }
  else // Incorrect guess
  {
    guessesWrong++;
    guessesLeft--;
    letters[letterPos].onclick = undefined;
    letters[letterPos].className = "letter wrong";
    updateImage(guessesWrong);
  }

  if( guessesLeft == 0 )
  {

    // Reveal remaining letters (in .wrong)
    var wordLetters = document.getElementById("word").getElementsByClassName("letter");
    for( var i = 0; i < wordLetters.length; i++ )
    {
      var wordTile = wordLetters[i];
      if( wordTile.textContent === "_" )
      {
        wordTile.textContent = word[i];
        wordTile.className = "letter wrong";
      }
    }
    alert("You Lose!");
  }

  if( lettersLeft == 0 )
  {
    alert("You Win!");
  }
}
body
{
  background-color: black;
  color: #f5f5f5;
}

#gameBoard
{
  position: relative;
  background-color: black;
  width: 400px;
  margin: auto;
}
#gallows
{

}

#gallowImg
{
  width: 400px;
  height: 400px;
  background-color: white;
}

#wordBox
{
  text-align: center;
  position: absolute;
  top: 350px;
  left: 1px;
  right: 1px;
}

#word
{
  border-color: black;
  border-width: 2px;
  background-color: black;
  display: inline-block;
}

#letters
{

}

.letter
{
  display: inline-block;
  font-family: courier, monospace;
  font-size: 18px;
  border: solid;
  padding: 3px 5px 3px 5px;
  margin: 1px 0px 1px 0px;
}

#letters .clickable:hover
{
  /*position: absolute;*/
  /*font-size: 4em;*/
  background-color: white;
  color: black;
  border: solid;
  border-color: white;
  cursor: pointer;
}

.wrong
{
  background-color: black;
  color: red;
  cursor: not-allowed;
}

.correct
{
  background-color: black;
  color: lightgreen;
  cursor: not-allowed;
}
# Hangman Version 1
This is a very simple hangman game meant to illustrate concepts for the students, children, of the "[Learn Web Development](http://learnwebdev.cloudvent.net/)" class.  It uses nothing but HTML5, CSS3, and Javascript.