javascript实现数字配对游戏的实例讲解(3)

日期：2020-05-11 栏目：程序人生浏览：次

每个格子的点击函数（超重点）

在未开始时拒绝点击格子的(没有效果)。进入游戏点击第一个格子，游戏开始，状态改变，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 + "秒";
    }
   }

转载注明出处：https://www.heiqu.com/29.html

javascript实现数字配对游戏的实例讲解(3)

相关推荐