JavaScript는 24시를 구현합니다.-프런트엔드 Q&A-php.cn

JavaScript는 24시를 구현합니다.

王林

풀어 주다： 2023-05-09 10:32:07

원래의

849명이 탐색했습니다.

블랙잭은 4장의 카드를 숫자 24까지 세는 재미있는 카드 게임입니다. 이번 글에서는 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인 경우 값이 24이면 true를 반환하고, 그렇지 않으면 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("很抱歉，再试一次吧...");
  }
}

로그인 후 복사

위 코드에서 실행 가능한 솔루션을 찾으면 "축하합니다. 성공했습니다!"라는 메시지 상자가 표시되고, 그렇지 않으면 "죄송합니다. 다시 시도하세요..."가 표시됩니다. "메세지 박스.

Summary

이제 우리는 24점 게임을 구현하기 위한 완벽한 JavaScript 솔루션을 제공했습니다. 위의 기술을 사용하면 사용자가 자신의 수학 능력을 테스트할 수 있는 간단하고 재미있는 게임을 만들 수 있습니다. 또한 이러한 기술을 사용하여 텍스트 어드벤처 및 퍼즐 게임과 같은 다른 흥미로운 게임을 만들 수 있습니다.

위 내용은 JavaScript는 24시를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!