JavaScriptは24時を実装します-フロントエンドQ&A-php.cn

JavaScriptは24時を実装します

王林

リリース： 2023-05-09 10:32:07

オリジナル

791 人が閲覧しました

ブラックジャックは、4枚のカードを24の数字まで数えるように設計された楽しいカードゲームです。この記事ではJavaScriptで24点ゲームを実装する方法を紹介します。

ステップ 1: ゲームインターフェイスをセットアップする

まず、ゲームインターフェイスをセットアップする必要があります。必要な HTML および CSS コードは次のとおりです。

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

ログイン後にコピー

このコードでは、ページタイトル、スタイル、およびゲームインターフェイス要素を定義します。カードブロックには、ランダムな 4 枚のトランプがテキスト形式で表示されます。

ステップ 2: ランダムなカードを生成する

次に、ランダムな 4 枚のトランプを生成する関数を作成する必要があります。これを実現するには、すべてのトランプを含む配列を作成し、その中から 4 枚を選択する必要があります。必要な JavaScript コードは次のとおりです。

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;
}

ログイン後にコピー

上記のコードでは、2 つの配列を作成しました。1 つはすべてのスーツを含み、もう 1 つはすべての額面を含みます。次に、Math.random() 関数と配列の長さを使用して、ランダムなスーツと金額を選択します。最後に、HTML 文字列でこれらの値を使用してカードを作成します。この関数は上記 4 つのループを実行して、ランダムな 4 枚のカードを生成します。

ステップ 3: コンプライアンスを確認する

次に、4 枚のカードを使用して 24 を計算できるかどうかを確認する関数を作成する必要があります。この関数では、再帰を使用して 24 ポイントゲームのルールをシミュレートする必要があります。必要な JavaScript コードは次のとおりです。

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;
}

ログイン後にコピー

この関数はパラメータとして num 配列を受け取ります。配列が指定されていない場合、関数はカードのブロックからランダムな配列を取得します。配列の長さが 1 の場合、関数はその値が 24 に等しい場合は true を返し、それ以外の場合は false を返します。

それ以外の場合、関数は 2 つの数値をループして各操作をシミュレートし、解が見つかるか実行可能な解がなくなるまで再帰的に自身を呼び出します。解決策が見つかった場合は true を返し、そうでない場合は false を返します。

ステップ 4: 演算子の処理

次に、演算子の配列を作成し、それを数値と組み合わせる必要があります。必要な JavaScript コードは次のとおりです。

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;
    }
  }
  // ...
}

ログイン後にコピー

上記のコードでは、演算子の配列と、対応する演算子関数の配列を作成します。次に、parseFloat() 関数を使用して文字列数値を数値に変換し、対応する演算子関数を使用して結果を計算します。最後に、結果を文字列として新しい配列に追加し、それ自体を再帰的に呼び出して解決策を試みます。

ステップ 5: プレーヤーに結果を提示する

最後に、プレーヤーに結果を提示する必要があります。必要な JavaScript コードは次のとおりです:

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

ログイン後にコピー

上記のコードでは、実行可能な解決策が見つかった場合は、「おめでとうございます。うまくいきました!」というメッセージボックスが表示されます。そうでない場合は、「申し訳ありませんが、試してみてください」というメッセージボックスが表示されます。もう一度みましょう...」メッセージボックス。

概要

これで、24 ポイントゲームを実装するための JavaScript の完全なソリューションが提供されました。上記のテクニックを使用すると、ユーザーが数学スキルをテストできるシンプルで楽しいゲームを作成できます。さらに、このようなテクニックを使用して、テキストアドベンチャーやパズルゲームなど、他の興味深いゲームを作成することもできます。

以上がJavaScriptは24時を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。