使用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编写点击数字小游戏的更多相关文章

  1. Demo_2：Qt实现猜字小游戏

    1  环境 系统:windows 10 代码编写运行环境:Qt Creator 4.4.1 (community) Github: 2  简介 参考视频:https://www.bilibili.co ...

  2. Vue编写的todolist小例子

    Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...

  3. LY.猜字小游戏

    猜字小游戏

  4. 用Java编写的猜拳小游戏

    学习目标: 熟练掌握各种循环语句 例题: 代码如下: // 综合案例分析,猜拳案例 // isContinue为是否开始游戏时你所输入的值 char isContinue; //y为开始,n为借宿 S ...

  5. 使用vue+ivew做2048小游戏

    首先先弄页面 废话不多说 上代码 静态页面代码 <template> <div class="main"> <div class="top& ...

  6. 用python+pyqt5语言编写的扫雷小游戏软件

    github源码地址:https://github.com/richenyunqi/Mine-game ,撒娇打滚求star哦~~ღ( ´･ᴗ･` )比心 扫雷主界面模块 整个扫雷界面使用大量的白色方 ...

  7. 尝试用Vue.js开发网页小游戏的过程

    准备 首先去官方下载并安装VSCODE,下载地址 https://code.visualstudio.com/.安装后打开会发现是英文版的,需要去安装插件来汉化.具体是在扩展插件搜索chinese,选 ...

  8. 用Java语言编写的迷宫小游戏软件

    可查看本项目的github 源码链接,撒娇打滚求 star 哦~~ღ( ´･ᴗ･ ` )比心 本仓库代码是经过 eclipse 编译运行过的,一般情况下将本仓库代码下载下来之后,使用 eclipse ...

  9. python -猜字小游戏

    代码运行效果如下: 注意: 1.必须要在python3环境想使用 2.QQ:3084276329(一起交流学习) 3.还请大家评论 Guess the word game代码如下: #! /usr/b ...

随机推荐

  1. Eclipse中用Logcat调试程序

    调试程序的一种方法是用Logcat程序,在Eclipse中windows->show view->other->android->logcat可打开. 然后程序加入androi ...

  2. 免费国内外"代码托管服务器"收集

      国内 开源中国  http://git.oschina.net/  支持git 淘宝code  http://code.taobao.org/  支持svn 京东code  https://cod ...

  3. CSS HACK 及常见问题

    一.CSS常用hack 1.方式一:条件注释法 这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式.举例如下 只在IE下生效 <!--[if IE]> 这段文字只在IE ...

  4. 我的第一个Socket程序-SuperSocket使用入门(三)

    本来博客都停了,不打算更了,但今天百度一个socket的问题时无意间发现第一篇的socket文章权重仅次于SuperSocket网站,顿时觉得自己6到不行,再写一篇,讨论下数据持久化的问题 去年搞那个 ...

  5. linux 环境变量设置及查看

    1. 显示环境变量HOME $ echo $HOME /home/redbooks 2. 设置一个新的环境变量hello $ export HELLO="Hello!" $ ech ...

  6. CentOS 6.4 快速安装Nginx笔记

    CentOS 6.4 快速安装Nginx笔记 本系列文章由ex_net(张建波)编写,转载请注明出处. http://blog.csdn.net/ex_net/article/details/9860 ...

  7. ionic 添加应用图标与启动页

    由于手机有很多不同的尺寸与版本,所以图标尺寸也是大小不一,但是如果手动每一个尺寸都制作一个图标,那估计美工会吐血吧,不过幸好,ionic只需要一个图标就可以制作不同尺寸的图标. 添加一个ionic项目 ...

  8. [OpenCV] Face Detection

    即将进入涉及大量数学知识的阶段,先读下“别人家”的博文放松一下. 读罢该文,基本能了解面部识别领域的整体状况. 后生可畏. 结尾的Google Facenet中的2亿数据集,仿佛隐约听到:“你们都玩儿 ...

  9. [OpenCV] Install openCV in Qt Creator

    Learn openCV.pdf qmake: link with opencv (Key Point) QT += core gui greaterThan(QT_MAJOR_VERSION, 4) ...

  10. 设计师必备！免费下载 PSD 素材的32个网站

    今天我想和大家分享一组可以免费下载 PSD 图形素材的最好的网站. PSD 文件是非常有用的资源,因为你可以看到所有的层,使用了什么技术来创建出这些作品和效果. 某些列出的网站可能已是众所周知的,但你 ...