原生JS实现黑猩猩测试

零、体验游戏

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()}}