脚本之家：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，看谁手速快嘛
