使用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 相关文章推荐
js取消单选按钮选中示例代码
Nov 14 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
angular.element方法汇总
Jan 07 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 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出错界面
2006/10/09 PHP
php中的比较运算符详解
2013/10/28 PHP
php判断是否为json格式的方法
2014/03/04 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
python分割和拼接字符串
2013/11/01 Python
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
python实现弹跳小球
2019/05/13 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
python中常用的数据结构介绍
2021/01/12 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
管理部部长岗位职责
2013/12/05 职场文书
办公室人员先进事迹
2014/01/27 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
服装店营销方案
2014/03/10 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
面试通知单大全
2015/04/20 职场文书
心术观后感
2015/06/11 职场文书
李强为自己工作观后感
2015/06/11 职场文书