Javascript Game Hangman Game – Select Letters solve the phrase – player needs to guess the hidden phrase by clicking the available letters. Solve it will as little missed letters as possible.
GET the Course https://www.udemy.com/course/javascript-games/?referralCode=1FA695493D1D521C1575
- JavaScript Hangman Game Board Setup.
- Launch app content when DOM loaded DomContentLoaded Run App DOM is ready to write and create Elements
- Add game logic step by step to build JavaScript Hangman
- Create game start Start the Game Setup.
- Setup and build gameplay adding and Building Player Letters
- Use JavaScript conditions check correct guess Check Letters to Word
- Update player Elements and DOM values Update Hidden Letters
- add Score and Player Score conditions
- set Game Win Conditions and use of JavaScript logic to provide gameplay
Live Example
https://discoveryvip.com/examples/hangman.html
HTML
<!doctype html>
<html>
<head><title>Hangman Game</title>
<link rel="stylesheet" href="style.css">
<script src="app2.js"></script>
<script>
document.addEventListener('DOMContentLoaded',app.init);
</script>
</head>
<body>
<div class="gameArea"></div>
</body>
</html>
CSS
.gameArea {
text-align: center;
font-size: 2em;
}
.box , .boxD{
display: inline-block;
width: 30px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 5px;
background-color: black;
color:white;
}
.boxE{
display: inline-block;
width: 40px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1.5em;
}
.box:hover{
background-color: white;
color:black;
}
button{
background-color: red;
padding: 10px;
color:white;
font-size: 2em;
border-radius: 10px;
margin-bottom: 10px;
cursor: grab;
}
JavaScript
const app = function() {
//variables
const gameValues = {cur:'',solution:'',correct:0,incorrect:0,total:0};
const domEle = {};
//const myWords = ['aaaaa','aaaal','css'];
const myWords = ['learn javascript','learn html','learn css'];
function init(){
//select the DOM objects
domEle.gameArea = document.querySelector('.gameArea');
domEle.score = createElements('div',domEle.gameArea,'score');
domEle.btn = createElements('button',domEle.gameArea,'Start Game');
domEle.hiddenWord = createElements('div',domEle.gameArea,'secret words');
domEle.letters = createElements('div',domEle.gameArea,'letters');
domEle.score.style.display = 'none';
domEle.letters.style.display = 'none';
domEle.hiddenWord.textContent = 'Click the button to start the hangman game';
domEle.btn.addEventListener('click',startGame);
}
function startGame(){
domEle.btn.style.display = 'none';
if(myWords.length > 0 ){
myWords.sort(()=>{
return .5 - Math.random();
})
gameValues.total = 0;
gameValues.correct = 0;
gameValues.incorrect = 0;
gameValues.cur = myWords.shift();
gameValues.solution = gameValues.cur.split('');
domEle.score.style.display = 'block';
domEle.letters.style.display = 'block';
buildBoard();
scoreBoard();
}
}
function scoreBoard(){
let output = `${gameValues.total} letters Found(${gameValues.correct}) missed(${gameValues.incorrect})`;
domEle.score.innerHTML = output;
//check if winner
if(gameValues.total == gameValues.correct ){
gameOver();
}
}
function gameOver(){
if(myWords.length > 0 ){
domEle.letters.style.display = 'none';
domEle.btn.style.display = 'inline-block';
domEle.btn.textContent = 'Next Round';
}else{
domEle.letters.innerHTML = 'You solved all the words<br>GAME OVER!!';
}
let output = `You found all ${gameValues.total} letters with ${gameValues.incorrect} missed`;
domEle.score.innerHTML = output;
}
function checkLetters(val){
//console.log(val);
let solLetters = document.querySelectorAll('.boxE');
let foundChecker = 0;
solLetters.forEach((el)=>{
//console.log(el.letter);
if(val == el.letter.toUpperCase()){
el.textContent = el.letter.toUpperCase();
foundChecker++;
}
})
//console.log(foundChecker);
if(foundChecker!=0){
gameValues.correct += foundChecker;
}else{
gameValues.incorrect++;
}
scoreBoard();
}
function buildBoard(){
//gameValues.cur
domEle.letters.innerHTML = '';
domEle.hiddenWord.innerHTML = '';
gameValues.solution.forEach((lett)=>{
let div = createElements('div',domEle.hiddenWord,'-');
div.classList.add('boxE');
div.letter = lett;
if(lett == ' '){
div.style.borderColor = 'white';
div.textContent = ' ';
}else{
gameValues.total++;
}
})
for(let i=0;i<26;i++){
let temp = String.fromCharCode(65 + i);
let div = createElements('div',domEle.letters,temp);
div.style.cursor = 'grab';
div.classList.add('box');
let checker = function(e){
checkLetters(temp);
div.style.backgroundColor = '#ddd';
div.style.cursor = 'default';
div.classList.remove('box');
div.classList.add('boxD');
div.removeEventListener('click',checker);
}
div.addEventListener('click',checker);
}
}
function createElements(val,parentEle,output){
let temp = document.createElement(val);
parentEle.append(temp);
temp.textContent = output;
return temp;
}
return {
init:init
}
}();