javascript實現(xiàn)數(shù)字配對游戲的實例講解

更新時間：2017年12月14日 09:55:34 作者：悟空前端

下面小編就為大家分享一篇javascript實現(xiàn)數(shù)字配對游戲的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

游戲效果如下圖所示：

配對游戲

規(guī)則：

在4X5的格子中，有隨機的互不相等的10個數(shù)，每個數(shù)據(jù)有兩份（也就是20個數(shù)，有兩兩相等的十對）,隨機分布在20個格子中。游戲開始，彈出二十個數(shù)的序列。每次點擊格子會顯示當前格子中的數(shù)據(jù)并暫時保留顯示，直到下一次點擊，如果下一次點擊顯示的數(shù)據(jù)與保留的數(shù)據(jù)不同，則之前點擊保留的數(shù)據(jù)會消失(仍然存在于該格子但不顯示)。如果連續(xù)點擊顯示的兩個數(shù)據(jù)一樣，則兩個數(shù)據(jù)都會顯示并且不會再消失。

直到所有數(shù)據(jù)都通過連續(xù)點擊相同數(shù)據(jù)的方式顯示出來，就算游戲結(jié)束，報出游戲用時。此時可以點擊開始游戲或刷新來繼續(xù)。

分析：

1：二十個格子對應二十個數(shù)據(jù)，產(chǎn)生兩組相等的十個隨機數(shù)并放入數(shù)組，數(shù)組下標決定顯示位置。

2：每個格子的狀態(tài)的三種：數(shù)據(jù)隱藏，暫時保留數(shù)據(jù)和永久顯示。數(shù)據(jù)隱藏的格子通過點擊的下一次狀態(tài)是暫時保留。暫時保留數(shù)據(jù)的格子通過點擊下一次狀態(tài)是永久顯示或數(shù)據(jù)隱藏，這里要根據(jù)連續(xù)兩次獲取的數(shù)據(jù)是否相等來判斷。永久顯示之后狀態(tài)已經(jīng)不可變，只能永久顯示出來，此時對點擊是無效的。

3 :計時從點擊開始按鈕之后，點擊第一個格子時開始。直到游戲完成或點擊刷新重開，期間計時器不能停止。

4 :得出，這里需要一個布爾值，記錄游戲是否已經(jīng)開始，已經(jīng)開始的游戲?qū)﹂_始按鈕應該拒絕，計時器運行直到游戲完成。游戲完成時，改變布爾值，計時器停止工作，顯示游戲用時，開始按鈕可用。

實現(xiàn)：

表格通過script創(chuàng)建，其中的元素先默認顯示為“”空字符串。通過對應的點擊來顯示。CSS樣式可自行設定。

<table border:1>
  <script>
   var rowlength = 4;
   var collength = 5;
   var str = '';
   for (var i = 0; i < rowlength; i++) {
    str += '<tr>'
    for (var j = 0; j < collength; j++) {
     //這里將每個td的id拼接為imgxx xx為元素索引
     var index = i * collength + j;
     var id = "img" + index;
     //注意這里字符串 每個''是一個字符串進行輸出
      str += '<td id="' + id + '" onclick="showImg(' + index + ')">';
     str += '</td>';
    }
    str += '</tr>'
   }
   document.write(str);
  </script>
 </table>

NEW_START記錄是否可以開始游戲的變量

times記錄已用時間

trans記錄每個格子的翻轉(zhuǎn)狀態(tài) ,數(shù)組每個格子有三種狀態(tài) 0:隱藏-1:顯示(仍可翻轉(zhuǎn))-2:顯示(不可翻轉(zhuǎn))。也就是數(shù)組的每個元素只有三個可能的值0，1，2）

numArr三十個數(shù)的隨機序列數(shù)組

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

通過ID獲取到元素的方法：

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

下面通過函數(shù)獲取到二十個隨機數(shù)，兩兩相等的十組（可參見：生成指定范圍隨機數(shù)）

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是十個互不相等的隨機數(shù) 
    // newArr數(shù)組就是每個隨機數(shù)都有兩個的數(shù)組
    var newArr = new Array();
    for (var i = 0; i < arrLength; i++) {
     newArr[i] = arr[i];
     newArr[arrLength + i] = arr[i];
    }
    return newArr;
   }

創(chuàng)建表格，生成隨機數(shù)數(shù)組這些都是準備工作。

下面是具體的邏輯：

開始游戲的點擊函數(shù)

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

點擊開始游戲，需要初始化游戲相關(guān)的參數(shù)，注意如果已經(jīng)開始，就需要拒絕處理。將數(shù)組元素用排序函數(shù)打亂做到隨機性。

function init() {
    //如果已經(jīng)開始 拒絕點擊
    if (NEW_START == false) {
     return;
    }
    //結(jié)束時用于顯示時間的h4標簽
    $('end').innerHTML = '';
    var count = rowlength * collength;
    //將每個格子的數(shù)據(jù)隱藏 初始化每個格子的翻轉(zhuǎn)狀態(tài)
    for (var i = 0; i < count; i++) {
     $('img' + i).innerHTML = '';
     trans[i] = 0;
    }
    //將游戲用時置為0
    times = 0;
    $('gametime').innerHTML = times + '秒';
    //獲取隨機的三十個數(shù)的隨機序列數(shù)組 注意排序函數(shù)的使用
    numArr = getNum().sort(function () {
     return Math.random() - 0.5;
    });
    alert("已生成隨機數(shù)，按表格順序排列：" + numArr);
   }

計時函數(shù)

在點擊第一個格子時，就需要開始計時。NEW_START=false表示已經(jīng)開始，需要確保只在游戲進行中時才計時。每秒調(diào)用自身一次，并通過innerHTML把所用時間實時顯示出來。

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

每個格子的點擊函數(shù)（超重點）

在未開始時拒絕點擊格子的(沒有效果)。進入游戲點擊第一個格子，游戲開始，狀態(tài)改變，NEW_START=false表示已經(jīng)開始不可創(chuàng)建新游戲。計時開始。

后面的點擊事件就需要判斷點擊的格子來處理不同的邏輯：

點擊已永久顯示的元素，不處理return。

點擊剛顯示但不是永久顯示的元素，也不處理return。

（注意這里判斷是不是同一元素是直接通過狀態(tài)值在trans中將索引index查找出來后對比）

點擊未顯示元素，獲取值，與前一個顯示的元素對比：

相等，都將trans中對應索引的狀態(tài)值改為2，表示永久顯示

不等，新點擊元素在trans中對應索引狀態(tài)值改為1(暫時保留)，前一個點擊的元素索引值為0(需要隱藏)。

設置完狀態(tài)值，就立馬需要更新顯示(refreshUI函數(shù))。更新顯示時根據(jù)記錄狀態(tài)值的數(shù)組trans來操作的。

function showImg(index) {
    //未點擊開始，還未初始化，退出
    if (numArr[0] == undefined) {
     return;
    }
    //初次點擊進入，開啟計時
    if (NEW_START) {
     NEW_START = false;
     countTime();
    }
    //1-點擊已經(jīng)徹底顯示的元素 退出
    if (trans[index] == 2) {
     return;
    }
    //將點擊的格子的元素顯示出來，并改變翻轉(zhuǎn)狀態(tài)
    //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();
   }

根據(jù)狀態(tài)值設置顯示的函數(shù)refreshUI

根據(jù)trans中每個元素的值，改變對應索引的格子的值。注意，如果格子的數(shù)據(jù)永久顯示，需要記錄已經(jīng)永久顯示的格子的數(shù)量，當?shù)扔谒懈褡訑?shù)量時，表示已經(jīng)全部顯示。需要判定游戲結(jié)束，顯示出游戲用時。

function refreshUI() {
    //此處用fore循環(huán)會最后存在一個undefined
    //count記錄已經(jīng)被徹底顯示的個數(shù)
    var count = 0;
    for (var i = 0; i < trans.length; i++) {
     if (trans[i] == 0) {
      $('img' + i).innerHTML = '';
     }
     if (trans[i] == 1) {
      $('img' + i).innerHTML = numArr[i];
     }
     if (trans[i] == 2) {
      $('img' + i).innerHTML = numArr[i]
      count++;
     }
    }
    if (count == collength * rowlength) {
     NEW_START = true;
     var endTime = times;
     $('end').innerHTML = '用時' + endTime + '秒！！游戲結(jié)束，點擊開始游戲繼續(xù)';
     $('gametime').innerHTML = endTime + "秒";
    }
   }

通過數(shù)組和表格的配合，實現(xiàn)配對游戲，加深對表格創(chuàng)建和數(shù)組的運用。處理邏輯和數(shù)據(jù)顯示分離，根據(jù)狀態(tài)值做到不同顯示的狀態(tài)。

以上這篇javascript實現(xiàn)數(shù)字配對游戲的實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: