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

Verwenden Sie das ab-Tool, um einen API-Stresstest auf dem Server durchzuführen

Inhaltsverzeichnis 1 Eine kurze Einführung in den...

So zählen Sie die Anzahl bestimmter Zeichen in einer Datei unter Linux

Das Zählen der Nummer einer Zeichenfolge in einer...

Webdesign-Erfahrung: 5 hervorragende Webdesign-Konzepte, vollständige Analyse (Bilder)

Im Gegensatz zu anderen Designarten verändert sich...

Lassen Sie uns über mein Verständnis und meine Anwendung von React Context sprechen

Inhaltsverzeichnis Vorwort Erster Blick auf React...

Einfache Implementierung von Vue Drag & Drop

In diesem Artikel wird hauptsächlich die einfache...

Implementierung der CSS-Transformation des Seitenumblätter-Animationsdatensatzes

Szenario mit dem Problem des Seitenumblätterns B ...

Jenkins erstellt Docker-Images und überträgt sie in das Harbor-Warehouse.

Inhaltsverzeichnis Docker-Datei pom.xml Jenkins-K...

So verbergen Sie die Grenze/Trennlinie zwischen Zellen in einer Tabelle

Nur den oberen Rand anzeigen <table frame=above...

Drei häufige Verwendungen von OpenLayers6-Karten-Overlays (Markierungstext im Popup-Fenster)

Inhaltsverzeichnis 1. Schreiben Sie vor 2. Overla...

Implementierungsmethode für die Datenspeicherung im WeChat-Applet

Inhaltsverzeichnis Globale Variable „globalData“ ...

Einige Einstellungen von Div bezüglich Rahmen und Transparenz

rahmen: Stil = „Rahmenstil: durchgezogen; Rahmenbr...

Tiefgreifendes Verständnis des Linux-Lastausgleichs LVS

Inhaltsverzeichnis 1. LVS-Lastausgleich 2. Grundl...

40 CSS/JS-Stil und funktionale technische Verarbeitung

1- Dropdown-Auswahlfelder gestalten – Ändern Sie ...

Vuex implementiert einen einfachen Einkaufswagen

In diesem Artikelbeispiel wird der spezifische Co...

So unterstützen Sie ApacheBench mehrere URLs

Da der Standard-AB nur Stresstests für eine einze...