使用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. 百度地图api根据定位获取附近商家（只获取屏幕内）

    根据中心点坐标计算出屏幕2个点(一个最低经纬度,一个最高经纬度),判断这两个点中间的所有坐标的商家..考虑屏幕分辨率之类 移动地图中心点变动,如何异步刷新,判断商家是否已经存在..等... 百度地图a ...

  2. 十四、EnterpriseFrameWork框架核心类库之简易ORM

    在写本章前先去网上找了一下关于ORM的相关资料,以为本章做准备,发现很多东西今天才了解,所以在这里也对ORM做不了太深入的分析,但还是浅谈一下EFW框架中的设计的简易ORM:文中有一点讲得很有道理,D ...

  3. Til the Cows Come Home（最短路）

    Til the Cows Come Home Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I ...

  4. 【PRML读书笔记-Chapter1-Introduction】1.5 Decision Theory

    初体验: 概率论为我们提供了一个衡量和控制不确定性的统一的框架,也就是说计算出了一大堆的概率.那么,如何根据这些计算出的概率得到较好的结果,就是决策论要做的事情. 一个例子: 文中举了一个例子: 给定 ...

  5. SPI总线通信电路设计

    数据带宽＝(总线频率×数据位宽)÷8 B表示带宽,F表示存储器时钟频率,D表示存储器数据总线位数,则带宽为: B(峰值带宽)=F(时钟频率MHz)×D(总线位数bit)/8 例如,PC-100的SDR ...

  6. redmin3 忘记管理密码找回方法

    在网上找了一下都是redmine2的,而且比较复杂. 后来我看了一下redmin的数据库,如下: 注册一个新用户把admin的值改为1即可,就是管理员了. 如果忘记数据库密码,可以参考此文档修改数据库 ...

  7. NGUI Atlas

    打开 Atlas Maker:NGUI -> Open -> Atlas Maker 新建一个 "Icon Atlas" 生成3个东西:

  8. jsp,OGNL调用后台Action的某方法

    用%{}可取出valueStack中的Action,可直接调用其方法. %{testa('key')} 即可调用到action的testa(String s) 方法 但这些都需要结合struts2的标 ...

  9. Tools - Notepad++

    NotePad++ https://notepad-plus-plus.org/ 修改主题 依次点击设置---语言格式设置---选择主题,在显示界面中修改相关设置(背景色.前景色.字体等). 双文本横 ...

  10. Scrum 项目7.0--软件工程

    Sprint回顾   1.回顾组织   主题:“我们怎样才能在下个sprint中做的更好?” 时间:40分钟. 参与者:整个团队. 场所:电脑教室. 秘书:卢晓洵.   2.回顾流程 sprint总结 ...