Reines JavaScript zur Implementierung des Zahlenratespiels
|
Entwickeln Sie ein Zahlenratespiel, bei dem zufällig eine natürliche Zahl im Bereich von 100 ausgewählt wird und die Spieler aufgefordert werden, diese Zahl innerhalb von 10 Runden zu erraten. Nach jeder Runde sollte dem Spieler mitgeteilt werden, ob seine Antwort richtig war oder nicht, und falls er falsch lag, ob die Zahl zu niedrig oder zu hoch war. Außerdem sollte die vom Spieler in der vorherigen Runde erratene Zahl angezeigt werden. Sobald ein Spieler richtig rät oder keine Chancen mehr hat, endet das Spiel. Nachdem das Spiel beendet ist, können die Spieler entscheiden, ob sie erneut beginnen möchten. Denken: 1. Erzeugen Sie zufällig eine natürliche Zahl innerhalb von 100 2. Notieren Sie die aktuelle Rundennummer des Spielers. Beginnen Sie bei 1 3. Bieten Sie den Spielern eine Möglichkeit, Zahlen zu erraten 4. Sobald ein Ergebnis übermittelt wurde, zeichnen Sie es zuerst auf, damit die Benutzer ihre vorherigen Vermutungen sehen können 5. Dann überprüfen Sie, ob er richtig liegt 6. Wenn richtig: 1. Zeigen Sie eine Glückwunschnachricht an 2. Verhindern Sie, dass Spieler raten 3. Anzeigebereich für Dauerspieler, um das Spiel neu zu starten 7. Wenn etwas schief geht 1. Sagen Sie dem Spieler, dass er falsch liegt 2. Wortreihenfolge Sie geben einen weiteren Tipp ein 3. Runde Zahl plus 1 8. Wenn ein Fehler auftritt und der Spieler keine Züge mehr hat 1. Sagen Sie dem Spieler, dass das Spiel vorbei ist 2. Verhindern Sie, dass Spieler raten 3. Anzeigebereich ermöglicht es den Spielern, das Spiel neu zu starten 9. Sobald das Spiel neu gestartet ist, stellen Sie sicher, dass die Spiellogik und die Benutzeroberfläche vollständig aufgeladen sind und kehren Sie zu Schritt 1 zurück HTML Quelltext:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-kompatibel" content="IE=edge" />
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
<title>Rate das Zahlenspiel</title>
<script type="text/javascript" src="./JS/Rate das Zahlenspiel.js" async></script>
/*Ändern Sie es entsprechend Ihrer tatsächlichen Situation*/
</Kopf>
<Text>
<p class="Vermutungen"></p>
<p class="letztesErgebnis"></p>
<p Klasse="lowOrHi"></p>
<label for="guessField">Bitte raten Sie die Zahl:</label>
<input type="text" id="Schätzfeld" class="Schätzfeld" />
<input Typ="Senden" Wert="OK" Klasse="guessSubmit" />
</body>
</html>js-Code:
lass Zufallszahl = Math.floor(Math.random() * 100) + 1;
const guesses = document.querySelector(".guesses");
const lastResult = document.querySelector(".lastResult");
const lowOrHi = document.querySelector(".lowOrHi");
const guessSubmit = document.querySelector(".guessSubmit");
const guessField = document.querySelector(".guessField");
Lassen Sie guessCount = 1;
lass ResetButton;
/* Spiellogik */
Funktion checkGuess() {
/* Benutzereingabe abrufen und in einen numerischen Wert umwandeln*/
let userGuess = Nummer(guessField.value);
wenn (guessCount === 1) {
guesses.textContent = "Letzte Vermutung:";
}
Vermutungen.Textinhalt += BenutzerVermutung + " ";
if (Benutzerschätzung === Zufallszahl) {
lastResult.textContent = "Herzlichen Glückwunsch! Sie haben es richtig erraten";
lastResult.style.backgroundColor = "grün";
lowOrHi.textContent = "";
setzeGameOver();
} sonst wenn (guessCount === 10) {
lastResult.textContent = "!!! SPIEL VORBEI !!!";
setzeGameOver();
} anders {
lastResult.textContent = "Sie haben falsch geraten";
lastResult.style.backgroundColor = "rot";
if (Benutzerschätzung < Zufallszahl) {
lowOrHi.textContent = "Ihre Schätzung war zu niedrig";
} anders {
lowOrHi.textContent = "Sie haben zu hoch geschätzt";
}
}
rateAnzahl++;
guessField.value = "";
guessField.fokus();
}
/* Spiel beenden */
Funktion setzeGameOver() {
guessField.disabled = wahr;
guessSubmit.disabled = wahr;
ResetButton = Dokument.ErstellenElement("Schaltfläche");
resetButton.textContent = "Neues Spiel starten";
Dokument.Body.AnhängenUntergeordnetesElement(ResetButton);
resetButton.addEventListener("klicken", resetGame);
}
/* Initialisierung */
Funktion ResetGame() {
Anzahl der Vermutungen = 1;
const resetParas = document.querySelectorAll(".resultParas p");
für (lass i = 0; i < resetParas.length; i++) {
resetParas[i].textContent = " ";
}
ResetButton.parentNode.removeChild(ResetButton);
guessField.disabled = falsch;
guessSubmit.disabled = falsch;
guessField.value = "";
guessField.fokus();
lastResult.style.backgroundColor = "weiß";
Zufallszahl = Math.floor(Math.random() * 100) + 1;
}
guessSubmit.addEventListener("klicken", checkGuess);Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Detaillierte Schritte zur Installation von MySQL 8.0.18-winx64 unter Win10
>>: Lösung für den Fehler beim Aufruf von Yum im Docker-Container
Artikel empfehlen
HTML ist die zentrale Grundlage für die Entwicklung von WEB-Standards
HTML-zentrierte Front-End-Entwicklung entspricht p...
jQuery implementiert die Funktion zum Deaktivieren der Steuertaste zum Senden des Bestätigungscodes
Gewünschte Wirkung: Nach dem Klick auf die Übermi...
CSS-Pickup-Pfeile, Kataloge, Icons Implementierungscode
1. Verschiedene CSS-Symbole Es gibt drei Möglichk...
4 Möglichkeiten, doppeltes Einfügen von Daten in Mysql zu vermeiden
Die gebräuchlichste Methode besteht darin, einen ...
Grafisches Tutorial zur Installation und Konfiguration der MSI-Version von MySQL 8.0.11
In diesem Artikel finden Sie das Installations- u...
Der Effekt des Heranzoomens in einem Taobao-Shop ähnelt dem Prinzip einer Diashow.
Heute habe ich den Mauszoom-Effekt auf der Vorders...
So öffnen Sie eine Seite in einem Iframe
Lösung: Setzen Sie den Zielattributwert des Links ...
Implementierung des Pycharm-Installationstutorials auf Ubuntu 18.04
Methode 1: Pycharm herunterladen und installieren...
Bringen Sie Ihnen kostenlos bei, wie Sie AWS-Serverressourcen nutzen
AWS – Amazons Cloud-Computing-Serviceplattform Ic...
Die Funktionen und Unterschiede zwischen deaktiviert und schreibgeschützt
1: schreibgeschützt dient zum Sperren dieses Steue...
Installations-Tutorial für die Zip-Version von MySQL 5.7.18
Die MySQL 5.7.18 Zip-Version von MySQL ist nicht ...
Analyse der MySql CURRENT_TIMESTAMP-Funktion anhand eines Beispiels
Beim Erstellen eines Zeitfelds STANDARD CURRENT_T...
Beinhaltet der %-Wert im neu erstellten MySQL-Benutzer localhost?
Normale Erklärung % bedeutet, dass jeder Client e...
Analyse des Ausschnitts des Hintergrundbildes des Neunerrasters mit adaptiver Breite und Höhe
<br />Basierend auf dem ursprünglichen, in B...
Verwendung des optionalen Verkettungsoperators von JS
Vorwort Der optionale Verkettungsoperator (?.) er...