Skip to content

Instantly share code, notes, and snippets.

@jduprey

jduprey/Hangman-Version-1.markdown

Created February 13, 2015 18:26
Show Gist options
  • Save jduprey/6575af192b000c9d97d7 to your computer and use it in GitHub Desktop.
Save jduprey/6575af192b000c9d97d7 to your computer and use it in GitHub Desktop.
Download ZIP
Hangman Version 1
Raw
Hangman-Version-1.markdown
Raw
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>
Raw
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!");
}
}
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment