使用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 相关文章推荐
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
原生JS实现留言板功能
Feb 08 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
js实现搜索提示框效果
Sep 05 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
Python 数据结构之旋转链表
2017/02/25 Python
Python批量更改文件名的实现方法
2017/10/29 Python
Python中协程用法代码详解
2018/02/10 Python
python调用百度语音REST API
2018/08/30 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
互联网创业计划书的书写步骤
2014/01/28 职场文书
学生会部长竞聘书
2014/03/31 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
电子专业自荐信
2014/07/01 职场文书
同意落户证明
2015/06/19 职场文书
个人业务学习心得体会
2016/01/25 职场文书