您好,登錄后才能下訂單哦!
小編給大家分享一下如何使用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ù)的方式顯示出來,就算游戲結束,報出游戲用時。此時可以點擊開始游戲或刷新來繼續(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記錄每個格子的翻轉狀態(tài) ,數(shù)組每個格子有三種狀態(tài) 0:隱藏-1:顯示(仍可翻轉)-2:顯示(不可翻轉)。也就是數(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()">
點擊開始游戲,需要初始化游戲相關的參數(shù),注意如果已經(jīng)開始,就需要拒絕處理。將數(shù)組元素用排序函數(shù)打亂做到隨機性。
function init() { //如果已經(jīng)開始 拒絕點擊 if (NEW_START == false) { return; } //結束時用于顯示時間的h5標簽 $('end').innerHTML = ''; var count = rowlength * collength; //將每個格子的數(shù)據(jù)隱藏 初始化每個格子的翻轉狀態(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; } //將點擊的格子的元素顯示出來,并改變翻轉狀態(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)全部顯示。需要判定游戲結束,顯示出游戲用時。
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 + '秒?。∮螒蚪Y束,點擊開始游戲繼續(xù)'; $('gametime').innerHTML = endTime + "秒"; } }
通過數(shù)組和表格的配合,實現(xiàn)配對游戲,加深對表格創(chuàng)建和數(shù)組的運用。處理邏輯和數(shù)據(jù)顯示分離,根據(jù)狀態(tài)值做到不同顯示的狀態(tài)。
看完了這篇文章,相信你對“如何使用javascript實現(xiàn)數(shù)字配對游戲”有了一定的了解,如果想了解更多相關知識,歡迎關注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。