Code: Hangman

CSS

<style>
    body{
        background-color: black;
        color: white;
        margin: 0;
    }

    button {
        background-color: black;
        border: solid white 2px;
        color: white;
        cursor: pointer;
        padding: 0 20px;
        height: 50px;
    }

    .game-modal-container {
        background-color: rgba(0, 0, 0, .5);
        height: 100vh;
        position: absolute;
        display: grid;
        justify-content: center;
        align-content: center;
        visibility: hidden;
    }

    .game-modal {
        height: fit-content;
        width: fit-content;
        display: grid;
        border: solid white 2px;
        padding: 25px;
        position: absolute;
        top: 20%;
        left: calc(50vw – 350px);
        background-color: black;
    }

    .game-modal span {
        display: grid;
    }

    .close-modal-container {
        display: grid;
        justify-content: right;
    }

    .close-modal {
        background-color: black;
        border: solid white 2px;
        color: white;
        padding: 5px 15px;
        cursor: pointer;
    }

    .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
        justify-items: center
    }

    #clueInput {
        margin: 40px 0 10px 0;
        color: white
    }

    #phrase-div {
        font-size: 100%;
        margin: 50px 5px 0 5px;
        color: white
    }

    .modal-label {
        display: inline-block;
        margin: 0 0 10px 0;
    }

    .guess {
        color: white;
        display: grid;
        margin: 10px 0;
        align-items: center;
        align-content: center;
        align-self: center;
    }

    #guessSet {
        margin-top: 30px;
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 10px;
    }

    #result {
        margin: 50px 0 0 0;
        font-size: 40px
    }

    #lettersGuessedDiv {
        margin-bottom: 20px;
        padding: 5px 0 5px 20px;
        text-transform: uppercase;
        font-size: 30px;
        border: solid white 2px;
    }

    #lettersGuessed {
        margin: 0
    }

    #instructions {
        padding: 0;
        margin: 0 5px;
        text-align: left;
        color: white
    }

    .hangman-img {
        width: 300px;
        margin: 0;
        float: left;
        padding-left: 0%
    }

    #imgMain {
        display: grid;
        justify-items: center
    }

    #imgMain img {
        display: inline-block;
        margin: 0
    }

    #imgMain #main {
        padding-right: 20%;
        display: inline-block
    }

    .start-button-container {
        display: grid;
        justify-content: center;
    }

    .start-button,
    #submit-container button {
        color: white;
        background-color: black;
        padding: 10px 20px;
        cursor: pointer;
        border: solid white 2px;
    }

    #guessSet {
        visibility: hidden;
        height: 0;
    }

    .game-modal h4 {
        width: 222px;
    }

    #submit-container {
        display: grid;
        justify-content: center;
    }

    .game-modal-form {
        margin: 25px 0;
    }

    .game-modal-form div {
        display: grid;
        grid-template-columns: max-content max-content;
        gap: 10px;
        justify-content: end;
        width: 100%;
    }

    .guess-error {
        display: grid;
        margin-top: 10px;
    }

    .error {
        color: #ef7998;
        margin-bottom: 10px;
    }

    .hangmanman-illustation-container {
        position: relative;
        height: 600px;
        padding-left: 150px;
    }

    .gallows img {
        position: absolute;
        height: 100%;
    }

    .body-container {
        margin: 50px;
        position: relative;
    }

    .body-part {
        position: absolute;
    }

    .head {
        top: 120px;
        left: calc(50% – 175px);
        visibility: hidden;
        -webkit-animation: head-rotation 2s ease 0s;
        -webkit-animation-iteration-count: infinite;
        animation: head-rotation 2s ease 0s;
        animation-iteration-count: infinite;
    }

    .head,
    .head img {
        height: 75px;
    }

    .torso {
        top: 170px;
        left: calc(50% – 210px);
        visibility: hidden;
        -webkit-animation: body-rotation 2s ease 0s;
        -webkit-animation-iteration-count: infinite;
        animation: body-rotation 2s ease 0s;
        animation-iteration-count: infinite;
    }

    .torso,
    .torso img {
        height: 150px;
    }

    .left-arm {
        top: 200px;
        right: calc(50% + 20px);
        visibility: hidden;
        -webkit-animation: body-rotation 2s ease 0s;
        -webkit-animation-iteration-count: infinite;
        animation: body-rotation 2s ease 0s;
        animation-iteration-count: infinite;
    }

    .left-arm,
    .left-arm img {
        height: 200px;
    }

    .right-arm {
        top: 190px;
        left: calc(25% – 260px);
        visibility: hidden;
        -webkit-animation: body-rotation 2s ease 0s;
        -webkit-animation-iteration-count: infinite;
        animation: body-rotation 2s ease 0s;
        animation-iteration-count: infinite;
    }

    .right-arm,
    .right-arm img {
        height: 200px;
    }

    .left-leg {
        top: 270px;
        right: calc(33% + 75px);
        visibility: hidden;
        -webkit-animation: body-rotation 2s ease 0s;
        -webkit-animation-iteration-count: infinite;
        animation: body-rotation 2s ease 0s;
        animation-iteration-count: infinite;
    }

    .left-leg,
    .left-leg img {
        height: 200px;
    }

    .right-leg {
        top: 260px;
        left: calc(33% – 195px);
        visibility: hidden;
        -webkit-animation: body-rotation 2s ease 0s;
        -webkit-animation-iteration-count: infinite;
        animation: body-rotation 2s ease 0s;
        animation-iteration-count: infinite;
    }

    .right-leg,
    .right-leg img {
        height: 200px;
    }

    @keyframes head-rotation {
        50% {
            transform: rotate(-25deg);
        }

        100% {
            transform: rotate(25deg);
        }
    }

    @keyframes body-rotation {
        50% {
            transform: rotate(-5deg);
        }

        100% {
            transform: rotate(5deg);
        }
    }
</style>

HTML

<div class=”game-modal-container”>
    <div class=”game-modal”>
        <div class=”close-modal-container”>
            <button class=”close-modal”><span>X</span></button>
        </div>
        <form class=”game-modal-form”>
            <div id=”phraseSet”>
                <p class=”modal-label”>Write your HANGMAN phrase:</p>
                <input class=”phraseInput” type=”text” />
            </div>
            <span class=”error phrase-error”></span>
            <div id=”clueSet”>
                <p class=”modal-label”>Provide a clue:</p>
                <input class=”clueInput” type=”text” />
            </div>
            <span class=”error clue-error”></span>
        </form>
        <div id=”submit-container”>
            <button class=”game-submit-button”>Submit</button>
        </div>
    </div>
</div>
<div id=”lettersGuessedDiv”>
    <h4 id=”lettersGuessed”>Guessed: </h4>
</div>
<div class=”container”>
    <div class=”info-div”>
        <div id=”instructions”>
            <h4>Get 6 wrong and you lose.</h4>
            <h4 id=”wrongText”>Wrong: 0</h4>
        </div>
        <div class=”hangmanman-illustation-container”>
            <div class=”gallows”><img
                    src=”” /></div>
            <div class=”body-container”>
                <div class=”body-part right-leg”><img height=”200″
                        src=”{image-url}” />
                </div>
                <div class=”body-part left-leg”><img height=”200″
                        src=”{image-url}” />
                </div>
                <div class=”body-part right-arm”><img height=”200″
                        src=”{image-url}” />
                </div>
                <div class=”body-part left-arm”><img height=”200″
                        src=”{image-url}” />
                </div>
                <div class=”body-part torso”><img height=”150″
                        src=”{image-url}” /></div>
                <div class=”body-part head”><img height=”75″
                        src=”{image-url}” /></div>
            </div>
        </div>
    </div>
    <div>
        <div id=”main”>
            <div class=”start-button-container”>
                <button class=”start-button”>New Game</button>
            </div>

            <h2 id=”result”></h2>
            <h4 id=”answer”></h4>
            <h4 class=”tip”></h4>

            <div id=”guessSet”>
                <h4 class=”guess”>Guess a letter:</h4>
                <input class=”letterInput” type=”text” maxlength=”1″ size=”1″ />
                <button id=”guess-submit-button”>Submit</button>
            </div>
            <span class=”error guess-error”></span>
        </div>
        <div id=”phrase-div”>
            <h4 id=”phraseDisplay”></h4>
        </div>
    </div>
    <div>
    </div>
</div>

JavaScript

<script>
    let startButtonContainer = document.querySelector(“.start-button-container”);
    let startButton = document.querySelector(“.start-button”);
    let phraseSet = document.querySelector(“#phraseSet”);
    let phraseInput = document.querySelector(“.phraseInput”);
    let clueInput = document.querySelector(“.clueInput”);
    let clueSet = document.querySelector(“#clueSet”);
    let phraseLetters = new Array();
    let phraseLine = new Array();
    let phraseDisplay = document.querySelector(“#phraseDisplay”);
    let letterInput = document.querySelector(“.letterInput”);
    let guessSubmitButton = document.querySelector(“#guess-submit-button”);
    let tip = document.querySelector(“.tip”)
    let gameContinue = false;
    let result = document.querySelector(“#result”);
    let answer = document.querySelector(“#answer”);
    let lettersGuessedSet = new Array();
    let lettersGuessed = document.querySelector(“#lettersGuessed”);
    let wrong = 0;
    let wrongText = document.querySelector(“#wrongText”);
    let gameModalContainer = document.querySelector(“.game-modal-container”);
    let gameModalForm = document.querySelector(“.game-modal-form”);
    let closeModal = document.querySelector(“.close-modal”)
    let gameSubmitButton = document.querySelector(“.game-submit-button”)
    let phraseError = document.querySelector(“.phrase-error”);
    let clueError = document.querySelector(“.clue-error”);
    let guessError = document.querySelector(“.guess-error”);
    let head = document.querySelector(“.head”);
    let torso = document.querySelector(“.torso”);
    let rightArm = document.querySelector(“.right-arm”);
    let leftArm = document.querySelector(“.left-arm”);
    let rightLeg = document.querySelector(“.right-leg”);
    let leftLeg = document.querySelector(“.left-leg”);

    closeModal.addEventListener(“click”, function () {
        gameModalContainer.style.visibility = “hidden”;
    })

    startButton.addEventListener(“click”, function () {
        gameModalContainer.style.visibility = “visible”;

    })

    const inputs = Array.prototype.slice.call(document.querySelectorAll(‘.game-modal-form input’));

    function focusNext() {
        const currInput = document.activeElement;
        const currInputIndex = inputs.indexOf(currInput);
        const nextinputIndex = (currInputIndex + 1) % inputs.length;
        const input = inputs[nextinputIndex];
        input.focus();
    }

    gameModalForm.addEventListener(“keypress”, function (event) {
        if (phraseInput.value === “” || clueInput.value === “”) {
            if (event.keyCode == 13) {
                focusNext();
            };
        }
    })

    gameSubmitButton.addEventListener(“click”, function () {
        if (phraseInput.value === “”) {
            phraseError.textContent = “Please provide a phrase for the Hangman Game.”
        } else if (clueInput.value === “”) {
            clueError.textContent = “Please provide a clue for the Hangman Game.”
        } else {
            result.textContent = “”;
            answer.textContent = “”;
            phraseLetters = [];
            phraseLine = [];
            phraseInput = document.querySelector(“.phraseInput”).value.replace(/\s+/g, ‘ ‘).trim();
            clueInput = document.querySelector(“.clueInput”).value;
            lettersGuessedSet = [];
            wrong = 0;
            wrongText.textContent = “Wrong: ” + wrong;
            startButtonContainer.style.gridTemplateColumns = “auto auto”
            startButtonContainer.style.gap = “20px”;
            guessSet.style.visibility = “visible”;
            guessSet.style.height = “auto”;
            gameModalContainer.style.visibility = “hidden”;

            tip.textContent = “Clue: ” + clueInput;

            for (let i = 0; i < phraseInput.length; i++) {
                phraseLetters.push(phraseInput.charAt(i));
                if (phraseLetters[i] == ” “) {
                    phraseLine.push(” – “);
                } else {
                    phraseLine.push(” _ “);
                }
                phraseDisplay.textContent = phraseLine.join(“”);
            }
        }
    });

    letterInput.addEventListener(“keypress”, function (event) {
        if (event.keyCode == 13 && letterInput.value) {
            guessLetter();
        } else if (event.keyCode == 13 && !letterInput.value) {
            guessError.textContent = “Please provide a guess.”
        }
    });

    guessSubmitButton.addEventListener(“click”, function (event) {
        if (letterInput.value) {
            guessLetter();
        } else {
            guessError.textContent = “Please provide a guess.”
        }
    });

    function guessLetter() {
        if (
            !phraseLetters.includes(letterInput.value.toLowerCase()) &&
            !phraseLetters.includes(letterInput.value.toUpperCase()) &&
            !lettersGuessedSet.includes(letterInput.value.toLowerCase()) &&
            !lettersGuessedSet.includes(letterInput.value.toUpperCase())
        ) {
            wrong++;
            wrongText.textContent = “Wrong: ” + wrong;
            if (wrong == 1) {
                head.style.visibility = “visible”
            } else if (wrong == 2) {
                torso.style.visibility = “visible”
            } else if (wrong == 3) {
                rightArm.style.visibility = “visible”
            }
            else if (wrong == 4) {
                leftArm.style.visibility = “visible”
            }
            else if (wrong == 5) {
                rightLeg.style.visibility = “visible”
            }
            else if (wrong == 6) {
                leftLeg.style.visibility = “visible”
            }
            guessError.textContent = letterInput.value.toUpperCase() + ” is not in the phrase.”;
        }

        if (
            !lettersGuessedSet.includes(letterInput.value.toUpperCase()) &&
            !lettersGuessedSet.includes(letterInput.value.toLowerCase())
        ) {
            lettersGuessedSet.push(letterInput.value);
            if (
                !phraseLetters.includes(letterInput.value.toLowerCase()) &&
                !phraseLetters.includes(letterInput.value.toUpperCase())
            ) {
                guessError.textContent = letterInput.value.toUpperCase() + ” is not in the phrase.”;
            } else {
                guessError.textContent = “”;
            }
        } else {
            guessError.textContent = letterInput.value.toUpperCase() + ” has already been guessed.”
        }
        lettersGuessed.textContent = “Guessed: ” + lettersGuessedSet.join(” “);
        for (let i = 0; i < phraseLine.length; i++) {
            if (letterInput.value.toLowerCase() == phraseLetters[i].toLowerCase()) {
                phraseLine[i] = phraseLetters[i];
            }
        }

        phraseDisplay.textContent = phraseLine.join(“”);

        letterInput.value = “”;

        if (wrong == 6) {
            gameContinue = false;
            result.textContent = “Game Over. You Lose!!!”;
            answer.textContent = “Answer: ” + phraseLetters.join(“”);
            phraseLetters = [];
            phraseLine = [];
            lettersGuessedSet = [];
            wrong = 0;
            wrongText.textContent = “Wrong: ” + wrong;
            phraseInput.value = “”;
            clueInput.value = “”;
            startButtonContainer.style.gridTemplateColumns = “auto”;
            guessSet.style.visibility = “hidden”;
            guessSet.style.height = 0;
            gameModalContainer.style.visibility = “hidden”;
        }

        for (let j = 0; j < phraseLine.length; j++) {
            if (phraseLine.includes(” _ “)) {
                gameContinue = true;
            } else {
                gameContinue = false;
                result.textContent = “You Won!!!”;
                phraseLetters = [];
                phraseLine = [];
                lettersGuessedSet = [];
                wrong = 0;
                wrongText.textContent = “Wrong: ” + wrong;
                phraseInput.value = “”;
                clueInput.value = “”;
                startButtonContainer.style.gridTemplateColumns = “auto”;
                guessSet.style.visibility = “hidden”;
                guessSet.style.height = 0;
                gameModalContainer.style.visibility = “hidden”;
            }
        }
    }

</script>
artisticoder
artisticoder
Articles: 4

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *