How To Create Hangman Game With HTML, CSS and Javascript

Let’s create classic hangman game with HTML, CSS and Javascript.

HTML

<div class="container">
  <div class="hangman_container">
    <div class="hangman">
      <div class="head"></div>
      <div class="body"></div>
      <div class="left_hand"></div>
      <div class="right_hand"></div>
      <div class="left_leg"></div>
      <div class="right_leg"></div>
    </div>
  </div>
  <div class="word_container">
    <div class="word"></div>
  </div>
</div>
<div class="game_over">
  <div class="game_over_content"></div>
 </div>

CSS

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #EBF0F6;
}

.container {
    width: 1200px;
    margin: 0 auto;
}

.hangman_container {
    margin-top: 50px;
}

.hangman {
    width: 250px;
    height: 250px;
    border-top: 5px solid #000;
    border-left: 5px solid #000;
    margin: 0 auto;
    position: relative;
}

.hangman::before {
    content: '';
    width: 5px;
    height: 90px;
    background-color: #000;
    border-left: 2px solid #000;
    position: absolute;
    top: -20px;
    left: 30px;
    transform: rotate(52deg);
}

.hangman::after {
    content: '';
    width: 20px;
    height: 5px;
    background-color: #000;
    border-left: 2px solid #000;
    position: absolute;
    top: 7px;
    left: 125px;
    transform: rotate(90deg);
}

.head {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #000;
    position: absolute;
    top: 19px;
    left: 110px;
    display: none;
}

.body {
    width: 3px;
    height: 90px;
    background-color: #000;
    position: absolute;
    left: 133px;
    top: 68px;
    display: none;
}

.left_hand {
    width: 2px;
    height: 50px;
    background-color: #000;
    position: absolute;
    transform: rotate(35deg);
    top: 80px;
    left: 120px;
    display: none;
}

.right_hand {
    width: 2px;
    height: 50px;
    background-color: #000;
    position: absolute;
    transform: rotate(-35deg);
    top: 82px;
    left: 149px;
    display: none;
}

.left_leg {
    width: 3px;
    height: 70px;
    background-color: #000;
    position: absolute;
    transform: rotate(25deg);
    top: 150px;
    left: 118px;
    display: none;
}

.right_leg {
    width: 3px;
    height: 70px;
    background-color: #000;
    position: absolute;
    transform: rotate(-25deg);
    top: 150px;
    left: 148px;
    display: none;
}

.display_feature {
    display: block;
}

.word_container {
    width: 250px;
    margin: 85px auto;
}

.word {
    display: flex;
}

.letter {
    width: 50px;
    height: 40px;
    margin: 2px;
    font-size: 27px;
    text-align: center;
    background-color: #ccc;
    padding: 2px 15px;
    border-bottom: 3px solid #000;
    display: flex;
    justify-content: center;
}

.correct_guess_color {
    color: #fff;
    background-color: #00C2CB;
}

.game_over {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.game_over_content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
}

.game_over_content>p {
    font-size: 2rem;
    text-align: center;
}

JS

let word = document.querySelector('.word');

let words_list = ["javascript", "python", "computer", "technology", "software", "programming", "application", "algorithm"];
let random_index = Math.floor(Math.random() * 8);
let random_word = words_list[random_index];
let press_word = [];

let head = document.querySelector('.head');
let body = document.querySelector('.body');
let left_hand = document.querySelector('.left_hand');
let right_hand = document.querySelector('.right_hand');
let left_leg = document.querySelector('.left_leg');
let right_leg = document.querySelector('.right_leg');
let wrong_letter_count = 0;

let game_over = document.querySelector('.game_over');
let game_over_content = document.querySelector('.game_over_content');

function hangman_start() {
    for (let i = 0; i < random_word.split("").length; i++) {
        word.innerHTML += ` <span class="letter"></span>`
    }
}

window.addEventListener("keydown", event => {
    let letter = document.querySelectorAll('.letter');
    if (event.keyCode >= 65 && event.keyCode <= 90) {
        if (random_word.includes(event.key)) {
            if (!press_word.includes(event.key)) {
                press_word.push(event.key);
                random_word.split("").forEach((element, i) => {
                    if (event.key === element) {
                        letter[i].innerHTML = `${event.key}`
                        letter[i].classList.add('correct_guess_color');
                    }
                })
            }
            let correct_guess_color = document.querySelectorAll('.correct_guess_color');
            if (correct_guess_color.length === random_word.split("").length) {
                showNotification("w");
            };
        } else {
            wrong_letter();
        }
    }
})
function wrong_letter() {
    wrong_letter_count += 1;
    switch (wrong_letter_count) {
        case 1:
            head.classList.add('display_feature');
            break;
        case 2:
            body.classList.add('display_feature');
            break;
        case 3:
            left_hand.classList.add('display_feature');
            break;
        case 4:
            right_hand.classList.add('display_feature');
            break;
        case 5:
            left_leg.classList.add('display_feature');
            break;
        case 6:
            right_leg.classList.add('display_feature');
            showNotification("l");
    }
}
function showNotification(state) {
    game_over.style.display = "block";
    if (state === "w") {
        let p = document.createElement("p");
        let text_content = document.createTextNode("You Won! Game Will Restart Soon")
        p.appendChild(text_content);
        game_over_content.appendChild(p)

    } else if (state === "l") {
        let p = document.createElement("p");
        let text_content = document.createTextNode("You Lost! Game Will Restart Soon")
        p.appendChild(text_content);
        game_over_content.appendChild(p)
    }
    setTimeout(() => {
        reset()

    }, 3000);
}
function reset() {
    game_over.style.display = "none";
    head.classList.remove('display_feature');
    body.classList.remove('display_feature');
    left_hand.classList.remove('display_feature');
    right_hand.classList.remove('display_feature');
    left_leg.classList.remove('display_feature');
    right_leg.classList.remove('display_feature');
    game_over_content.innerHTML = ""
    document.querySelectorAll(".letter").forEach(e => e.remove());
    press_word = [];
    wrong_letter_count = 0;
    random_index = Math.floor(Math.random() * 5);
    random_word = words_list[random_index];
    hangman_start();
}
hangman_start();