Comment implémenter un jeu de correspondance de nombres en utilisant javascript

L'éditeur suivant partagera avec vous un exemple de mise en œuvre d'un jeu de correspondance numérique en utilisant JavaScript. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur et jetons un coup d'œil

L'effet de jeu est le suivant :

Règle :

Dans la grille 4X5, il y a 10 nombres aléatoires qui ne sont pas égaux les uns aux autres, et il y a deux copies de chaque donnée (c'est-à-dire 20 numéros, il y a deux (deux paires égales à dix), répartis aléatoirement dans 20 grilles. Le jeu démarre et une séquence de vingt numéros apparaît. Chaque fois que vous cliquez sur la grille, les données de la grille actuelle seront affichées et conservées temporairement jusqu'au prochain clic. Si les données affichées par le clic suivant sont différentes des données conservées, les données retenues par le clic précédent disparaîtront (toujours). existe dans la grille mais ne s'affiche pas). Si les deux données affichées par des clics continus sont identiques, les deux données seront affichées et ne disparaîtront plus.

Jusqu'à ce que toutes les données soient affichées en cliquant continuellement sur les mêmes données, le jeu est terminé et le temps de jeu est signalé. À ce stade, vous pouvez cliquer sur Démarrer le jeu ou Actualiser pour continuer.

Analyse :

1 : Vingt grilles correspondent à vingt données, génèrent deux ensembles de dix nombres aléatoires égaux et les mettent dans Array, le l'indice du tableau détermine la position d'affichage.

2 : Trois états de chaque grille : masquage des données, conservation temporaire des données et affichage permanent. La grille de données cachées est temporairement conservée au prochain clic. La grille qui conserve temporairement les données sera affichée en permanence ou les données seront masquées en cliquant la prochaine fois. Elle est jugée en fonction de l'égalité des données obtenues deux fois de suite. Après affichage permanent, le statut n'est plus modifiable et ne peut être affiché qu'en permanence. Pour le moment, il n'est pas valide pour les clics.

3 : Le chronométrage démarre lorsque l'on clique sur la première grille après avoir cliqué sur le bouton Démarrer. Le chronomètre ne peut pas être arrêté tant que le jeu n'est pas terminé ou que vous n'avez pas cliqué sur Actualiser pour redémarrer.

4 : Il s'ensuit qu'une valeur booléenne est nécessaire ici pour enregistrer si le jeu a commencé. Le jeu qui a déjà commencé doit rejeter le bouton de démarrage et le chronomètre fonctionne jusqu'à ce que le jeu soit terminé. Une fois le jeu terminé, modifiez la valeur booléenne, le minuteur cesse de fonctionner, la durée du jeu s'affiche et le bouton de démarrage devient disponible.

Implémentation :

Le tableau est créé via un script et les éléments qu'il contient sont d'abord affichés sous forme de "" chaînes vides par défaut. Affiché par le clic correspondant. Les styles CSS peuvent être définis par vous-même.

<table border:1>
  <script>
   var rowlength = 4;
   var collength = 5;
   var str = &#39;&#39;;
   for (var i = 0; i < rowlength; i++) {
    str += &#39;<tr>&#39;
    for (var j = 0; j < collength; j++) {
     //这里将每个td的id拼接为imgxx xx为元素索引
     var index = i * collength + j;
     var id = "img" + index;
     //注意这里字符串 每个&#39;&#39;是一个字符串进行输出
      str += &#39;<td id="&#39; + id + &#39;" onclick="showImg(&#39; + index + &#39;)">&#39;;
     str += &#39;</td>&#39;;
    }
    str += &#39;</tr>&#39;
   }
   document.write(str);
  </script>
 </table>

NEW_START est une variable qui enregistre si le jeu peut être démarré

times enregistre le temps écoulé

trans enregistre l'état du retournement de chaque grille, un tableau Chaque grille a trois états : 0 : caché - 1 : affiché (peut toujours être retourné) - 2 : affiché (ne peut pas être retourné). Autrement dit, chaque élément du tableau n'a que trois valeurs possibles 0, 1, 2)

numArr Un tableau de séquence aléatoire de trente nombres

var NEW_START = true;
  var times = 0;
  var trans = [];
  var numArr = [];

Méthode pour obtenir des éléments par ID :

 function $(id) {
  return document.getElementById(id);
   }

Ce qui suit consiste à obtenir vingt nombres aléatoires grâce à la fonction, dix groupes de deux égaux (voir : Générer des nombres aléatoires dans un Numéro de plage spécifié)

function getNum() {
    var index = 0;
    var arrLength = rowlength * collength / 2;
    var arr = new Array();
    while (index < arrLength) {
     var flag = true;
     var num = parseInt(Math.random() * 100);
     for (var i in arr) {
      if (arr[i] == num || arr[i] < 1) {
       flag = false;
      }
     }
     if (flag == true) {
      arr[index] = num;
      index++;
     }
    }
    //alert(arr.length);
    //arr是十个互不相等的随机数 
    // newArr数组就是每个随机数都有两个的数组
    var newArr = new Array();
    for (var i = 0; i < arrLength; i++) {
     newArr[i] = arr[i];
     newArr[arrLength + i] = arr[i];
    }
    return newArr;
   }

La création de tableaux et la génération de tableaux de nombres aléatoires sont tous des travaux de préparation.

Voici la logique spécifique :

Cliquez sur la fonction pour démarrer le jeu

<input type="button"
 id="startButton" 
value="开始游戏" 
onclick="init()">

Cliquez pour démarrer le jeu jeu et doit être initialisé. Paramètres liés au jeu, veuillez noter que s'il a déjà commencé, il doit être rejeté. Utilisez la fonction de tri pour mélanger les éléments du tableau afin d'obtenir un caractère aléatoire.

function init() {
    //如果已经开始 拒绝点击
    if (NEW_START == false) {
     return;
    }
    //结束时用于显示时间的h4标签
    $('end').innerHTML = '';
    var count = rowlength * collength;
    //将每个格子的数据隐藏 初始化每个格子的翻转状态
    for (var i = 0; i < count; i++) {
     $(&#39;img&#39; + i).innerHTML = &#39;&#39;;
     trans[i] = 0;
    }
    //将游戏用时置为0
    times = 0;
    $(&#39;gametime&#39;).innerHTML = times + &#39;秒&#39;;
    //获取随机的三十个数的随机序列数组 注意排序函数的使用
    numArr = getNum().sort(function () {
     return Math.random() - 0.5;
    });
    alert("已生成随机数，按表格顺序排列：" + numArr);
   }

Fonction de chronométrage

Lorsque vous cliquez sur la première grille, vous devez démarrer le chronométrage. NEW_START=false signifie qu'il a démarré. Vous devez vous assurer que le chronomètre ne démarre que lorsque le jeu est en cours. S'appelle une fois par seconde et affiche le temps écoulé en temps réel via innerHTML.

用时：<span id="gametime">0秒</span>
 function countTime() {
    if (NEW_START == false) {
     setTimeout(&#39;countTime()&#39;, 1000);
     $(&#39;gametime&#39;).innerHTML = times + "秒";
     times++;
    }
   }

Fonction de clic pour chaque grille (super important)

Refuser de cliquer sur la grille avant qu'elle ne démarre (aucun effet). Entrez dans le jeu et cliquez sur la première grille. Le jeu démarre et le statut change. NEW_START=false signifie qu'un nouveau jeu a été lancé et ne peut pas être créé. Le chronomètre démarre.

L'événement de clic suivant doit déterminer la grille cliquée pour gérer différentes logiques :

Cliquez sur un élément qui a été affiché en permanence et aucun retour n'est traité.

Cliquer sur un élément qui vient d'être affiché mais qui n'est pas affiché en permanence ne gère pas le retour.

(Notez que pour déterminer si le même élément est le même élément, il faut trouver directement l'index en trans via la valeur de statut et le comparer)

Cliquez sur l'élément non affiché pour obtenir la valeur et comparez-le avec l'élément précédemment affiché Comparaison : Si

sont égaux, la valeur d'état de l'index correspondant en trans sera changée en 2, indiquant que

sera affiché en permanence si le. L'élément nouvellement cliqué n'est pas égal, la valeur d'état d'index correspondante dans trans sera changée en 1 (temporairement réservé), la valeur d'index de l'élément précédemment cliqué est 0 (doit être masqué).

Après avoir défini la valeur d'état, vous devez mettre à jour l'affichage immédiatement (fonction RefreshUI). Lors de la mise à jour de l'affichage, il fonctionne sur la base du tableau trans qui enregistre la valeur d'état.

function showImg(index) {
    //未点击开始，还未初始化，退出
    if (numArr[0] == undefined) {
     return;
    }
    //初次点击进入，开启计时
    if (NEW_START) {
     NEW_START = false;
     countTime();
    }
    //1-点击已经彻底显示的元素 退出
    if (trans[index] == 2) {
     return;
    }
    //将点击的格子的元素显示出来，并改变翻转状态
    //alert(index);
    //alert(numArr)
    var clickEle = $('img' + index);
    clickEle.innerHTML = numArr[index];
    //已点击元素的index
    var transIndex;
    for (var i in trans) {
     if (trans[i] == 1) {
      transIndex = i;
     }
    }
    //2-如果点击的是刚刚已显示元素
    if (transIndex == index) {
     trans[index] = 1;
     return;
    }
    //3-点击新元素 与先前显示元素对比 两种情况-相等 不等
    else {
     if (numArr[transIndex] == numArr[index]) {
      trans[transIndex] = 2;
      trans[index] = 2;
     } else {
      trans[transIndex] = 0;
      trans[index] = 1;
     }
    }
    refreshUI();
   }

Définissez la fonction affichée rafraîchirUI

en fonction de la valeur d'état

根据trans中每个元素的值，改变对应索引的格子的值。注意，如果格子的数据永久显示，需要记录已经永久显示的格子的数量，当等于所有格子数量时，表示已经全部显示。需要判定游戏结束，显示出游戏用时。

function refreshUI() {
    //此处用fore循环会最后存在一个undefined
    //count记录已经被彻底显示的个数
    var count = 0;
    for (var i = 0; i < trans.length; i++) {
     if (trans[i] == 0) {
      $(&#39;img&#39; + i).innerHTML = &#39;&#39;;
     }
     if (trans[i] == 1) {
      $(&#39;img&#39; + i).innerHTML = numArr[i];
     }
     if (trans[i] == 2) {
      $(&#39;img&#39; + i).innerHTML = numArr[i]
      count++;
     }
    }
    if (count == collength * rowlength) {
     NEW_START = true;
     var endTime = times;
     $(&#39;end&#39;).innerHTML = &#39;用时&#39; + endTime + &#39;秒！！游戏结束，点击开始游戏继续&#39;;
     $(&#39;gametime&#39;).innerHTML = endTime + "秒";
    }
   }

通过数组和表格的配合，实现Comment implémenter un jeu de correspondance de nombres en utilisant javascript，加深对表格创建和数组的运用。处理逻辑和数据显示分离，根据状态值做到不同显示的状态。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中如何实现跳转到之前页面

在Nginx中如何配置多站点vhost

在express+mockjs中如何实现后台数据发送

使用mock.js生成随机数据

使用Node.js如何实现资讯爬虫（详细教程）

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!