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
Allgemeiner CSS-Code verursacht nur geringfügige ...
Lassen Sie uns, ohne ins Detail zu gehen, direkt ...
In diesem Artikel untersuchen wir, warum async/aw...
Vorwort Bei der Entwicklung eines Projekts stieß ...
Inhaltsverzeichnis 1: Einführung in Galera-Cluste...
Während der Nutzung des Computers entsteht im Sys...
Anmeldung + SessionStorage Effektanzeige Nach ein...
Einführung: Wenn wir MySQL zum Erstellen einer Ta...
Inhaltsverzeichnis 1. Bauen Sie mit dem offiziell...
Finden Sie das Problem Ich hatte kürzlich ein Pro...
Hier können Sie durch geschickten Einsatz von CSS-...
Inhaltsverzeichnis Überblick Virtueller Dom Prinz...
Inhaltsverzeichnis 1. Übersicht 1.1 Definition 1....
Auf einem Server werden drei MySQL-Instanzprozess...
Inhaltsverzeichnis Zweck Modulinstallation Grundl...