首頁 >web前端 >css教學 >使用 JavaScript 建立動態絞刑吏遊戲：技術概述

使用 JavaScript 建立動態絞刑吏遊戲：技術概述

王林原創: 2024-08-10 06:32:38720瀏覽

Creating a Dynamic Hangman Game with JavaScript: A Technical Overview

簡介
MTnD Hangman 遊戲，一款經典的猜詞遊戲，是練習和展示各種 Web 開發技能的優秀項目。在這個專案中，我開發了一款具有增強功能的 Hangman 遊戲，包括追蹤嘗試次數、提供線索、顯示嘗試計數、嘗試失敗後更新圖像以及顯示正確猜測的祝賀訊息。遊戲部署在Vercel上，可以輕鬆共享和存取。
可以在此處評估此遊戲演示
特點

嘗試次數：遊戲會追蹤玩家猜測錯誤的次數。每個錯誤的猜測都會減少剩餘試驗的次數，從而增加挑戰。
線索：玩家可以獲得線索來幫助他們猜單字。此功能增加了一層策略和幫助，使遊戲更具吸引力，並透過在需要時提供提示來增強使用者體驗。整合了視覺回饋，包括更改圖像和祝賀訊息，使遊戲更具吸引力和視覺吸引力。
顯示試煉次數：突顯剩餘試煉次數，讓玩家隨時了解並增加懸念。
嘗試失敗後更改圖像：對於每次錯誤的猜測，遊戲都會更新一個圖像，通常描繪劊子手繪圖的進展。這種視覺回饋透過直觀地呈現錯誤猜測的後果來增強玩家體驗。 5.猜對的祝賀訊息：當玩家成功猜出單字時，會顯示一條祝賀訊息，為遊戲提供積極的強化和令人滿意的結局。
遊戲邏輯：核心遊戲邏輯是在 JavaScript 函數中實現的，處理諸如驗證猜測、更新狀態和確定輸贏條件等任務。
部署：遊戲完成並經過徹底測試後，就將其部署在 Vercel 上。部署過程涉及將程式碼推送到 Git 儲存庫並將其連接到 Vercel，後者無縫處理其餘的部署。 8.添加了聲音來指示錯誤的猜測，這使得遊戲更加有趣，嘗試5次失敗後它也會以聲音返回。成功嘗試取得單字後，您也會聽到成功的聲音

使用的技術

HTML：遊戲的結構。
CSS：設定遊戲介面的樣式。
用於網路互動和條件的 JavaScript。 4.Vercel：遊戲部署在Vercel上，Vercel是一個受歡迎的前端專案部署平台。 Vercel提供無縫的部署流程，並確保可以從任何地方存取遊戲。

HTML：遊戲結構
HTML 結構很簡單，有一些 div 和元素來顯示遊戲的元件，例如空白圖像標籤、標題標籤和音訊標籤，可用於切換不同的遊戲狀態。

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <title>Hangman</title>
                <link rel="stylesheet" href="style.css" />
        </head>
        <body>
                <div id="game-container">
                        <div class="togglemode"></div>
                        <h3 id="tries"></h3>
                        <h1>MTnD Hangman</h1>
                        <h5 id="clue"></h5>
                        <audio src="" id="hangman-aud" volume="9"></audio>
                        <div id="word-container"></div>
                        <div id="letters-container"></div>
                        <img alt="Hangman Image" id="hangman-img" />
                        <p id="message"></p>
                        <button id="restart-btn">Restart Game</button>
                </div>
                <script src="script.js"></script>
        </body>
</html>

CSS：遊戲樣式
CSS 樣式增強了遊戲的視覺吸引力和反應：

* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}
body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        text-align: center;
        justify-content: center;
        display: flex;
        color: #333;
        background: linear-gradient(to bottom, #a8edea, #fed6e3);
        align-items: center;
        margin: 0;
        height: 100vh;
        /* background-color: #f9f9f9; */
}

#game-container {
        display: flex;
        flex-direction: column;
        width: 80%;
        margin: 50px auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* justify-content: center; */
        align-items: center;
        background: rgba(255, 255, 255, 0.8);
        text-align: center;
}
h1 {
        font-family: "Pacifico", cursive;
        color: #ff6f61;
}
#word-container {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
}

.logo {
        height: 80px;
        width: 83px;
}
.letter-btn {
        margin: 10px;
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        color: #fff;
        background: #ff6f61;
        cursor: pointer;
        transition: background 0.3s ease;
}
.letter-btn:hover {
        background-color: #ff402e;
}
.letter-btn.disabled {
        background-color: #ccc;
        cursor: not-allowed;
}

#message {
        font-size: 18px;
        font-weight: bold;
        color: #666;
        margin-bottom: 20px;
}

#restart-btn {
        font-weight: bold;
        padding: 10px 20px;
        border: none;
        border-radius: 10px;
        background-color: #ff6f61;
        color: #fff;
        cursor: pointer;
        margin-bottom: 20px;
}
#restart-btn:hover {
        background-color: #ff402e;
}
#hangman-img {
        width: 180px;
        height: 180px;
        margin: 0 20px;
        transition: transform 0.3s ease-in-out;
}
.hangman-image:hover {
        transform: scale(1.05);
}


#clue {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
        color: darkblue;

}

#tries {
        position: relative;
        left: 30%;
        margin: 10px;

        /* margin-left: 900px; */
        padding: 10px 20px;
        border: none;
        border-radius: 10px;
        background-color: #4fd8d8;
        color: #fff;
        cursor: pointer;
}
/* Media Queries */

/* Small screens (max-width: 768px) */
@media (max-width: 768px) {
        #game-container {
                display: flex;
                flex-direction: column;
                width: 90%;
                margin: 20px auto;
                height: 100vh;
                padding: 10px;
                align-items: center;
        }
        #word-container {
                font-size: 18px;
        }
        .letter-btn {
                margin: 5px;
                padding: 5px 10px;
        }
        #letters-container {
                width: 350px;
        }
        #message {
                font-size: 14px;
                font-weight: bold;
        }
        #restart-btn {
                height: 30px;
                padding: 5px 10px;
        }
        #hangman-img {
                width: 120px;
                height: 120px;
        }
        #clue {
                font-size: 14px;
        }

        #tries {
                /* margin: 5px; */
                left: 30%;
                padding: 13px 5px 10px 5px;
        }
}

/* Extra small screens (max-width: 480px) */
@media (max-width: 480px) {
        #game-container {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100vh;
                margin: 10px auto;
                padding: 5px;
                align-items: center;
                background:#ebfcfc;

        }

        #letters-container {
                /* width: 280px; */
                flex-wrap: wrap;
                margin-bottom: 30px;
        }
        #word-container {
                font-size: 20px;

        }
        .letter-btn {
                height: 30px;
                width: 30px;
                border-radius: 100%;
                margin: 2px;
                padding: 2px 5px;
        }
        #message {
                font-weight: bold;
                font-size: 30px;
                margin: 10px 0 10px 0;
        }
        #restart-btn {
                margin-top: 30px;
                height: 40px;
                font-size: 20px;
                padding: 2px 5px;
        }
        #hangman-img {
                width: 170px;
                height: 170px;
                margin: 30px 0 0px 0;
        }
        #clue {
                margin-top: 40px;
                font-size: 21px;
        }

        #tries {
                left: 9%;
                width: 150px;
                flex-wrap: wrap;
                margin: 20px 0 40px 0;

                padding: 15px;
                margin-left: 170px;
        }
}

@media (max-width: 320px) {
        #game-container {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100vh;
                margin: 10px auto;
                padding: 5px;
                align-items: center;
                background:#ebfcfc;


        }

        #letters-container {
                width: 270px;
                flex-wrap: wrap;
                margin-bottom: 20px;
        }
        #word-container {
                font-size: 20px;
        }
        .letter-btn {
                margin: 2px;
                padding: 2px 5px;
        }
        #message {
                font-weight: bold;
                font-size: 15px;
        }
        #restart-btn {
                font-size: medium;
                padding: 2px 5px;
        }
        #hangman-img {
                width: 120px;
                height: 120px;
                margin: 15px 0 0px 0;
        }
        #clue {
                margin-top: 10px;
                font-size: 18px;
        }

        #tries {
                left: 20%;
                margin: 2px;
                padding: 15px 0 0 0;

        }
}* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}
body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        text-align: center;
        justify-content: center;
        display: flex;
        color: #333;
        background: linear-gradient(to bottom, #a8edea, #fed6e3);
        align-items: center;
        margin: 0;
        height: 100vh;
        /* background-color: #f9f9f9; */
}

#game-container {
        display: flex;
        flex-direction: column;
        width: 80%;
        margin: 50px auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* justify-content: center; */
        align-items: center;
        background: rgba(255, 255, 255, 0.8);
        text-align: center;
}
h1 {
        font-family: "Pacifico", cursive;
        color: #ff6f61;
}
#word-container {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
}

.logo {
        height: 80px;
        width: 83px;
}
.letter-btn {
        margin: 10px;
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        color: #fff;
        background: #ff6f61;
        cursor: pointer;
        transition: background 0.3s ease;
}
.letter-btn:hover {
        background-color: #ff402e;
}
.letter-btn.disabled {
        background-color: #ccc;
        cursor: not-allowed;
}

#message {
        font-size: 18px;
        font-weight: bold;
        color: #666;
        margin-bottom: 20px;
}

#restart-btn {
        font-weight: bold;
        padding: 10px 20px;
        border: none;
        border-radius: 10px;
        background-color: #ff6f61;
        color: #fff;
        cursor: pointer;
        margin-bottom: 20px;
}
#restart-btn:hover {
        background-color: #ff402e;
}
#hangman-img {
        width: 180px;
        height: 180px;
        margin: 0 20px;
        transition: transform 0.3s ease-in-out;
}
.hangman-image:hover {
        transform: scale(1.05);
}


#clue {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
        color: darkblue;

}

#tries {
        position: relative;
        left: 30%;
        margin: 10px;

        /* margin-left: 900px; */
        padding: 10px 20px;
        border: none;
        border-radius: 10px;
        background-color: #4fd8d8;
        color: #fff;
        cursor: pointer;
}
/* Media Queries */

/* Small screens (max-width: 768px) */
@media (max-width: 768px) {
        #game-container {
                display: flex;
                flex-direction: column;
                width: 90%;
                margin: 20px auto;
                height: 100vh;
                padding: 10px;
                align-items: center;
        }
        #word-container {
                font-size: 18px;
        }
        .letter-btn {
                margin: 5px;
                padding: 5px 10px;
        }
        #letters-container {
                width: 350px;
        }
        #message {
                font-size: 14px;
                font-weight: bold;
        }
        #restart-btn {
                height: 30px;
                padding: 5px 10px;
        }
        #hangman-img {
                width: 120px;
                height: 120px;
        }
        #clue {
                font-size: 14px;
        }

        #tries {
                /* margin: 5px; */
                left: 30%;
                padding: 13px 5px 10px 5px;
        }
}

/* Extra small screens (max-width: 480px) */
@media (max-width: 480px) {
        #game-container {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100vh;
                margin: 10px auto;
                padding: 5px;
                align-items: center;
                background:#ebfcfc;

        }

        #letters-container {
                /* width: 280px; */
                flex-wrap: wrap;
                margin-bottom: 30px;
        }
        #word-container {
                font-size: 20px;

        }
        .letter-btn {
                height: 30px;
                width: 30px;
                border-radius: 100%;
                margin: 2px;
                padding: 2px 5px;
        }
        #message {
                font-weight: bold;
                font-size: 30px;
                margin: 10px 0 10px 0;
        }
        #restart-btn {
                margin-top: 30px;
                height: 40px;
                font-size: 20px;
                padding: 2px 5px;
        }
        #hangman-img {
                width: 170px;
                height: 170px;
                margin: 30px 0 0px 0;
        }
        #clue {
                margin-top: 40px;
                font-size: 21px;
        }

        #tries {
                left: 9%;
                width: 150px;
                flex-wrap: wrap;
                margin: 20px 0 40px 0;

                padding: 15px;
                margin-left: 170px;
        }
}

@media (max-width: 320px) {
        #game-container {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100vh;
                margin: 10px auto;
                padding: 5px;
                align-items: center;
                background:#ebfcfc;


        }

        #letters-container {
                width: 270px;
                flex-wrap: wrap;
                margin-bottom: 20px;
        }
        #word-container {
                font-size: 20px;
        }
        .letter-btn {
                margin: 2px;
                padding: 2px 5px;
        }
        #message {
                font-weight: bold;
                font-size: 15px;
        }
        #restart-btn {
                font-size: medium;
                padding: 2px 5px;
        }
        #hangman-img {
                width: 120px;
                height: 120px;
                margin: 15px 0 0px 0;
        }
        #clue {
                margin-top: 10px;
                font-size: 18px;
        }

        #tries {
                left: 20%;
                margin: 2px;
                padding: 15px 0 0 0;

        }
}

JavaScript
主要用於遊戲的條件和互動性。

const languages = ["javascript", "python", "java", "ruby"];
const frameworks = ["react", "angular", "vue", "django", "flask"];
const tools = ["git", "webpack", "babel", "eslint", "prettier"];
const concept = ["closure", "callback", "promises", "async", "hosting"];
const databases = ["mongodb", "sqlite", "mysql"];

const allObjects = {languages, frameworks, tools, concept, databases};

let chosenWord = "";
let guessedLetters = [];
let wrongGuesses;

const wordContainer = document.getElementById("word-container");
const lettersContainer = document.getElementById("letters-container");
const message = document.getElementById("message");
const restartBtn = document.getElementById("restart-btn");
const hangmanImg = document.getElementById("hangman-img");
const hangmanAud = document.getElementById("hangman-aud");
const trials = document.getElementById("tries");
const clue = document.getElementById("clue");
function init() {
        const randomArray =
                Object.values(allObjects)[
                        Math.floor(Math.random() * Object.keys(allObjects).length)
                ];

        const randomValue =
                randomArray[Math.floor(Math.random() * randomArray.length)];
        console.log(randomValue);
        const getClue = () => {
                for (const [key, value] of Object.entries(allObjects)) {
                        if (value.includes(randomValue)) {
                                return key;
                        }
                }
        };
        clue.textContent = `Clue: "${getClue().toUpperCase()}" in Programming`;
        chosenWord = randomValue;
        // words[Math.floor(Math.random() * words.length)];
        guessedLetters = [];
        remainingGuesses = 5;
        message.textContent = "";
        wordContainer.innerHTML = "_ ".repeat(chosenWord.length).trim();
        lettersContainer.innerHTML = "";
        hangmanImg.src = "hangmanSteady.png";
        trials.innerText = "YOU HAVE 5 TRIALS!";
        wrongGuesses = 0;
        for (let i = 65; i <= 90; i++) {
                const letterBtn = document.createElement("button");
                letterBtn.classList.add("letter-btn");
                letterBtn.textContent = String.fromCharCode(i);
                letterBtn.addEventListener("click", handleGuess);
                lettersContainer.appendChild(letterBtn);
        }
}
//after  click this disables all buttons 
function disableAllButtons() {
        const buttons = document.querySelectorAll(".letter-btn");
        buttons.forEach((button) => {
                button.classList.add("disabled");
                button.disabled = true;
        });
}

restartBtn.addEventListener("click", init);

init();
//this handles guesses 

function handleGuess(event) {
        const letter = event.target.innerText.toLowerCase();
        event.target.classList.add("disabled");
        event.target.disabled = true;

        if (chosenWord.includes(letter)) {
                guessedLetters.push(letter);
                const displayWord = chosenWord
                        .split("")
                        .map((letter) => (guessedLetters.includes(letter) ? letter : "_"))
                        .join(" ");
                wordContainer.textContent = displayWord;
        } else {
                wrongGuesses++;
                if (wrongGuesses === 1) {
                        trials.innerText = "4 trials left";
                        hangmanImg.src = "hangman1.png";
                        hangmanAud.src = "failed.mp3";
                        hangmanAud.play();
                } else if (wrongGuesses === 2) {
                        hangmanImg.src = "hangman2.png";
                        trials.innerText = "3 trials left";
                        hangmanAud.src = "failed.mp3";
                        hangmanAud.play();
                } else if (wrongGuesses === 3) {
                        hangmanImg.src = "hangman3.png";
                        trials.innerText = "2 trials left";
                        hangmanAud.src = "failed.mp3";
                        hangmanAud.play();
                } else if (wrongGuesses === 4) {
                        hangmanImg.src = "hangman4.png";
                        trials.innerText = "1 trials left";
                        hangmanAud.src = "failed.mp3";
                        hangmanAud.play();
                }
        }

        handleGameOver();
}

const handleGameOver = () => {
        if (wrongGuesses === 5) {
                message.textContent = `Game Over! ❌ The word was  "${chosenWord}".`;
                disableAllButtons();
                hangmanImg.src = "hangmanFailed.png";
                trials.innerText = "0 TRIAL!";
                hangmanAud.src = "gameover.mp3";
                hangmanAud.play();
                document.querySelector("#message").style.color = "red";
        }
        if (chosenWord.split("").every((letter) => guessedLetters.includes(letter))) {
                message.textContent = "Congratulations! You guessed the word!";
                hangmanImg.src = "hangmanSuccess.png";
                trials.innerText = "Congrats!";
                hangmanAud.src = "success.mp3";
                hangmanAud.play();
                document.querySelector("#message").style.color = "green";

                disableAllButtons();
        }
};

代碼說明；
我創建了一個數組物件。數組名稱充當單字的線索。該遊戲是這樣的，它隨機循環到物件中，然後獲取單個數組，例如，如果它循環並最終獲取語言數組。然後它隨機循環語言數組並隱藏猜測。因此，玩家只能猜測要猜測的內容。那麼如果猜到的單字是「python」。玩家可以嘗試猜測這個單字。如果 5 次嘗試失敗後，您的遊戲就失敗了，並且必須重新開始。但如果您在沒有 5 次失敗嘗試的情況下得到了這個詞，您會收到一條祝賀訊息。
圖像和音訊的添加使遊戲變得有趣，使其更具互動性。

結論
開發這個 Hangman 遊戲是一次有益的經歷，它讓我能夠應用和增強我的 JavaScript 技能。遊戲的功能，包括試驗追蹤、線索、動態圖像和回饋訊息，為玩家創造了引人入勝的互動體驗。在 Vercel 上部署遊戲可確保其可存取和可共享，以展示現代 Web 開發工具和實踐的功能。

未來的進步。
我期待著將來在遊戲中添加新的功能來實現。

記分器部分：它主要儲存成功和失敗的數量，並傳回超過 10 的總分。例如，如果您嘗試 6 次錯誤，則得到 4/10。
計時器⌛：我實現了一個計時器，例如，每次猜測您有 15 秒的時間，如果 5 秒後您未能輸入單詞，您將自動獲得失敗的嘗試。提高遊戲難度。

未來實施
MTnD Hangman 遊戲可以用於不同的利基市場，只需要我根據您的利基市場自訂對象，我唯一需要的是與您的特定利基市場相符的關鍵字。 MTnD Hangman 可以應用於以下領域；

教育劊子手：針對數學、科學或歷史等特定主題自訂遊戲，玩家可以猜測與這些主題相關的術語。
主題劊子手：為每個遊戲會話創建電影、書籍或名人等主題。
多語言劊子手：提供不同語言版本，幫助語言學習。
自訂單字列表：允許使用者上傳或建立自己的單字列表，以獲得個人化體驗。
難度等級：根據單字長度或複雜性提供簡單、中等和困難難度等級的選項。
故事模式：融入故事情節或進度系統，玩家在成功時可以解鎖新的關卡或挑戰。

每個細分市場都可以為 MTnD Hangman 遊戲提供獨特的轉折並吸引不同的受眾。
我願意接受有關此項目的建議。

以上是使用 JavaScript 建立動態絞刑吏遊戲：技術概述的詳細內容。更多資訊請關注PHP中文網其他相關文章！

Python JavaScript css html Array Object if for include Session Validating math Length Interface finally number this history display input git Access word

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：了解嵌套元素的 CSS 背景顏色下一篇：了解嵌套元素的 CSS 背景顏色

看更多