用Vue写的一个计时游戏,来源于脚本之家的代码,自己写了注释,修改了部分地方
2016-11-24 21:01
387 查看
脚本之家:http://www.jb51.net/article/91603.html
什么时候自己只需要掐掐手指,代码就写好了啊。哎哎哎,菜鸟好累
*html片段
*js片段
写好就是图片的样子啦,从1点到xx,看谁手速快嘛
什么时候自己只需要掐掐手指,代码就写好了啊。哎哎哎,菜鸟好累
*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,看谁手速快嘛
相关文章推荐
- 用Vue的一个购物车(1),虽然是自己写的但是也是来源于脚本之家的案例,就算转载啦
- Ajax (部分二:prototype.js代码前半部)自己做的,总结页面向后台传Form值、单个值和后台向前台传一个或是一组值
- 分享一个单机游戏的NSIS封装包脚本代码
- U3D中在Grid中增加和修改Cell的部分代码 - 自己学习积累
- Ajax (部分二:prototype.js代码前半部)自己做的,总结页面向后台传Form值、单个值和后台向前台传一个或是一组值
- 昨天的排序算法我做了修改,注释部分我省略了,代码改动部分为第69-72行
- XRecyclerView实现RecyclerView下拉刷新上来加载 自己做了部分修改,使代码更简洁易用
- vue.js+node.js运行一个项目时,自己出错的地方
- 菜鸟:自己写了一个轮播代码供分为参考,如果有什么地方你有更好的方法,可以给我留言
- 解决tomcat 热部署问题,避免每次修改某一个小部分代码就得重启一次项目。浪费时间
- 汇编打字游戏程序(别人写的,我修改了部分,然后写了详细的注释)
- 简单完整的代码,通过这个代码你将对RSA加密算法在Java中的实现方法有一个初步的了解,这个类,你可以直接使用,水平高的,就自己修改完善下代码。
- 贴上自己的一个python写的去c语言注释的小脚本,以备后用
- 一个带有点击效果和计时功能可圆角的自定义Button(支持XML和代码修改属性)
- wince下,修改private下的代码,如何进行快速编译,比如之编译自己修改部分的代码
- 游戏服务端IOCP模型,自己封装的一个类,3行代码搞定服务端。
- vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。
- 一个统计自己代码行数的脚本
- idea 代码作者注释的修改地方
- 用C语言编写一个去除C代码中所有的注释的部分