Maison > Article > interface Web > Création d'un jeu dynamique du pendu avec JavaScript : un aperçu technique

Création d'un jeu dynamique du pendu avec JavaScript : un aperçu technique

王林original: 2024-08-10 06:32:38584parcourir

Creating a Dynamic Hangman Game with JavaScript: A Technical Overview

Introduction
MTnD Hangman game, un jeu classique de devinette de mots, constitue un excellent projet pour mettre en pratique et mettre en valeur diverses compétences en développement Web. Dans ce projet, j'ai développé un jeu du Pendu avec des fonctionnalités améliorées, notamment le suivi du nombre d'essais, la fourniture d'indices, l'affichage du nombre d'essais, la mise à jour des images après des tentatives infructueuses et l'affichage d'un message de félicitations pour les suppositions correctes. Le jeu a été déployé sur Vercel, permettant un partage et un accès faciles.
Cette démo de jeu peut être évaluée ici
Caractéristiques

Nombre d'essais : le jeu enregistre le nombre de suppositions incorrectes qu'un joueur a faites. Chaque supposition incorrecte réduit le nombre d'essais restants, ajoutant ainsi au défi.
Indices : les joueurs peuvent recevoir des indices pour les aider à deviner le mot. Cette fonctionnalité ajoute une couche de stratégie et d'assistance, rendant le jeu plus attrayant et améliorant l'expérience utilisateur en offrant des astuces en cas de besoin. Des commentaires visuels, notamment des images changeantes et des messages de félicitations, ont été intégrés pour rendre le jeu plus engageant et visuellement attrayant.
Affichage du nombre d'essais : le nombre d'essais restants est affiché bien en évidence, tenant le joueur informé et ajoutant au suspense.
Changer les images après des tentatives infructueuses : pour chaque supposition incorrecte, le jeu met à jour une image, illustrant généralement la progression du dessin du pendu. Ce retour visuel améliore l'expérience du joueur en représentant visuellement les conséquences de suppositions incorrectes. 5. Message de félicitations pour les suppositions correctes : lorsque le joueur réussit à deviner le mot, un message de félicitations s'affiche, fournissant un renforcement positif et une conclusion satisfaisante au jeu.
Logique du jeu : la logique de base du jeu a été implémentée dans les fonctions JavaScript, gérant des tâches telles que la validation des suppositions, la mise à jour de l'état et la détermination des conditions de victoire/perte.
Déploiement : Une fois le jeu terminé et minutieusement testé, il a été déployé sur Vercel. Le processus de déploiement impliquait de transférer le code vers un référentiel Git et de le connecter à Vercel, qui a géré le reste du déploiement de manière transparente. 8.Des audios ont été ajoutés pour indiquer les mauvaises suppositions, ce qui rend le jeu plus intrigant. Après 5 tentatives infructueuses, il revient également au son. Après une tentative réussie pour obtenir le mot, vous obtenez également un son pour réussir

Technologies utilisées

HTML : Structure du jeu.
CSS : styliser l'interface du jeu.
JavaScript utilisé pour l'interactivité Web et les conditions. 4.Vercel : Le jeu est déployé sur Vercel, une plateforme populaire pour le déploiement de projets front-end. Vercel fournit un processus de déploiement transparent et garantit que le jeu est accessible de n'importe où.

HTML : Structure du jeu
La structure HTML est simple, avec quelques divs et éléments pour afficher les composants du jeu tels que des balises d'image vides, des balises de titre et des balises audio accessibles pour basculer entre différents états du jeu.

<!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 : styliser le jeu
Les styles CSS améliorent l'attrait visuel et la réactivité du jeu :

* {
        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
a été utilisé principalement pour les conditions et l'interactivité du jeu.

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();
        }
};

Explication du code ;
J'ai créé un objet de tableaux. Les noms des tableaux servent d’indice au mot. Le jeu est tel qu'il boucle de manière aléatoire sur les objets, puis obtient un seul tableau, par exemple s'il boucle ensuite et obtient finalement le tableau des langues. Il boucle ensuite de manière aléatoire sur le tableau de langues et masque la supposition. Le joueur n’a donc qu’une idée de ce qu’il doit deviner . Donc, si le mot deviné est « python ». Le joueur doit tenter de deviner le mot. Si après 5 tentatives infructueuses de devinettes, vous échouez au jeu et devrez recommencer. Mais si vous obtenez le mot sans 5 tentatives infructueuses, vous recevez un message de félicitations.
L'ajout d'images et de sons rend le jeu intrigant et le beaucoup plus interactif.

Conclusion
Développer ce jeu du Pendu a été une expérience enrichissante qui m'a permis d'appliquer et d'améliorer mes compétences en JavaScript. Les fonctionnalités du jeu, notamment le suivi des essais, les indices, les images dynamiques et les messages de commentaires, créent une expérience engageante et interactive pour les joueurs. Le déploiement du jeu sur Vercel garantit qu'il est accessible et partageable, mettant en valeur les capacités des outils et pratiques de développement Web modernes.

Avancement futur.
J'aurais hâte d'ajouter de nouvelles caractéristiques au jeu à mettre en œuvre à l'avenir.

Une section de gardien de score : elle stocke essentiellement le nombre de réussites et d'échecs et renvoie le score total supérieur à 10. Par exemple, si vous obtenez 6 mauvaises tentatives, vous obtenez 4/10.
Minuterie ⌛ : j'implémente une minuterie, par exemple, pour chaque supposition, vous obtenez 15 secondes si après 5 secondes vous ne parvenez pas à saisir un mot, vous obtenez automatiquement une tentative échouée. Pour améliorer la difficulté du jeu.

Mise en œuvre future
Le jeu MTnD Hangman peut être utilisé dans différentes niches, il ne me reste plus qu'à adapter les objets à votre niche, les seules choses dont j'aurai besoin sont des mots-clés qui correspondent à votre niche spécifique. Le bourreau MTnD pourrait être appliqué dans ce qui suit ;

Pendu éducatif : adaptez le jeu à des sujets spécifiques comme les mathématiques, les sciences ou l'histoire, où les joueurs devinent des termes liés à ces sujets.
Pendu à thème : créez des thèmes tels que des films, des livres ou des personnalités célèbres pour chaque session de jeu.
Pendu multilingue : proposez des versions dans différentes langues pour faciliter l'apprentissage des langues.
Listes de mots personnalisées : permettez aux utilisateurs de télécharger ou de créer leurs propres listes de mots pour une expérience personnalisée.
Niveaux de difficulté : incluez des options pour les niveaux de difficulté facile, moyen et difficile en fonction de la longueur ou de la complexité des mots.
Mode Histoire : intégrez un scénario ou un système de progression dans lequel les joueurs débloquent de nouveaux niveaux ou défis à mesure qu'ils réussissent.

Chaque niche pourrait apporter une touche unique au jeu MTnD Hangman et attirer différents publics.
Je serais ouvert aux suggestions sur ce projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comprendre la coloration d'arrière-plan CSS pour les éléments imbriquésArticle suivant：Comprendre la coloration d'arrière-plan CSS pour les éléments imbriqués

Articles Liés

Voir plus