使用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 日期时间函数(经典+完善+实用)
May 27 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
原生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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
UCenter Home二次开发指南
2009/05/28 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python单链表的简单实现方法
2014/09/23 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
Python列表元素常见操作简单示例
2019/10/25 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
Python操作Jira库常用方法解析
2020/04/10 Python
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
一套C++笔试题面试题
2012/06/06 面试题
一套C#面试题
2013/10/09 面试题
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
博士生专家推荐信
2015/03/25 职场文书
学校推普周活动总结
2015/05/07 职场文书
阿凡达观后感
2015/06/10 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书