Heim >Web-Frontend >CSS-Tutorial >Erstellen eines dynamischen Hangman-Spiels mit JavaScript: Ein technischer Überblick
Erstellen eines dynamischen Hangman-Spiels mit JavaScript: Ein technischer Überblick
- 王林Original
- 2024-08-10 06:32:38722Durchsuche
Einführung
MTnD Hangman-Spiel, ein klassisches Wort-Ratespiel, 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 auf Vercel bereitgestellt, 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 verringert 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 fertig 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 Versuch, das Wort zu bekommen, erhalten Sie auch einen Sound für den Erfolg
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 verschiedener Spielzustände zugänglich sind.
<!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: 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;
}
}
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();
}
};
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 das Spiel nach 5 fehlgeschlagenen Rateversuchen nicht bestanden haben, müssen Sie von vorne beginnen. 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.
Ein Score-Keeper-Bereich: Er speichert grundsätzlich die Anzahl der Erfolge und Misserfolge und gibt die Gesamtpunktzahl über 10 zurück. Wenn Sie beispielsweise 6 falsche Versuche machen, erhalten Sie 4/10.
Timer ⌛: Ich führe einen Timer ein. Beispielsweise erhalten Sie für jede Vermutung 15 Sekunden. Wenn Sie nach 5 Sekunden kein Wort eingeben, erhalten Sie automatisch einen fehlgeschlagenen Versuch. Um den Schwierigkeitsgrad des Spiels zu verbessern.
Zukünftige Umsetzung
Das MTnD Hangman-Spiel kann in verschiedenen Nischen verwendet werden. Mir bleibt nur noch, die Objekte an Ihre Nische anzupassen. Das Einzige, was ich brauche, sind Schlüsselwörter, die zu Ihrer spezifischen Nische passen. Der MTnD-Henker könnte im Folgenden angewendet werden;
- Pädagogisches Galgenmännchen: Passen Sie das Spiel an bestimmte Themen wie Mathematik, Naturwissenschaften oder Geschichte an, wobei die Spieler Begriffe zu diesen Themen erraten.
- Thematischer Henker: Erstellen Sie Themen wie Filme, Bücher oder berühmte Persönlichkeiten für jede Spielsitzung.
- Mehrsprachiger Henker: Bieten Sie Versionen in verschiedenen Sprachen an, um beim Sprachenlernen zu helfen.
- Benutzerdefinierte Wortlisten: Ermöglichen Sie Benutzern das Hochladen oder Erstellen eigener Wortlisten für ein personalisiertes Erlebnis.
- Schwierigkeitsgrade: Fügen Sie Optionen für einfache, mittlere und schwere Schwierigkeitsgrade hinzu, basierend auf Wortlänge oder Komplexität.
- Story-Modus: Integrieren Sie eine Storyline oder ein Fortschrittssystem, in dem Spieler neue Level oder Herausforderungen freischalten, wenn sie erfolgreich sind.
Jede Nische könnte dem MTnD Hangman-Spiel eine einzigartige Wendung verleihen und unterschiedliche Zielgruppen anziehen.
Ich wäre offen für Vorschläge zu diesem Projekt.
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!
Python JavaScript css html Array Object if for include Session Validating math Length Interface finally number this history display input git Access word
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Grundlegendes zur CSS-Hintergrundfarbe für verschachtelte ElementeNächster Artikel：Grundlegendes zur CSS-Hintergrundfarbe für verschachtelte Elemente