使用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. 电商大促准备流程v2

    1 概述 对于电商企业而言,每年都会有几次大的促销活动,像双十一.店庆等,对于第一次参加这个活动的新手,难免会有些没有头绪,因而将自己参加双十一.双十二活动中的过程心得进行下总结,一方面供以后工作中继 ...

  2. DevExpress XtraTreeList的复选框 禁用

    树的2个事件代码如下,通过节点的tag判断是否禁用节点前的复选框.树的节点加载时设置要禁用的节点tag为-1,不禁用的则设为相关的值 private void treeListPer_CustomDr ...

  3. 【开源框架】EFW框架中的系统权限与页面子权限详解

    回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://pan.baid ...

  4. MyBatis知多少（5）业务对象模型

    几乎所有结构良好的软件都使用了分层设计.分层设计将一个应用程序根据技术职能分为几 个内聚的部分,从而将某种特定技术或接口的实现细节与其他部分分离开来.分层设计可以用任 何一种强壮的编程语言来实现.图1 ...

  5. Java知多少（106）程序与数据库连接

    一个网络关系数据库应用系统是一个三层次结构.客户机与服务器采用网络连接,客户机端应用程序按通信协议与服务器端的数据库程序通信:数据库服务程序通过SQL命令与数据库管理系统通信. Java程序与数据库连 ...

  6. 什么是作用域链，什么是原型链，它们的区别，在js中它们具体指什么？

    什么是作用域链,什么是原型链. 作用域是针对变量的,比如我们创建了一个函数,函数里面又包含了一个函数,那么现在就有三个作用域 全局作用域==>函数1作用域==>函数2作用域 作用域的特点就 ...

  7. BEA-150021 - The admin server failed to authenticate the identity of the user username starting the managed server.

    原因:用户名.密码错误. 解决方法:修改boot.properties用户名密码为明文方式,然后重新启动就OK了,自动加密.

  8. GoodsAndStaffManagermentSystem----Sprint 计划1

    需求分析:茗仕茶业管理系统是个商品-员工综合管理系统. 员工管理:设置不同的职位,不同职位有不同访问权限.员工只能卖商品,财务员只有查看商品的库存量和商品销售记录:公司老板可以查看所有信息--    ...

  9. [团队项目]sprint3 & 团队贡献分

    希望各组认真准备,拿出最好的阵容最好的状态,展示一学期的学习与工作成果. 各组注意完成sprint3的博客,写上团队贡献分. 将演示PPT(如果有)和代码上传到github. 截止日期:2016.6. ...

  10. [C/C++][文件操作] 对比目录并列出同名较新文件、较旧文件 0.1

    主要是模仿robocopy的部分功能 (robocopy /L 参数可以列出本地目录和备份目录中的异同之处,主要是标记出:较新的.较旧的.多出的文件 ) 现在还不会写GUI,打算后面自己做目录树dif ...