<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hangman</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="game">
        <div class="container">
            <h1 class="title">Виселица</h1>
            <p class="subtitle">Угадай слово на компьютерную тематику</p>
            <div class="hangman">
                <div class="hangman__tree">
                    <div class="hangman__header body-item hide">
                        <div class="hangman__rope"></div>
                        <div class="hangman__head"></div>
                    </div>
                    <div class="hangman__body body-item hide">
                        <div class="hangman__hand body-item hide"></div>
                        <div class="hangman__hand hangman__hand_r body-item hide"></div>
                    </div>
                    <div class="hangman__foots">
                        <div class="hangman__foot body-item hide"></div>
                        <div class="hangman__foot hangman__foot_r body-item hide"></div>
                    </div>
                </div>
            </div>
            <button class="btn btn__start" type="button">Начать</button>
            <div class="words">
            </div>
        </div>
    </div>
    <div class="alphabet">
        <button class="alphabet__word" type="button" value="а">а</button>
        <button class="alphabet__word" type="button" value="б">б</button>
        <button class="alphabet__word" type="button" value="в">в</button>
        <button class="alphabet__word" type="button" value="г">г</button>
        <button class="alphabet__word" type="button" value="д">д</button>
        <button class="alphabet__word" type="button" value="е">е</button>
        <button class="alphabet__word" type="button" value="ё">ё</button>
        <button class="alphabet__word" type="button" value="ж">ж</button>
        <button class="alphabet__word" type="button" value="з">з</button>
        <button class="alphabet__word" type="button" value="и">и</button>
        <button class="alphabet__word" type="button" value="й">й</button>
        <button class="alphabet__word" type="button" value="к">к</button>
        <button class="alphabet__word" type="button" value="л">л</button>
        <button class="alphabet__word" type="button" value="м">м</button>
        <button class="alphabet__word" type="button" value="н">н</button>
        <button class="alphabet__word" type="button" value="о">о</button>
        <button class="alphabet__word" type="button" value="п">п</button>
        <button class="alphabet__word" type="button" value="р">р</button>
        <button class="alphabet__word" type="button" value="с">с</button>
        <button class="alphabet__word" type="button" value="т">т</button>
        <button class="alphabet__word" type="button" value="у">у</button>
        <button class="alphabet__word" type="button" value="ф">ф</button>
        <button class="alphabet__word" type="button" value="х">х</button>
        <button class="alphabet__word" type="button" value="ц">ц</button>
        <button class="alphabet__word" type="button" value="ч">ч</button>
        <button class="alphabet__word" type="button" value="ш">ш</button>
        <button class="alphabet__word" type="button" value="щ">щ</button>
        <button class="alphabet__word" type="button" value="ъ">ъ</button>
        <button class="alphabet__word" type="button" value="ы">ы</button>
        <button class="alphabet__word" type="button" value="ь">ь</button>
        <button class="alphabet__word" type="button" value="э">э</button>
        <button class="alphabet__word" type="button" value="ю">ю</button>
        <button class="alphabet__word" type="button" value="я">я</button>
    </div>
    

    <script src="js/script.js"></script>
</body>

</html>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=PT+Sans&display=swap");

* {
    padding: 0px;
    margin: 0px;
    border: 0px;
}

/*  */
*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

:focus,
:active {
    outline: none;
}

a:focus,
a:active {
    outline: none;
}

aside,
nav,
footer,
header,
section {
    display: block;
}

html,
body {
    height: 100%;
    min-width: 320px;
}

body {
    line-height: 1;
    font-family: "PT Sans";
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

input,
button,
textarea {
    font-family: "PT Sans";
}

input::-ms-clear {
    display: none;
}

button {
    cursor: pointer;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

a,
a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

ul li {
    list-style: none;
}

img {
    vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
    font-size: inherit;
}

body {
    color: #000;
    font-size: 15px;
    overflow-x: hidden;
}

.wrapper {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

@media (max-width: 1140px) {
    .container {
        max-width: 970px;
    }
}

@media (max-width: 991.98px) {
    .container {
        max-width: 750px;
    }
}

@media (max-width: 767.98px) {
    .container {
        max-width: none;
        padding: 0 10px;
    }
}

.title {
    font-size: 30px;
    font-weight: 600;
    margin: 20px 0 0 0;
}

.subtitle {
    font-size: 20px;
    font-weight: 600;
    margin: 20px 0 0 0;
}

.hangman {}

.hangman__tree {
    border-top: 20px solid rgb(136, 82, 0);
    border-left: 20px solid rgb(136, 82, 0);
    height: 400px;
    width: 200px;
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.hangman__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
    transition: all .4s ease;
    opacity: 0;
}
.hangman__header.show {
    opacity: 1;
}
.hangman__header.hide {
    opacity: 0;
}

.hangman__rope {
    height: 50px;
    width: 10px;
    background-color: rgb(202, 131, 0);
}

.hangman__head {
    width: 50px;
    height: 50px;
    background-color: rgb(95, 63, 0);
    border-radius: 50%;
}

.hangman__body {
    width: 80px;
    height: 130px;
    background-color: rgb(46, 128, 236);
    border-radius: 5px;
    position: relative;
    z-index: 3;
    transition: all .4s ease;
    opacity: 0;
}
.hangman__body.show {
    opacity: 1;
}
.hangman__body.hide {
    opacity: 0;
}

.hangman__body::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: rgb(30, 151, 0);
    border-radius: 0 0 5px 5px;
    border-top: 5px solid rgb(131, 0, 0);
}

.hangman__hand {
    width: 20px;
    height: 80px;
    background-color: rgb(95, 63, 0);
    border-radius: 20px;
    transform: rotate(20deg);
    position: absolute;
    top: 0;
    left: -19px;
    transition: all .4s ease;
    opacity: 0;
}
.hangman__hand.show {
    opacity: 1;
}
.hangman__hand.hide {
    opacity: 0;
}

.hangman__hand_r {
    transform: rotate(-20deg);
    position: absolute;
    top: 0;
    left: 100%;
    transition: all .4s ease;
    opacity: 0;
}
.hangman__hand_r.show {
    opacity: 1;
}
.hangman__hand_r.hide {
    opacity: 0;
}

.hangman__foots {
    display: flex;
    justify-content: space-between;
    width: 80px;
    margin: -20px 0 0 0;
}

.hangman__foot {
    width: 20px;
    height: 90px;
    background-color: rgb(95, 63, 0);
    border-radius: 20px;
    transform: rotate(10deg);
    transition: all .4s ease;
    opacity: 0;
}
.hangman__foot.show {
    opacity: 1;
}
.hangman__foot.hide {
    opacity: 0;
}

.hangman__foot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 75%;
    width: 100%;
    background-color: rgb(30, 151, 0);
    border-radius: 20px 20px 0 0;
}

.hangman__foot_r {
    transform: rotate(-10deg);
    transition: all .4s ease;
    opacity: 0;
}
.hangman__foot_r.show {
    opacity: 1;
}
.hangman__foot_r.hide {
    opacity: 0;
}

.body {}

.answer {
    display: flex;
    justify-content: center;
    margin: 40px 0 0 0;
    display: none;
}

.input {
    border-radius: 10px;
    border: 2px solid rgb(53, 53, 53);
    width: 200px;
    padding: 10px 20px;
    margin: 0 20px;
}

.btn {
    min-width: 120px;
    margin: 40px auto;
    background-color: rgb(53, 53, 53);
    border-radius: 10px;
    color: #fff;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: 600; 
}

.words {
    display: flex;
    justify-content: center;
    transition: all .4s ease;
    margin: 40px 0;
}

.word {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: rgb(153, 153, 153);
    color: #fff;
    font-size: 0px;
    font-weight: 600;
    margin: 0 10px 0 0;
    transition: all .4s ease;
}

.alphabet {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 50%;
    transform: translate(100%, -50%);
    opacity: 0;
    right: 10px;
    width: 300px;
    transition: all .4s ease;
}

.alphabet__word {
    /* cursor: pointer; */
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    background-color: rgb(243, 255, 79);
    font-size: 18px;
    font-weight: 600;
    border-radius: 0;
    text-transform: uppercase;
    transition: all .4s ease;
}
'use strict';

window.addEventListener('DOMContentLoaded', () => {

    const words = ['Компьютер', 'Программа', 'Клавиатура', 'Монитор', 'Мышь', 'Микрофон', 'Дисковод'];

    const btnStart = document.querySelector('.btn__start'),
          subtitle = document.querySelector('.subtitle'),
          title = document.querySelector('.title'),
          alphabet = document.querySelector('.alphabet'),
          alphabetLetters = document.querySelectorAll('.alphabet__word'),
          wordsItem = document.querySelector('.words'),
          bodyItem = document.querySelectorAll('.body-item');


    // get random word from array
    function randomWord(arr) {
        const i = Math.floor(Math.random() * arr.length);
        const word = arr[i];
        return word;
    }

    // create blocks with letters
    function createBlocks(word) {
        let blocks = word.toLowerCase().split('');
        const elements = [];
        for (let i = 0; i < blocks.length; i++) {
            let w = document.createElement('div');
            w.classList.add('word');
            w.textContent = blocks[i];
            elements.push(w);
        }
        elements.forEach(e => wordsItem.append(e));
        return elements;
    }

    // get blocks with right letter
    function getBlock(letter, blocks) {
        let b = [];
        blocks.forEach(block => {
            if (block.textContent === letter.value) {
                b.push(block);
            }
        });
        return b;
    }

    // start our game
    function startGame() {
        btnStart.style.display = 'none';
        alphabet.style.cssText = `
        transform: translate(0%, -50%);
        opacity: 1;
    `;
        title.textContent = 'Добро пожаловать на казнь!';
        title.style.color = '#b40000';
        subtitle.textContent = 'Выберите букву';
    }

    // playing game
    function game() {
        startGame();
        let wrong = 0,
            right = 0;
        // word from array and blocks with letters
        let gameWord = randomWord(words),
            gameBlocks = createBlocks(gameWord);

        console.log(gameWord);

        alphabetLetters.forEach(letter => {
            letter.style.cssText = `text-transform: uppercase;`;

            letter.addEventListener('click', (e) => {
                e.preventDefault();
                const target = e.target;
                let rightAnswer = getBlock(target, gameBlocks);
                if (rightAnswer.length > 0) {
                    target.style.backgroundColor = 'rgb(116, 224, 72)';
                    target.disabled = true;
                    rightAnswer.forEach(answ => {
                        answ.style.cssText = `
                        font-size: 20px;
                        text-transform: uppercase;
                    `;
                    });
                    right += rightAnswer.length;
                    if (right === gameWord.length) {
                        winGame();
                        return;
                    }
                } else {
                    bodyItem[wrong].style.opacity = '1';
                    wrong++;
                    target.disabled = true;
                    target.style.backgroundColor = 'rgb(255, 72, 72)';
                    if (wrong === 6) {
                        loseGame(gameBlocks);
                        return;
                    }
                }
            });
        });
    }

    function endGame() {
        alphabetLetters.forEach(l => {
            l.disabled = true;
        });
        btnStart.style.display = 'block';
        btnStart.textContent = 'Начать заново';
        btnStart.classList.remove('btn__start');
        btnStart.classList.add('btn__restart');
    }

    function winGame() {
        endGame();
        title.textContent = 'Победа!';
        title.style.color = 'rgb(0, 255, 85)';
        subtitle.textContent = 'Вы обманули смерть';
    }

    function loseGame(gameBlocks) {
        endGame();
        title.textContent = 'Поражение!';
        title.style.color = 'rgb(255, 43, 43)';
        subtitle.textContent = 'Смерть настигла вас';
        gameBlocks.forEach(item => {
            item.style.cssText = `
            font-size: 20px;
            text-transform: uppercase;
            `;
        });
        const message = document.createElement('p');
        message.textContent = 'Было загадано слово';
        wordsItem.insertAdjacentElement('beforebegin', message);
    }

    function restart() {
        bodyItem.forEach(item => {
            item.style.opacity = '0';
        });
        alphabetLetters.forEach(letter => {
            letter.disabled = false;
            letter.style.backgroundColor = 'rgb(243, 255, 79)';
        });
        document.querySelectorAll('.word').forEach(word => {
            word.remove();
        });
        game();
    }


    btnStart.addEventListener('click', () => {
        if (btnStart.classList.contains('btn__start')) {
            game();
        } else if (btnStart.classList.contains('btn__restart')) {
            restart();
        }
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.