Erstellen eines dynamischen Hangman-Spiels mit JavaScript: Ein technischer Überblick-CSS-Tutorial-php.cn

Creating a Dynamic Hangman Game with JavaScript: A Technical Overview

Einführung
MTnD Hangman-Spiel, ein klassisches Wortratespiel, dient als hervorragendes Projekt zum Üben und Präsentieren verschiedener Webentwicklungsfähigkeiten. In diesem Projekt habe ich ein Hangman-Spiel mit erweiterten Funktionen entwickelt, darunter die Verfolgung der Anzahl der Versuche, die Bereitstellung von Hinweisen, die Anzeige der Anzahl der Versuche, die Aktualisierung von Bildern nach fehlgeschlagenen Versuchen und die Anzeige einer Glückwunschnachricht für richtige Vermutungen. Das Spiel wurde aufVercelbereitgestellt, was ein einfaches Teilen und Zugriff ermöglicht.
Diese Spieldemo kann hier beurteilt werden
Funktionen

Anzahl der Versuche: Das Spiel verfolgt die Anzahl der falschen Vermutungen, die ein Spieler gemacht hat. Jede falsche Schätzung reduziert die Anzahl der verbleibenden Versuche und erhöht die Herausforderung.
Hinweise: Spieler können Hinweise erhalten, die ihnen helfen, das Wort zu erraten. Diese Funktion fügt eine Strategie- und Unterstützungsebene hinzu, macht das Spiel ansprechender und verbessert das Benutzererlebnis, indem bei Bedarf Hinweise gegeben werden. Visuelles Feedback, einschließlich wechselnder Bilder und Glückwunschbotschaften, wurde integriert, um das Spiel ansprechender und optisch ansprechender zu gestalten.
Anzeige der Anzahl der Versuche: Die Anzahl der verbleibenden Versuche wird gut sichtbar angezeigt, um den Spieler auf dem Laufenden zu halten und die Spannung zu erhöhen.
Ändern von Bildern nach fehlgeschlagenen Versuchen: Für jede falsche Schätzung aktualisiert das Spiel ein Bild, das normalerweise den Fortschritt der Henkerzeichnung darstellt. Dieses visuelle Feedback verbessert das Spielerlebnis, indem es die Konsequenzen falscher Schätzungen visuell darstellt. 5. Glückwunschnachricht für richtiges Raten: Wenn der Spieler das Wort erfolgreich erraten hat, wird eine Glückwunschnachricht angezeigt, die für positive Verstärkung und einen zufriedenstellenden Abschluss des Spiels sorgt.
Spiellogik: Die Kernspiellogik wurde in JavaScript-Funktionen implementiert und übernimmt Aufgaben wie die Validierung von Vermutungen, die Aktualisierung des Status und die Bestimmung von Gewinn-/Verlustbedingungen.
Bereitstellung: Nachdem das Spiel fertiggestellt und gründlich getestet war, wurde es auf Vercel bereitgestellt. Der Bereitstellungsprozess umfasste das Übertragen des Codes in ein Git-Repository und die Verbindung mit Vercel, das den Rest der Bereitstellung nahtlos abwickelte. 8.Audios wurden hinzugefügt, um auf falsche Vermutungen hinzuweisen, was das Spiel interessanter macht. Nach 5 fehlgeschlagenen Versuchen kehrt es auch mit Ton zurück. Nach einem erfolgreichen Wortmeldungsversuch erhalten Sie auch einen Erfolgssound

Verwendete Technologien

HTML: Struktur des Spiels.
CSS: Gestaltung der Spieloberfläche.
JavaScript wird für Webinteraktivität und Bedingungen verwendet. 4.Vercel: Das Spiel wird auf Vercel bereitgestellt, einer beliebten Plattform für die Bereitstellung von Front-End-Projekten. Vercel bietet einen nahtlosen Bereitstellungsprozess und stellt sicher, dass das Spiel von überall aus zugänglich ist.

HTML: Struktur des Spiels
Die HTML-Struktur ist unkompliziert, mit ein paar Divs und Elementen zur Anzeige der Spielkomponenten wie leeren Bild-Tags, Überschriften-Tags und Audio-Tags, die zum Umschalten zwischen verschiedenen Spielzuständen zugänglich sind.

     Hangman  
   
 
 MTnD Hangman

Nach dem Login kopieren

CSS: Das Spiel gestalten
Die CSS-Stile verbessern die visuelle Attraktivität und Reaktionsfähigkeit des Spiels:

* { 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; } }

Nach dem Login kopieren

JavaScript
wurde hauptsächlich für die Bedingungen und die Interaktivität des Spiels verwendet.

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

Nach dem Login kopieren

Code-Erklärung;
Ich habe ein Array-Objekt erstellt. Die Array-Namen dienen als Hinweis auf das Wort. Das Spiel ist so aufgebaut, dass es die Objekte in einer zufälligen Schleife durchläuft und dann ein einzelnes Array erhält, beispielsweise wenn es danach eine Schleife durchläuft und schließlich das Sprachen-Array erhält. Anschließend durchläuft es zufällig das Spracharray und verbirgt die Vermutung. Der Spieler hat also nur eine Ahnung, was zu erraten ist. Wenn das erratene Wort also „Python“ ist. Der Spieler darf versuchen, das Wort zu erraten. Wenn Sie nach 5 fehlgeschlagenen Rateversuchen das Spiel nicht bestanden haben und von vorne beginnen müssen. Aber wenn Sie das Wort ohne 5 Fehlversuche erhalten, erhalten Sie eine Glückwunschnachricht.
Durch das Hinzufügen von Bildern und Audio wird das Spiel spannender und viel interaktiver.

Fazit
Die Entwicklung dieses Hangman-Spiels war eine lohnende Erfahrung, die es mir ermöglichte, meine JavaScript-Kenntnisse anzuwenden und zu verbessern. Die Funktionen des Spiels, darunter Versuchsverfolgung, Hinweise, dynamische Bilder und Feedback-Nachrichten, schaffen ein ansprechendes und interaktives Erlebnis für die Spieler. Durch die Bereitstellung des Spiels auf Vercel wird sichergestellt, dass es zugänglich und gemeinsam nutzbar ist und die Fähigkeiten moderner Webentwicklungstools und -praktiken demonstriert werden.

Zukünftiger Fortschritt.
Ich würde mich darauf freuen, dem Spiel in Zukunft neue Eigenschaften hinzuzufügen und umzusetzen.

Bahagian penjaga skor: ia pada asasnya menyimpan jumlah kejayaan dan kegagalan dan ia mengembalikan jumlah skor melebihi 10. Contohnya jika anda mendapat 6 percubaan yang salah, anda mendapat 4/10.
Pemasa ⌛: Saya melaksanakan pemasa, contohnya untuk setiap tekaan anda mendapat 15 saat jika selepas 5 saat anda gagal memasukkan perkataan, anda secara automatik dapat percubaan gagal. Untuk menambah baik kesukaran permainan.

Pelaksanaan masa hadapan
Permainan MTnD Hangman boleh digunakan dalam niche yang berbeza, hanya tinggal untuk saya menyesuaikan objek dengan niche anda, satu-satunya perkara yang saya perlukan ialah kata kunci yang selaras dengan niche khusus anda. Penggantung MTnD boleh digunakan dalam perkara berikut;

Golongan Pendidikan: Sesuaikan permainan untuk subjek tertentu seperti matematik, sains atau sejarah, tempat pemain meneka istilah yang berkaitan dengan topik ini.
Gold Bertema: Cipta tema seperti filem, buku atau personaliti terkenal untuk setiap sesi permainan.
Golongan Berbilang Bahasa: Tawarkan versi dalam bahasa berbeza untuk membantu pembelajaran bahasa.
Senarai Perkataan Tersuai: Benarkan pengguna memuat naik atau membuat senarai perkataan mereka sendiri untuk pengalaman yang diperibadikan.
Tahap Kesukaran: Sertakan pilihan untuk tahap kesukaran mudah, sederhana dan sukar berdasarkan panjang atau kerumitan perkataan.
Mod Cerita: Menggabungkan jalan cerita atau sistem kemajuan di mana pemain membuka tahap atau cabaran baharu apabila mereka berjaya.

Setiap niche boleh memberikan kelainan unik kepada permainan MTnD Hangman dan menarik penonton yang berbeza.
Saya akan terbuka menerima cadangan mengenai projek ini.

Das obige ist der detaillierte Inhalt vonErstellen eines dynamischen Hangman-Spiels mit JavaScript: Ein technischer Überblick. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!