使用vue编写一个点击数字计时小游戏


Posted in Javascript onAugust 31, 2016

使用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>
  <meta charset="utf-8" />
  <title></title>
  <script type="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) in list",循环数组,index为数组的角标,item为数组中的值. 

可以看一下vue文档进一步了解. 

<body>
 <div id="play">
  <span>输入数字,点击开始,会生成对应输入数字的表格,从表格中数字1开始点击,按顺序点击到最后....</span><br />
  <input type="number" v-model="num" />
  <button @click='arr'>开始</button>
  <br />
  <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" @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>
 new Vue({
  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;
   var arrlength = this.num * this.num;
   var arr = new Array(arrlength);
   var index = 0;
   for(var i = 1; i <= arrlength; i++) {
   //生成随机数
   var num = Math.random(); //Math.random():得到一个0到1之间的随机数
   num = Math.ceil(num * arrlength); //num*?的取值范围在0~?之间,使用向上取整就可以得到一个1~?的随机
   if(arr[0] != 0) {
    var flag = false; // 控制是否存在重复元素
    // 遍历生产数组中的元素
    for(var j = 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('game over');
   this.checkNum = 0;
   return; 
   }
   var date = new Date();
   if(item == 1){
   this.startTime = date.getTime();
   }
   if(item == this.num * this.num){
   this.endTime = date.getTime();
   var useTime = ((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: 1px solid #8a6de9;
  background-color: #8a6de9;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 7px;
  width: 50px;
  height: 40px;
 }
</style>

7.在某些特定的场景使用vue来完成一个功能要比jquery简单的多,但是jquery还是很强大的,根据不同的场景运用不同的技术,更快更好的完成自己想要的功能.

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
原生js实现tab选项卡切换
Mar 23 #Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 #Javascript
Javascript日期格式化format函数的使用方法
Aug 30 #Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 #Javascript
AngularJS轻松实现双击排序的功能
Aug 30 #Javascript
jQuery simpleModal插件的使用介绍
Aug 30 #Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 #Javascript
You might like
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
js控制分页打印、打印分页示例
2014/02/08 Javascript
javascript几个易错点记录
2014/11/26 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
承诺书样本
2014/08/30 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
政协工作总结2015
2015/05/20 职场文书
暑期家教宣传单
2015/07/14 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP