Hangman Version 1.1

Developer
John Duprey
Size
3,814 Kb
Views
2,024
  1. Hangman Version 1.1 Previews
  2. Hangman Version 1.1 HTML Codes
  3. Hangman Version 1.1 CSS Codes
  4. Hangman Version 1.1 JS Codes

How do I make an hangman version 1.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.. What is a hangman version 1.1? How do you make a hangman version 1.1? This script and codes were developed by John Duprey on 23 January 2023, Monday.

Hangman Version 1.1 Previews
IQ Test

Hangman Version 1.1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hangman Version 1.1</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html>	<head>	<meta charset="UTF-8">	<title>Hangman</title>	</head>	<body> <h1>Hangman Version 1.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>	</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Hangman Version 1.1 - Script Codes CSS Codes

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.1 - Script Codes JS Codes

// Model
var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var word = "JavaScript".toUpperCase();
var lettersLeft;
var guesses = [];
var guessesLeft = 8;
var guessesWrong = 0;
var loadingImg = true;
// All images are hosted by my dropbox account you can get a zip archive of these images here: https://dl.dropboxusercontent.com/u/261443/www/LearnWebDevelopment/sessions/session3/img.zip
var baseImgLocation = "https://dl.dropboxusercontent.com/u/261443/www/LearnWebDevelopment/sessions/session3/img/hangman";
var images = [];
// 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>"; } // Preload all state game images to avoid delays during game play for( var i = 1; i <= guessesLeft; i++ )	{	preload(baseImgLocation + i + "_sm.png");	}
}
// 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!"); }
}
function preload()
{ for (i = 0; i < preload.arguments.length; i++) { images[i] = new Image(); images[i].src = preload.arguments[i]; }
}
Hangman Version 1.1 - Script Codes
Hangman Version 1.1 - Script Codes
Home Page Home
Developer John Duprey
Username jduprey
Uploaded January 23, 2023
Rating 3
Size 3,814 Kb
Views 2,024
Do you need developer help for Hangman Version 1.1?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John Duprey (jduprey) Script Codes
Name
Hangman Version 1.2
ExampleEdit
Testing Code Pen
Hangman Version 1
Hello AngularJS
Columns Using CSS2
In re. Closures
Client Side File Saving with FileSaver.js
A Pen by John Duprey
HTML5 Coding Test
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!