So implementieren Sie ein Zahlen-Ratespiel mit JavaScript

Im Internetzeitalter können Spiele jederzeit und überall gespielt werden, was ein gewisses Maß an Unterhaltung und Glück bringen kann. Unter ihnen ist das Zahlen-Ratespiel ein eher klassisches Spiel und für alle Altersgruppen geeignet. In diesem Artikel stellen wir Ihnen Schritt für Schritt vor, wie Sie das Zahlenratespiel mithilfe von JavaScript implementieren.

Schritt 1: Vorbereitung

Bevor wir mit dem Schreiben von Code beginnen, müssen wir die Arbeitsumgebung vorbereiten. Hier können wir jeden Texteditor oder jedes Entwicklungstool verwenden. Zum Beispiel: Sublime Text, VS-Code usw. Für Einsteiger empfehle ich die Verwendung von Codepen.io, einem Online-Entwicklungstool, das sich sehr gut zum schnellen Schreiben kleiner JavaScript-Projekte eignet.

Schritt 2: HTML-Code schreiben

Zuerst müssen wir HTML-Code schreiben, um eine einfache Benutzeroberfläche zu erstellen. In diesem Code erstellen wir ein div-Element, das ein h1-Element zur Anzeige des Titels des Spiels, ein Eingabeelement und ein Schaltflächenelement zur Eingabe einer erratenen Zahl durch den Benutzer sowie ein p-Element zur Anzeige des Ergebnisses des Spiels enthält.

Das Folgende ist der HTML-Code.

<div id="game">
  <h1>猜数字游戏</h1>
  <input type="text" placeholder="请输入你的猜测" id="guess"></input>
  <button onclick="checkGuess()">猜一猜</button>
  <p id="results"></p>
</div>

Hier erstellen wir ein div-Element mit der ID „game“ und platzieren darin den Titel, das Eingabefeld, die Schaltfläche und das Ergebnis. Beachten Sie, dass wir der Schaltfläche ein Onclick-Ereignis hinzugefügt haben, das die Funktion checkGuess() aufruft.

Schritt 3: JavaScript-Code schreiben

Jetzt können wir mit dem Schreiben von JavaScript-Code beginnen. Bevor wir beginnen, definieren wir drei Eröffnungsvariablen.

var randomNumber = Math.floor(Math.random() * 100) + 1;
var guesses = [];
var count = 0;

Die Variable „randomNumber“ hier generiert eine Zufallszahl von 1 bis 100, die Variable „gueses“ speichert alle Vermutungen des Benutzers und die Variable „count“ speichert die Anzahl der Vermutungen des Benutzers.

Als nächstes beginnen wir mit dem Schreiben der Funktion checkGuess().

function checkGuess() {
  var guess = document.getElementById("guess").value;
  if (guesses.indexOf(guess) !== -1) {
    alert("你已经猜过这个数字了，请猜另外一个数字！");
    return;
  }
  guesses.push(guess);
  count++;
  var resultDiv = document.getElementById("results");
  if (guess == randomNumber) {
    alert("恭喜你，你猜对了！你猜了" + count + "次。");
    resultDiv.innerHTML = "恭喜你，你猜对了！你猜了" + count + "次。";
  } else if (guess < randomNumber) {
    resultDiv.innerHTML = "你猜的数字过小";
  } else if (guess > randomNumber) {
    resultDiv.innerHTML = "你猜的数字过大";
  }
  document.getElementById("guess").value = "";
}

In der Funktion checkGuess() holen wir uns zunächst die vom Benutzer eingegebene Zahl und prüfen, ob diese erraten wurde. Wenn die Schätzung erfolgreich ist, wird eine Warnung eingeblendet, die den Benutzer darüber informiert, dass er eine weitere Zahl erraten muss. Andernfalls führen wir den Code weiter aus und fügen diese Zahl dem Guess-Array hinzu.

Als nächstes erhöhen wir den Zählzähler um 1 und aktualisieren die Schätzung des Benutzers im resultDiv-Element. Wenn der Benutzer richtig geraten hat, öffnen wir ein Popup, um ihm mitzuteilen, dass er richtig geraten hat, und aktualisieren das resultDiv-Element.

Wenn der Benutzer nicht richtig geraten hat, teilen wir ihm mit, ob er niedriger oder höher geraten hat, und aktualisieren das resultDiv-Element.

Abschließend löschen wir die Vermutung des Benutzers im Eingabefeld.

Schritt 4: Testen Sie Ihren Code

Jetzt haben wir den notwendigen HTML- und JavaScript-Code geschrieben. Wir können unseren Code testen und in wenigen einfachen Schritten sehen, ob das Spiel ordnungsgemäß funktioniert. Kopieren Sie den obigen Code in den Online-Editor und klicken Sie auf die Schaltfläche „Ausführen“.

Die Benutzeroberfläche des Spiels sollte jetzt gerendert werden. Geben Sie eine Zahl in das Eingabefeld ein und klicken Sie auf die Schaltfläche „Erraten“. Wenn Sie richtig geraten haben, wird eine Eingabeaufforderung angezeigt, die Ihnen mitteilt, dass Sie richtig geraten haben und wie oft Sie geraten haben.

Wenn Sie falsch geraten haben, wird Ihnen eine Meldung angezeigt, dass Ihre Schätzung zu niedrig oder zu hoch ist. Wenn Sie die Zahl noch nicht erraten haben, können Sie weiter raten und das System zeichnet jede Ihrer Schätzungen auf.

Zusammenfassend lässt sich sagen, dass Sie in diesem Artikel lernen können, wie Sie mit JavaScript ein Ratespiel schreiben und jederzeit und überall die Vorteile des Spiels genießen können.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Zahlen-Ratespiel mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!