使用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 相关文章推荐
jQuery 遍历json数组的实现代码
Sep 22 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
详解vue 命名视图
Aug 14 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
js实现简易拖拽的示例
Oct 26 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 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
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
JsRender for object语法简介
2014/10/31 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
Python fileinput模块使用实例
2015/06/03 Python
简单了解Django模板的使用
2017/12/20 Python
Python中常见的异常总结
2018/02/20 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Python json转字典字符方法实例解析
2020/04/13 Python
详解python UDP 编程
2020/08/24 Python
初中军训感想300字
2014/03/05 职场文书
合作投资意向书
2014/04/01 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
婚礼答谢词
2015/01/04 职场文书
返乡农民工证明
2015/06/24 职场文书
物资采购管理制度
2015/08/06 职场文书