用Vue写的一个计时游戏，来源于脚本之家的代码，自己写了注释，修改了部分地方

脚本之家：http://www.jb51.net/article/91603.html

什么时候自己只需要掐掐手指，代码就写好了啊。哎哎哎，菜鸟好累

*html片段

<div>
	使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果顺序没有按对,会提示游戏结束.
</div>

<div id="play">
	<input type="number" v-model="num" lazy/><!--lazy让input响应延迟到input焦点改变-->
	<button v-on:click='arr'>开始</button>

	<div v-for="(index, item) in list">
		<template v-if="index % num == 0 && index!=0"><br><br><br></template>
		<div style="float: left;"><button class="ibutton" v-on:click='time(item)'>{{item}}</button></div>
	</div>
</div>

*js片段

var vm = new Vue({
	el: '#play',
	data: {
		num: 2, //默认值为生成2*2矩阵
		list: [], //生成的矩阵
		startTime: 0,
		endTime: 0,
		checkNum: 0 //点击的顺序，也就是当前的点击数字
	},
	methods: {
		arr: function() {
			if(this.num > 20) {
				alert('请不要大于20!'); //大于20怕浏览器死掉
				this.num = 2; //重置num默认值
				return;
			}
			var arrLength = this.num * this.num; //生成的矩阵的长度
			var arr = new Array(arrLength); //用来暂时储存矩阵
			var index = 0; //
			for(var i = 0; i < arrLength; i++) {
				//ceil向上取整，是为了产生一个0--num*num的数字，作为即将下一个按钮的数字
				var num = Math.ceil(Math.random() * arrLength);
				//第一次的时候，arr[0]最初为null，跳到else执行，第二次以后，都执行if语句。
				if(arr[0] != null) {
					//遍历数组arr，flag用来判断新生成的num是否有重复
					var flag = false;
					for(var j = 0; j < arr.length; j++) {
						//如果当前生成的num,有重复,标记flag为true
						if(num != arr[j]) {
							flag = true;
						} else {
							//如果没有重复,标记flag为false，并且跳出for循环，进行flag判断
							flag = false;
							break;
						}
					}
					//如果flag为true,把num推入arr中，如果为false，i--，就要重新生成一个num
					if(flag == true) {
						arr[index++] = num;
					} else {
						i--;
					}
				} else {
					//第一次的时候，index = 0，arr[0]最初为null，所以为arr[0]赋值，并且index + 1
					//arr[inedx] = num;
					//index += 1;
					arr[index++] = num;
				}

			}

			this.list = arr;
		},
		//传入item
		time: function(item) {
			//第一次,checkNum = 0,点击以后checkNum = 1,判断1是否等一当前的item
			//依次类推,item要比当前的checkNum大1

			//如果item 不等于 checkNum+1,说明顺序错误,checkNum重置为0
			if(this.checkNum + 1 != item) {
				alert("Game Over!");
				this.checkNum = 0;
				return;
			}
			var date = new Date();
			//item = 1说明第一步点击成功,所以,记录开始时间
			if(item == 1) {
				this.startTime = date.getTime();
			}
			//item = arrLength,说明是最后一个按钮,记录结束时间
			if(item == this.num * this.num) {
				this.endTime = date.getTime();
				var useTime = ((this.endTime - this.startTime) / 1000).toFixed(2); //toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
				alert(useTime + "秒");
				this.checkNum = 0;
				return;
			}
			//中间的数字,就把item 赋给当前的checkNum
			this.checkNum = item;
		}

	}
});

写好就是图片的样子啦，从1点到xx，看谁手速快嘛