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

<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>

var NEW_START = true;
  var times = 0;
  var trans = [];
  var numArr = [];

 function $(id) {
  return document.getElementById(id);
   }

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是十个互不相等的随机数 
    // newArr数组就是每个随机数都有两个的数组
    var newArr = new Array();
    for (var i = 0; i < arrLength; i++) {
     newArr[i] = arr[i];
     newArr[arrLength + i] = arr[i];
    }
    return newArr;
   }

<input type="button"
 id="startButton" 
value="开始游戏" 
onclick="init()">

function init() {
    //如果已经开始 拒绝点击
    if (NEW_START == false) {
     return;
    }
    //结束时用于显示时间的h4标签
    $('end').innerHTML = '';
    var count = rowlength * collength;
    //将每个格子的数据隐藏 初始化每个格子的翻转状态
    for (var i = 0; i < count; i++) {
     $('img' + i).innerHTML = '';
     trans[i] = 0;
    }
    //将游戏用时置为0
    times = 0;
    $('gametime').innerHTML = times + '秒';
    //获取随机的三十个数的随机序列数组 注意排序函数的使用
    numArr = getNum().sort(function () {
     return Math.random() - 0.5;
    });
    alert("已生成随机数，按表格顺序排列：" + numArr);
   }

用时：<span id="gametime">0秒</span>
 function countTime() {
    if (NEW_START == false) {
     setTimeout('countTime()', 1000);
     $('gametime').innerHTML = times + "秒";
     times++;
    }
   }

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

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 + "秒";
    }
   }