jduprey/Hangman-Version-1.markdown

## Hangman-Version-1.markdown

      
    Raw
  

              Hangman-Version-1.markdown
            
          
    Hangman Version 1

This is a very simple hangman game meant to illustrate concepts for the students, children, of the "Learn Web Development" class.  It uses nothing but HTML5, CSS3, and Javascript.
A Pen by John Duprey on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Hangman</title>
    <link rel="stylesheet" type="text/css" href="./css/hangman.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="./js/hangman.js"></script>
	</body>
</html>

## script.js
// 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!");
  }
}

## style.css
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;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hangman</title>
	<link rel="stylesheet" type="text/css" href="./css/hangman.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="./js/hangman.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;
	}