游戲效果如下圖所示：
規則：
在4X5的格子中，有隨機的互不相等的10個數，每個數據有兩份（也就是20個數，有兩兩相等的十對）,隨機分布在20個格子中。游戲開始，彈出二十個數的序列。每次點擊格子會顯示當前格子中的數據并暫時保留顯示，直到下一次點擊，如果下一次點擊顯示的數據與保留的數據不同，則之前點擊保留的數據會消失(仍然存在于該格子但不顯示)。如果連續點擊顯示的兩個數據一樣，則兩個數據都會顯示并且不會再消失。
直到所有數據都通過連續點擊相同數據的方式顯示出來，就算游戲結束，報出游戲用時。此時可以點擊開始游戲或刷新來繼續。
分析：
1：二十個格子對應二十個數據，產生兩組相等的十個隨機數并放入數組，數組下標決定顯示位置。
2：每個格子的狀態的三種：數據隱藏，暫時保留數據和永久顯示。數據隱藏的格子通過點擊的下一次狀態是暫時保留。暫時保留數據的格子通過點擊下一次狀態是永久顯示或數據隱藏，這里要根據連續兩次獲取的數據是否相等來判斷。永久顯示之后狀態已經不可變，只能永久顯示出來，此時對點擊是無效的。
3 :計時從點擊開始按鈕之后，點擊第一個格子時開始。直到游戲完成或點擊刷新重開，期間計時器不能停止。
4 :得出，這里需要一個布爾值，記錄游戲是否已經開始，已經開始的游戲對開始按鈕應該拒絕，計時器運行直到游戲完成。游戲完成時，改變布爾值，計時器停止工作，顯示游戲用時，開始按鈕可用。
實現：
表格通過script創建，其中的元素先默認顯示為“”空字符串。通過對應的點擊來顯示。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記錄每個格子的翻轉狀態 ,數組每個格子有三種狀態 0:隱藏-1:顯示(仍可翻轉)-2:顯示(不可翻轉)。也就是數組的每個元素只有三個可能的值0，1，2）
numArr三十個數的隨機序列數組
var NEW_START = true; var times = 0; var trans = []; var numArr = [];
通過ID獲取到元素的方法：
function $(id) { return document.getElementById(id); }下面通過函數獲取到二十個隨機數，兩兩相等的十組（可參見：生成指定范圍隨機數）
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; }創建表格，生成隨機數數組這些都是準備工作。
下面是具體的邏輯：
開始游戲的點擊函數
<input type="button" id="startButton" value="開始游戲" onclick="init()">
點擊開始游戲，需要初始化游戲相關的參數，注意如果已經開始，就需要拒絕處理。將數組元素用排序函數打亂做到隨機性。
function init() { //如果已經開始 拒絕點擊 if (NEW_START == false) { return; } //結束時用于顯示時間的h4標簽 $('end').innerHTML = ''; var count = rowlength * collength; //將每個格子的數據隱藏 初始化每個格子的翻轉狀態 for (var i = 0; i < count; i++) { $('img' + i).innerHTML = ''; trans[i] = 0; } //將游戲用時置為0 times = 0; $('gametime').innerHTML = times + '秒'; //獲取隨機的三十個數的隨機序列數組 注意排序函數的使用 numArr = getNum().sort(function () { return Math.random() - 0.5; }); alert("已生成隨機數，按表格順序排列：" + numArr); }計時函數
在點擊第一個格子時，就需要開始計時。NEW_START=false表示已經開始，需要確保只在游戲進行中時才計時。每秒調用自身一次，并通過innerHTML把所用時間實時顯示出來。
用時：<span id="gametime">0秒</span> function countTime() { if (NEW_START == false) { setTimeout('countTime()', 1000); $('gametime').innerHTML = times + "秒"; times++; } }每個格子的點擊函數（超重點）
在未開始時拒絕點擊格子的(沒有效果)。進入游戲點擊第一個格子，游戲開始，狀態改變，NEW_START=false表示已經開始不可創建新游戲。計時開始。
后面的點擊事件就需要判斷點擊的格子來處理不同的邏輯：
點擊已永久顯示的元素，不處理return。
點擊剛顯示但不是永久顯示的元素，也不處理return。
（注意這里判斷是不是同一元素是直接通過狀態值在trans中將索引index查找出來后對比）
點擊未顯示元素，獲取值，與前一個顯示的元素對比：
相等，都將trans中對應索引的狀態值改為2，表示永久顯示
不等，新點擊元素在trans中對應索引狀態值改為1(暫時保留)，前一個點擊的元素索引值為0(需要隱藏)。
設置完狀態值，就立馬需要更新顯示(refreshUI函數)。更新顯示時根據記錄狀態值的數組trans來操作的。
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(); }根據狀態值設置顯示的函數refreshUI
根據trans中每個元素的值，改變對應索引的格子的值。注意，如果格子的數據永久顯示，需要記錄已經永久顯示的格子的數量，當等于所有格子數量時，表示已經全部顯示。需要判定游戲結束，顯示出游戲用時。
function refreshUI() { //此處用fore循環會最后存在一個undefined //count記錄已經被徹底顯示的個數 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 + '秒??！游戲結束，點擊開始游戲繼續'; $('gametime').innerHTML = endTime + "秒"; } }通過數組和表格的配合，實現配對游戲，加深對表格創建和數組的運用。處理邏輯和數據顯示分離，根據狀態值做到不同顯示的狀態。
以上這篇javascript實現數字配對游戲的實例講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
