首頁  >  文章  >  web前端  >  使用 JavaScript 建立動態絞刑吏遊戲:技術概述

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

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

Creating a Dynamic Hangman Game with JavaScript: A Technical Overview

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

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

使用的技術

  1. HTML:遊戲的結構。
  2. CSS:設定遊戲介面的樣式。
  3. 用於網路互動和條件的 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 可以應用於以下領域;

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

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

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

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