javascript 實作24點

王林原創: 2023-05-09 10:32:07842瀏覽

24點是一款有趣的紙牌遊戲，旨在將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;
}

在上述程式碼中，我們建立了兩個陣列，一個包含所有花色，另一個包含所有面值。然後，我們使用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，則函數傳回true如果它的值等於24，否則傳回false。

否則，函數將對兩個數字進行循環，並模擬執行每個操作並遞歸地調用自身，直到找到解決方案或沒有可行解決方案。如果找到解決方案，則傳回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("很抱歉，再试一次吧...");
  }
}

在上述程式碼中，如果找到可行解決方案，則會顯示「恭喜你，成功了！」訊息框，否則會顯示「很抱歉，再試一次吧...”訊息框。

總結

現在，我們已經為JavaScript實作24點遊戲提供了一個完整的解決方案。透過使用上述技術，您可以創建一個簡單而有趣的遊戲，讓用戶可以測試他們的數學技能。此外，您還可以使用此類技術創建其他有趣的遊戲，例如文字冒險遊戲和拼圖遊戲。

以上是javascript 實作24點的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html math 字符串递归循环

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css翻轉切換下一篇：css翻轉切換

看更多