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

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

numArr三十个数的随机序列数组

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

通过ID获取到元素的方法：

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

计时函数

在点击第一个格子时，就需要开始计时。NEW_START=false表示已经开始，需要确保只在游戏进行中时才计时。每秒调用自身一次，并通过innerHTML把所用时间实时显示出来。

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

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

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

相关推荐