Maison >interface Web >Questions et réponses frontales >JavaScript implémente 24 heures

JavaScript implémente 24 heures

王林original: 2023-05-09 10:32:07897parcourir

Le Blackjack est un jeu de cartes amusant conçu pour compter 4 cartes jusqu'au nombre 24. Dans cet article, nous présenterons comment implémenter le jeu en 24 points en JavaScript.

Étape 1 : Configurer l'interface du jeu

Tout d'abord, nous devons configurer l'interface du jeu. Voici le code HTML et CSS requis :

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

Dans ce code, nous définissons le titre de la page, les styles et les éléments de l'interface du jeu. Dans le bloc de cartes, nous afficherons 4 cartes à jouer aléatoires sous forme de texte.

Étape 2 : Générer des cartes aléatoires

Maintenant, nous devons écrire une fonction pour générer 4 cartes à jouer aléatoires. Pour y parvenir, nous devons créer un tableau contenant toutes les cartes à jouer et en sélectionner 4. Voici le code JavaScript requis :

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

Dans le code ci-dessus, nous avons créé deux tableaux, l'un contenant toutes les couleurs et l'autre contenant toutes les dénominations. Nous utilisons ensuite la fonction Math.random() et la longueur du tableau pour sélectionner une couleur et une dénomination aléatoires. Enfin, nous créons une carte en utilisant ces valeurs dans une chaîne HTML. Cette fonction exécute les 4 boucles ci-dessus pour générer 4 cartes aléatoires.

Étape 3 : Vérifier la conformité

Maintenant, nous devons écrire une fonction pour vérifier si 24 peut être calculé à l'aide de 4 cartes. Cette fonction nous oblige à utiliser la récursion pour simuler les règles du jeu en 24 points. Voici le code JavaScript requis :

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

La fonction prend un tableau de num comme paramètre. Si aucun tableau n'est fourni, la fonction obtiendra un tableau aléatoire à partir du bloc de cartes. Si la longueur du tableau est 1, la fonction renvoie vrai si sa valeur est égale à 24, sinon elle renvoie faux.

Sinon, la fonction bouclera sur les deux nombres et simulera l'exécution de chaque opération et s'appellera récursivement jusqu'à ce qu'une solution soit trouvée ou qu'il n'y ait pas de solution réalisable. Renvoie vrai si une solution est trouvée, faux sinon.

Étape 4 : Opérateurs de traitement

Maintenant, nous devons créer un tableau d'opérateurs et le combiner avec des nombres. Voici le code JavaScript requis :

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

Dans le code ci-dessus, nous créons un tableau d'opérateurs et un tableau correspondant de fonctions d'opérateur. Nous utilisons ensuite la fonction parseFloat() pour convertir le numéro de chaîne en nombre et calculer le résultat à l'aide de la fonction opérateur correspondante. Enfin, nous ajoutons le résultat sous forme de chaîne à un nouveau tableau et nous l'appelons de manière récursive pour essayer la solution.

Étape 5 : Présenter les résultats au joueur

Enfin, nous devons présenter les résultats au joueur. Voici le code JavaScript requis :

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

Dans le code ci-dessus, si une solution réalisable est trouvée, la boîte de message "Félicitations, cela a fonctionné !" s'affichera, sinon elle affichera "Désolé, réessayez..." "boîte de message.

Résumé

Maintenant, nous avons fourni une solution complète pour JavaScript pour implémenter le jeu en 24 points. En utilisant les techniques ci-dessus, vous pouvez créer un jeu simple et amusant qui permet aux utilisateurs de tester leurs compétences en mathématiques. De plus, vous pouvez utiliser ces techniques pour créer d’autres jeux intéressants, tels que des aventures textuelles et des jeux de réflexion.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html math 字符串递归循环

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：bascule à bascule CSSArticle suivant：bascule à bascule CSS

Articles Liés

Voir plus