Reines JavaScript zur Implementierung des Zahlenratespiels

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:
  • Ein Beispiel für einen Code für ein Ratespiel basierend auf JavaScript
  • JS-Zahlenschätzspiel - Beispielerklärung
  • JavaScript zur Implementierung des Zahlenratespiels
  • JS implementiert ein webbasiertes Ratespiel
  • jsp+servlet zur Realisierung des Zahlenratespiels
  • JSP implementiert das Millionärs-Ratespiel
  • Ein Beispiel für die Generierung von Zufallszahlen und das Schätzen der Größe von Zahlen, implementiert durch AngularJS
  • AngularJS implementiert die Funktion zum Erraten der Größe von Zahlen
  • js implementiert ein Zahlen-Ratespiel
  • Einfacher Implementierungscode des js-Zahlenratespiels

<<:  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

Eine Zeile CSS-Code, die Chrome zum Absturz bringt

Allgemeiner CSS-Code verursacht nur geringfügige ...

So erstellen Sie eine monatliche Tabelle in einer gespeicherten MySQL-Prozedur

Lassen Sie uns, ohne ins Detail zu gehen, direkt ...

Tiefgreifendes Verständnis des asynchronen Wartens in Javascript

In diesem Artikel untersuchen wir, warum async/aw...

So finden Sie identische Dateien in Linux

Während der Nutzung des Computers entsteht im Sys...

Detaillierte Erklärung zur Verwendung von ElementUI in Vue

Anmeldung + SessionStorage Effektanzeige Nach ein...

Was Sie über die automatische ID-Inkrementierung in MySQL wissen müssen

Einführung: Wenn wir MySQL zum Erstellen einer Ta...

Der neue TypeScript-Schnellstart-Übungsbericht des Partners Vue

Inhaltsverzeichnis 1. Bauen Sie mit dem offiziell...

10 sehr gute CSS-Fähigkeiten sammeln und teilen

Hier können Sie durch geschickten Einsatz von CSS-...

Ein kurzer Vortrag über den Diff-Algorithmus in Vue

Inhaltsverzeichnis Überblick Virtueller Dom Prinz...

Zabbix implementiert die Überwachung mehrerer MySQL-Prozesse

Auf einem Server werden drei MySQL-Instanzprozess...

Verwendung des SerialPort-Moduls in Node.js

Inhaltsverzeichnis Zweck Modulinstallation Grundl...