零、體驗(yàn)游戲

http://aring.3vfree.net/game/Chimpanzee-Test/index.html

一、實(shí)現(xiàn)效果

?

二、實(shí)現(xiàn)過程

看上圖實(shí)現(xiàn)效果，大致的思路梳理：

1.設(shè)定一個表格，初始隱藏所有單元格

2.隨機(jī)給單元格賦值以及添加邊框

3.根據(jù)游戲難度等級循環(huán)賦值單元格

4.賦值完畢后為單元格添加點(diǎn)擊事件以判斷點(diǎn)擊結(jié)果

5.判定嘗試次數(shù)以及繼續(xù)游戲/重新游戲功能

?

梳理好思路開始寫腳本：

第一步

實(shí)現(xiàn)讓單元格隨機(jī)顯示在表格中，如下圖

首先，獲取所有<td>標(biāo)簽，然后隨機(jī)指定需要賦值的td，我這里做了30個單元格所以隨機(jī)0~29

const td = document.getElementsByTagName("td") // 單元格// 隨機(jī)指定需要賦值的tdfunction randomTd() {const tdIndex = Math.floor(Math.random() * 29)return td[tdIndex]}

然后根據(jù)等級循環(huán)給td賦值

循環(huán)獲取上文隨機(jī)得到的td，然后給td設(shè)定文本為i，即第幾次循環(huán)，td的文本就是幾

然后給td加上設(shè)定好的邊框class

最后，給每個td單獨(dú)添加一個點(diǎn)擊事件，并傳參循環(huán)次數(shù)i 和該td本身，用以判斷點(diǎn)擊時的結(jié)果

let level = 6 // 等級// 根據(jù)等級循環(huán)給td賦值function tdAssignment() {for (let i = 1; i < level; i++) {let slTd = randomTd()slTd.innerText = islTd.classList.add("td-border")}}

但是這上文會出現(xiàn)一個問題，假如隨機(jī)的td重復(fù)了怎么辦呢？

為了解決這個問題可以循環(huán)判斷td 當(dāng)前文本不為空，即：假設(shè)td當(dāng)前的文本已經(jīng)被賦值，則再次隨機(jī)，用循環(huán)是為了重復(fù)判斷

for (let i = 0; slTd.innerText != ""; i++) { // 將要賦值的td如果不為空，則再次隨機(jī)td的indexslTd = randomTd()}

將該判斷到tdAssignment()中?

// 根據(jù)等級循環(huán)給td賦值function tdAssignment() {for (let i = 1; i < level; i++) {let slTd = randomTd()for (let i = 0; slTd.innerText != ""; i++) { // 將要賦值的td如果不為空，則再次隨機(jī)td的indexslTd = randomTd()}slTd.innerText = islTd.classList.add("td-border")}}

因此開始游戲按鈕中的函數(shù)直接執(zhí)行上文兩個函數(shù)即可

// 游戲開始function gameStart() {randomTd()tdAssignment()}

第二步

上文所說已經(jīng)為td賦值了文本，接下來是定義td的點(diǎn)擊事件

開始理思路：

1.給td 賦值的同時，添加點(diǎn)擊事件

2.將td 賦的值和自身傳給結(jié)果判斷的函數(shù)中

即

slTd.onclick = function() { // 為每個td添加點(diǎn)擊事件gameResult(i, this)}

3.定義一個點(diǎn)擊次數(shù)的變量，初始為1，意為第一次點(diǎn)擊

4.開始寫判斷結(jié)果的函數(shù)，很簡單，得到傳過來的參數(shù) i ，將參數(shù) i 和 count對比，如果是相同的，就隱藏對應(yīng)的 td，并且將點(diǎn)擊次數(shù)+1

// 點(diǎn)擊后判斷結(jié)果function gameResult(index, obj) {if (index == count) { // 判斷td的值是否等于點(diǎn)擊次數(shù)obj.classList.add("hidden")}count++ // 每次點(diǎn)擊完，點(diǎn)擊次數(shù)+1}

5.然后判斷是否過關(guān)，即點(diǎn)擊完所有數(shù)字，加一個判斷，當(dāng)參數(shù) i ==?等級時，就是正確點(diǎn)擊了最后一個數(shù)字

順便加上失敗判斷，以及切換結(jié)果頁的函數(shù)goResult

// 點(diǎn)擊后判斷結(jié)果function gameResult(index, obj) {if (index == count) { // 判斷td的值是否等于點(diǎn)擊次數(shù)obj.classList.add("hidden")if (index == level - 1) {// 勝利isSuc = 1goResult()}} else {// 失敗isSuc = 0tryCount++goResult()}count++}

6.開始第一次點(diǎn)擊時，隱藏所有td ，采用遍歷 td 將選中的td （判斷其是否有邊框即可） 為其添加一個新的class

加上level限制是為了第一次開始游戲時作為教程關(guān)卡不隱藏td

if (index == 1 && level > 6) { // 第一次點(diǎn)擊時隱藏td(第一次開始游戲時不隱藏td)for (let i of td) {if (i.className == "td-border")i.classList.add("td-shade")}}

第三步

結(jié)果頁的效果如下圖

都是一些簡單的寫入?yún)?shù)的操作，這里不贅述，結(jié)合上文定義一個嘗試次數(shù)(tryCount)，當(dāng)嘗試次數(shù)達(dá)到3次時改變按鈕文本為重新開始即可

第四步

重置游戲/繼續(xù)游戲（上圖“繼續(xù)”按鈕的功能）

最后的功能完善，同時也需要配合完善上文函數(shù)中的細(xì)節(jié)

1.首先遍歷每個td，清空其class、文本和點(diǎn)擊事件

for (let i of td) { // 遍歷td以重置td的class、文本和點(diǎn)擊事件i.classList.remove("td-border")i.classList.remove("td-shade")i.classList.remove("hidden")i.innerText = ""i.onclick = null // 清理td的點(diǎn)擊事件}

2.轉(zhuǎn)到結(jié)果頁面時，需要重置點(diǎn)擊次數(shù)為1

3.判斷嘗試次數(shù)是否達(dá)到3次，如是，重置到開始頁面；

如不是，根據(jù)是否勝利，勝利則加大難度/重置嘗試次數(shù) 開始游戲，失敗則保持當(dāng)前難度繼續(xù) 開始游戲

完整代碼如下

// 重置游戲(繼續(xù)/重新開始)function gameReset(isCheater) {for (let i of td) { // 遍歷td以重置td的class、文本和點(diǎn)擊事件i.classList.remove("td-border")i.classList.remove("td-shade")i.classList.remove("hidden")i.innerText = ""i.onclick = null // 清理td的點(diǎn)擊事件}count = 1 // 重置點(diǎn)擊次數(shù)if (tryCount == 3) { // 嘗試次數(shù)達(dá)到最高次數(shù)result.classList.add("hide")cheater.classList.add("hide")info.classList.remove("hide")level = 6tryCount = 0} else {if (isSuc == 1) { // 如果勝利level++tryCount = 0gameStart()} else gameStart()}}

?

總結(jié)

以上是生活随笔為你收集整理的原生JS实现黑猩猩测试的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。