So implementieren Sie ein Zahlenvergleichsspiel mit Javascript

Der folgende Herausgeber wird Ihnen ein Beispiel für die Implementierung eines digitalen Matching-Spiels mit JavaScript geben. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist. Folgen wir dem Editor, um einen Blick darauf zu werfen.

Der Spieleffekt ist wie folgt:

Regel:

Im 4X5-Raster gibt es 10 Zufallszahlen, die einander nicht gleich sind, und es gibt zwei Kopien jeder Daten (d. h. 20 Zahlen, es gibt zwei gleich zehn Paare, zufällig verteilt in 20 Rastern. Das Spiel beginnt und eine Folge von zwanzig Zahlen erscheint. Jedes Mal, wenn Sie auf das Raster klicken, werden die Daten im aktuellen Raster angezeigt und vorübergehend bis zum nächsten Klick beibehalten. Wenn sich die beim nächsten Klick angezeigten Daten von den beibehaltenen Daten unterscheiden, verschwinden die beim vorherigen Klick beibehaltenen Daten (immer noch). existieren im Raster, werden aber nicht angezeigt). Wenn die beiden durch kontinuierliches Klicken angezeigten Daten gleich sind, werden beide Daten angezeigt und verschwinden nicht wieder.

Bis alle Daten durch kontinuierliches Klicken auf dieselben Daten angezeigt werden, ist das Spiel beendet und die Spielzeit wird gemeldet. An dieser Stelle können Sie auf „Spiel starten“ oder „Aktualisieren“ klicken, um fortzufahren.

Analyse:

1: Zwanzig Gitter entsprechen zwanzig Daten, generieren zwei Sätze von zehn gleichen Zufallszahlen und fügen sie in ein Array ein Der Array-Index bestimmt die Anzeigeposition.

2: Drei Zustände jedes Rasters: Ausblenden von Daten, vorübergehende Datenaufbewahrung und dauerhafte Anzeige. Das ausgeblendete Datenraster bleibt beim nächsten Klick vorübergehend erhalten. Das Raster, in dem die Daten vorübergehend gespeichert werden, wird beim nächsten Mal dauerhaft angezeigt oder ausgeblendet. Die Beurteilung basiert darauf, ob die zweimal hintereinander erhaltenen Daten gleich sind. Nach der dauerhaften Anzeige ist der Status nicht mehr änderbar und kann nur noch dauerhaft angezeigt werden. Zu diesem Zeitpunkt ist er für Klicks ungültig.

3: Die Zeitmessung beginnt, wenn nach dem Klicken auf die Startschaltfläche auf das erste Raster geklickt wird. Der Timer kann nicht gestoppt werden, bis das Spiel beendet ist oder Sie zum Neustarten auf „Aktualisieren“ klicken.

4: Daraus folgt, dass hier ein boolescher Wert benötigt wird, um aufzuzeichnen, ob das Spiel begonnen hat, den Startknopf abzulehnen und der Timer läuft, bis das Spiel beendet ist. Wenn das Spiel beendet ist, ändern Sie den booleschen Wert. Der Timer funktioniert nicht mehr, die Spielzeit wird angezeigt und die Startschaltfläche wird verfügbar.

Implementierung:

Die Tabelle wird per Skript erstellt und die darin enthaltenen Elemente werden zunächst standardmäßig als „“ leere Zeichenfolgen angezeigt. Wird durch entsprechenden Klick angezeigt. CSS-Stile können selbst festgelegt werden.

<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 ist eine Variable, die aufzeichnet, ob das Spiel gestartet werden kann

times zeichnet die verstrichene Zeit auf

trans zeichnet den Flip-Status jedes Gitters auf , jedes Array Das Raster hat drei Zustände: 0: ausgeblendet – 1: angezeigt (kann noch umgedreht werden) – 2: angezeigt (kann nicht umgedreht werden). Das heißt, jedes Element des Arrays hat nur drei mögliche Werte (0, 1, 2)

numArr Ein Array mit zufälliger Folge von dreißig Zahlen

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

Methode zum Erhalten von Elementen durch ID:

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

Das Folgende ist eine Funktion zum Erhalten von zwanzig Zufallszahlen, zehn gleichen Gruppen (siehe: Generieren von Zufallszahlen in einem angegebenen Bereich)

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

Das Erstellen von Tabellen und das Generieren von Zufallszahlen-Arrays sind alles vorbereitende Arbeiten.

Das Folgende ist die spezifische Logik:

Klicken Sie auf die Funktion, um das Spiel zu starten

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

Klicken Sie, um das Spiel zu starten, Sie müssen die spielbezogenen Parameter initialisieren. Beachten Sie, dass die Verarbeitung abgelehnt werden muss, wenn sie bereits gestartet wurde. Verwenden Sie die Sortierfunktion, um die Array-Elemente zu mischen, um Zufälligkeit zu erreichen.

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

Timing-Funktion

Wenn Sie auf das erste Raster klicken, müssen Sie mit dem Timing beginnen. NEW_START=false bedeutet, dass es gestartet wurde. Sie müssen sicherstellen, dass der Timer nur gestartet wird, wenn das Spiel läuft. Ruft sich einmal pro Sekunde auf und zeigt die verstrichene Zeit in Echtzeit über innerHTML an.

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

Klickfunktion für jedes Raster (sehr wichtig)

Klicken Sie nicht auf das Raster, bevor es startet (keine Auswirkung). Betreten Sie das Spiel und klicken Sie auf das erste Raster. Das Spiel beginnt und der Status ändert sich. NEW_START=false bedeutet, dass ein neues Spiel gestartet wurde und nicht erstellt werden kann. Der Timer startet.

Das nachfolgende Klickereignis muss das angeklickte Raster bestimmen, um unterschiedliche Logik zu verarbeiten:

Klicken Sie auf ein Element, das dauerhaft angezeigt wurde, und es wird keine Rückgabe verarbeitet.

Ein Klick auf ein Element, das gerade angezeigt wurde, aber nicht dauerhaft angezeigt wird, löst keine Rückgabe aus.

(Beachten Sie, dass Sie zur Bestimmung, ob dasselbe Element dasselbe Element ist, den Index in trans direkt über den Statuswert finden und vergleichen müssen.)

Klicken Sie auf das nicht angezeigte Element, um den Wert zu erhalten und vergleichen Sie es mit dem zuvor angezeigten Element. Vergleich: Wenn

gleich sind, wird der Statuswert des entsprechenden Index in trans auf 2 geändert, was darauf hinweist, dass

dauerhaft angezeigt wird Das neu angeklickte Element ist nicht gleich, der entsprechende Indexstatuswert in trans wird auf 1 (vorübergehend) geändert. Reserviert), der Indexwert des zuvor angeklickten Elements ist 0 (muss ausgeblendet werden).

Nachdem Sie den Statuswert festgelegt haben, müssen Sie die Anzeige sofort aktualisieren (refreshUI-Funktion). Bei der Aktualisierung der Anzeige erfolgt die Verarbeitung basierend auf dem Array trans, das den Statuswert aufzeichnet.

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

Stellen Sie die angezeigte Funktion „refreshUI“ ein

basierend auf dem Statuswert

根据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 + "秒";
    }
   }

通过数组和表格的配合，实现So implementieren Sie ein Zahlenvergleichsspiel mit Javascript，加深对表格创建和数组的运用。处理逻辑和数据显示分离，根据状态值做到不同显示的状态。

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

相关文章：

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

在Nginx中如何配置多站点vhost

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

使用mock.js生成随机数据

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

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Zahlenvergleichsspiel mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!