Heim > Artikel > Web-Frontend > JavaScript implementiert 24 Uhr

JavaScript implementiert 24 Uhr

王林Original: 2023-05-09 10:32:07842Durchsuche

Blackjack ist ein unterhaltsames Kartenspiel, bei dem es darum geht, 4 Karten bis zur Zahl 24 zu zählen. In diesem Artikel stellen wir vor, wie das 24-Punkte-Spiel in JavaScript implementiert wird.

Schritt 1: Spieloberfläche einrichten

Zuerst müssen wir die Spieloberfläche einrichten. Hier ist der erforderliche HTML- und CSS-Code:

<!DOCTYPE html>
<html>
  <head>
    <title>24点游戏</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
      }
      h1 {
        margin-top: 50px;
        margin-bottom: 30px;
      }
      #card {
        font-size: 100px;
        margin: 50px 0;
      }
      button {
        padding: 10px 20px;
        font-size: 20px;
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <h1>欢迎来玩24点游戏</h1>
    <div id="card"></div>
    <button onclick="generateCards()">发牌</button>
    <button onclick="check24()">验证</button>
    <script src="game.js"></script>
  </body>
</html>

In diesem Code definieren wir den Seitentitel, die Stile und die Elemente der Spieloberfläche. Im Kartenblock werden 4 zufällige Spielkarten in Textform angezeigt.

Schritt 2: Zufällige Karten generieren

Jetzt müssen wir eine Funktion schreiben, um 4 zufällige Spielkarten zu generieren. Um dies zu erreichen, müssen wir ein Array mit allen Spielkarten erstellen und 4 davon auswählen. Hier ist der erforderliche JavaScript-Code:

const suits = ["spades", "hearts", "diamonds", "clubs"];
const values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];

function generateCards() {
  let cards = "";
  for (let i = 0; i < 4; i++) {
    let suit = suits[Math.floor(Math.random() * suits.length)];
    let value = values[Math.floor(Math.random() * values.length)];
    cards += `<span class="${suit}">${value}</span>`;
  }
  document.getElementById("card").innerHTML = cards;
}

Im obigen Code haben wir zwei Arrays erstellt, eines mit allen Farben und das andere mit allen Nennwerten. Anschließend verwenden wir die Funktion Math.random() und die Array-Länge, um eine zufällige Farbe und einen zufälligen Nennwert auszuwählen. Abschließend erstellen wir eine Karte mit diesen Werten in einem HTML-String. Diese Funktion führt die oben genannten 4 Schleifen aus, um 4 zufällige Karten zu generieren.

Schritt 3: Einhaltung überprüfen

Jetzt müssen wir eine Funktion schreiben, um zu prüfen, ob 24 mit 4 Karten berechnet werden kann. Diese Funktion erfordert, dass wir Rekursion verwenden, um die Regeln des 24-Punkte-Spiels zu simulieren. Hier ist der erforderliche JavaScript-Code:

function check24(nums) {
  if (!nums) {
    nums = Array.from(document.querySelectorAll("#card span")).map(span => span.innerHTML);
  }
  if (nums.length === 1) {
    return nums[0] === "24";
  }
  for (let i = 0; i < nums.length; i++) {
    for (let j = i + 1; j < nums.length; j++) {
      let a = nums[i], b = nums[j], c = "";
      for (let k = 0; k < nums.length; k++) {
        if (k !== i && k !== j) {
          c += nums[k] + ",";
        }
      }
      for (let k = 0; k < 4; k++) {
        let newNums = c.split(",");
        newNums.splice(k, 0, eval(`${a}${operators[k]}${b}`));
        if (check24(newNums)) {
          return true;
        }
      }
    }
  }
  return false;
}

Die Funktion verwendet ein Array von Zahlen als Parameter. Wenn kein Array bereitgestellt wird, ruft die Funktion ein zufälliges Array aus dem Kartenblock ab. Wenn die Array-Länge 1 ist, gibt die Funktion „true“ zurück, wenn ihr Wert gleich 24 ist, andernfalls gibt sie „false“ zurück.

Andernfalls durchläuft die Funktion die beiden Zahlen und simuliert, dass sie jede Operation ausführt und sich selbst rekursiv aufruft, bis eine Lösung gefunden wird oder es keine praktikable Lösung mehr gibt. Gibt true zurück, wenn eine Lösung gefunden wird, andernfalls false.

Schritt 4: Operatoren verarbeiten

Jetzt müssen wir ein Array von Operatoren erstellen und es mit Zahlen kombinieren. Hier ist der erforderliche JavaScript-Code:

const operators = ["+", "-", "*", "/"];
const operatorFunctions = [
  (a, b) => a + b,
  (a, b) => a - b,
  (a, b) => a * b,
  (a, b) => a / b,
];

function check24(nums) {
  // ...
  for (let k = 0; k < 4; k++) {
    let newNums = c.split(",");
    newNums.splice(k, 0, operatorFunctions[k](parseFloat(a), parseFloat(b)).toString());
    if (check24(newNums)) {
      return true;
    }
  }
  // ...
}

Im obigen Code erstellen wir ein Array von Operatoren und ein entsprechendes Array von Operatorfunktionen. Anschließend verwenden wir die Funktion parseFloat(), um die String-Nummer in eine Zahl umzuwandeln und das Ergebnis mit der entsprechenden Operatorfunktion zu berechnen. Schließlich hängen wir das Ergebnis als String an ein neues Array an und rufen es rekursiv auf, um die Lösung auszuprobieren.

Schritt 5: Präsentieren Sie dem Spieler die Ergebnisse

Zuletzt müssen wir dem Spieler die Ergebnisse präsentieren. Hier ist der erforderliche JavaScript-Code:

function check24() {
  // ...
  if (check24(nums)) {
    alert("恭喜你，成功啦！");
  } else {
    alert("很抱歉，再试一次吧...");
  }
}

Wenn im obigen Code eine praktikable Lösung gefunden wird, wird das Meldungsfeld „Herzlichen Glückwunsch, es hat funktioniert!“ angezeigt, andernfalls wird „Entschuldigung, versuchen Sie es erneut…“ angezeigt. ” Meldungsfeld.

Zusammenfassung

Jetzt haben wir eine Komplettlösung für JavaScript zur Implementierung des 24-Punkte-Spiels bereitgestellt. Mithilfe der oben genannten Techniken können Sie ein einfaches und unterhaltsames Spiel erstellen, mit dem Benutzer ihre mathematischen Fähigkeiten testen können. Darüber hinaus können Sie mit solchen Techniken auch andere interessante Spiele erstellen, beispielsweise Textabenteuer und Puzzlespiele.

Das obige ist der detaillierte Inhalt vonJavaScript implementiert 24 Uhr. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html math 字符串递归循环

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS-Flip-SchalterNächster Artikel：CSS-Flip-Schalter

In Verbindung stehende Artikel

Mehr sehen