使用vue编写一个点击数字计时小游戏
使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果顺序没有按对,会提示游戏结束.
1.首先下载vue源码,下载地址http://cn.vuejs.org
2.jquery是在面向dom操作,而vue是面向数据操作的,所以使用vue最好不要去操作dom,尽量发挥出vue的独到之处,(如果使用过angularjs可能更容易理解)
3.建立一个普通的html文件,在头部引用vue的源文件
<head> <metacharset="utf-8"/> <title></title> <scripttype="text/javascript"src="js/vue.js"></script> </head>
4.简单的页面
1)首先v-model,数据的双向绑定,根据你文本框输入的值变化而变化.
2)@click绑定一个click事件,其中@是v-on的缩写.当然绑定事件可以带参数例如@click='time(item)'.
3)v-for="(index,item)inlist",循环数组,index为数组的角标,item为数组中的值.
可以看一下vue文档进一步了解.
<body>
<divid="play">
<span>输入数字,点击开始,会生成对应输入数字的表格,从表格中数字1开始点击,按顺序点击到最后....</span><br/>
<inputtype="number"v-model="num"/>
<button@click='arr'>开始</button>
<br/>
<divv-for="(index,item)inlist">
<templatev-if="index%num==0&&index!=0"><br><br><br></template>
<divstyle="float:left;"><buttonclass="ibutton"@click='time(item)'>{{item}}</button></div>
</div>
</div>
</body>
5.vue操作
1)首先要new出一个Vue的实例,el绑定你的dom,这里用id作为标识
2)data这是vue要操作的数据,num文本框的值(默认为2),list[]根据文本框值,生成的list,startTime点击表格的开始时间,endTime点击表格的结束时间,checkNum当前选中的数字.
3)methods中有两个方法arr用来根据文本框的值,生成一个数组,生成一个文本框值的平方长度,且不会重复的数组,数组的值为1-文本框值的平方,加入文本框的值为3,则生成的数组长度为9,数组的内容为1-9且不重复.
time计算点击的开始时间和结束时间,用check]Num来控制点击的顺序.
<script>
newVue({
el:'#play',
data:{
num:2,
list:[],
startTime:0,
endTime:0,
checkNum:0
},
methods:{
arr:function(){
if(this.num>20){
alert('数值过大,浏览器会死掉,最好不要大于20');
return;
}
this.checkNum=0;
vararrlength=this.num*this.num;
vararr=newArray(arrlength);
varindex=0;
for(vari=1;i<=arrlength;i++){
//生成随机数
varnum=Math.random();//Math.random()：得到一个0到1之间的随机数
num=Math.ceil(num*arrlength);//num*?的取值范围在0~?之间,使用向上取整就可以得到一个1~?的随机
if(arr[0]!=0){
varflag=false;//控制是否存在重复元素
//遍历生产数组中的元素
for(varj=0;j<arr.length;j++){
if(num!=arr[j]){
flag=true;
}else{
flag=false;
break;
}
}
if(flag==true){
arr[index++]=num;
}else{
//发现有重复元素重新产生新的随机数
i--;
}
}else{
arr[index++]=num;
}
}
this.list=arr;
},
time:function(item){
if(this.checkNum+1!=item){
alert('gameover');
this.checkNum=0;
return;
}
vardate=newDate();
if(item==1){
this.startTime=date.getTime();
}
if(item==this.num*this.num){
this.endTime=date.getTime();
varuseTime=((this.endTime-this.startTime)/1000).toFixed(2);
alert('使用了'+useTime+'秒');
this.checkNum=0;
return;
}
this.checkNum=item;
}
}
})
</script>
6.css代码
<style>
.ibutton{
margin-top:10px;
margin-left:10px;
color:#fff;
border:1pxsolid#8a6de9;
background-color:#8a6de9;
font-size:14px;
padding:6px12px;
border-radius:7px;
width:50px;
height:40px;
}
</style>
7.在某些特定的场景使用vue来完成一个功能要比jquery简单的多,但是jquery还是很强大的,根据不同的场景运用不同的技术,更快更好的完成自己想要的功能.
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。