零、體驗游戲

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

一、實現效果

?

二、實現過程

看上圖實現效果，大致的思路梳理：

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

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

3.根據游戲難度等級循環賦值單元格

4.賦值完畢后為單元格添加點擊事件以判斷點擊結果

5.判定嘗試次數以及繼續游戲/重新游戲功能

?

梳理好思路開始寫腳本：

第一步

實現讓單元格隨機顯示在表格中，如下圖

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

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

然后根據等級循環給td賦值

循環獲取上文隨機得到的td，然后給td設定文本為i，即第幾次循環，td的文本就是幾

然后給td加上設定好的邊框class

最后，給每個td單獨添加一個點擊事件，并傳參循環次數i 和該td本身，用以判斷點擊時的結果

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

但是這上文會出現一個問題，假如隨機的td重復了怎么辦呢？

為了解決這個問題可以循環判斷td 當前文本不為空，即：假設td當前的文本已經被賦值，則再次隨機，用循環是為了重復判斷

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

將該判斷到tdAssignment()中?

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

因此開始游戲按鈕中的函數直接執行上文兩個函數即可

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

第二步

上文所說已經為td賦值了文本，接下來是定義td的點擊事件

開始理思路：

1.給td 賦值的同時，添加點擊事件

2.將td 賦的值和自身傳給結果判斷的函數中

即

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

3.定義一個點擊次數的變量，初始為1，意為第一次點擊

4.開始寫判斷結果的函數，很簡單，得到傳過來的參數 i ，將參數 i 和 count對比，如果是相同的，就隱藏對應的 td，并且將點擊次數+1

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

5.然后判斷是否過關，即點擊完所有數字，加一個判斷，當參數 i ==?等級時，就是正確點擊了最后一個數字

順便加上失敗判斷，以及切換結果頁的函數goResult

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

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

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

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

第三步

結果頁的效果如下圖

都是一些簡單的寫入參數的操作，這里不贅述，結合上文定義一個嘗試次數(tryCount)，當嘗試次數達到3次時改變按鈕文本為重新開始即可

第四步

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

最后的功能完善，同時也需要配合完善上文函數中的細節

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

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

2.轉到結果頁面時，需要重置點擊次數為1

3.判斷嘗試次數是否達到3次，如是，重置到開始頁面；

如不是，根據是否勝利，勝利則加大難度/重置嘗試次數 開始游戲，失敗則保持當前難度繼續 開始游戲

完整代碼如下

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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。