使用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 String 的扩展方法集合
Jun 01 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
JavaScript字符串对象
Jan 14 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 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
小偷PHP+Html+缓存
2006/12/20 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
详解Vue.js中.native修饰符
2018/04/24 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python中list初始化方法示例
2016/09/18 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
python占位符输入方式实例
2019/05/27 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
专科毕业生学习生活的自我评价
2013/10/26 职场文书
物业招聘计划书
2014/01/10 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL