使用vue编写一个点击数字计时小游戏
使用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前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于vue组件实现猜数字游戏
本文实例为大家分享了vue猜数字游戏的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>vue组件猜数字游戏</title> <script src="js/vue.js"></script> </head> <body> <div id
-
基于Vue.js实现数字拼图游戏
先来看看效果图: 功能分析 当然玩归玩,作为一名Vue爱好者,我们理应深入游戏内部,一探代码的实现.接下来我们就先来分析一下要完成这样的一个游戏,主要需要实现哪些功能.下面我就直接将此实例的功能点罗列在下了: 1.随机生成1~15的数字格子,每一个数字都必须出现且仅出现一次 2.点击一个数字方块后,如其上下左右有一处为空,则两者交换位置 3.格子每移动一步,我们都需要校验其是否闯关成功 4.点击重置游戏按钮后需对拼图进行重新排序 以上便是本实例的主要功能点,可见游戏功能并不复杂,我们只需一个个攻
-
使用vue.js编写蓝色拼图小游戏
之前在网上看到<蓝色拼图>这款小游戏,作者是用jquery写的.于是便考虑能不能用vue.js优雅简单的编写出来呢? Later equals never!说干就干.首先理解游戏的规则:第一关为1*1的方块,第二关为2*2以此类推 该图为第三关3*3的方块.点击一个小方块,该方块和它相邻的方块的的颜色会从黄色变为蓝色,全部变为蓝色就过关了. 现在规则清楚了,开动吧! /*style*/ .game_bg{ background: #333; width: 600px; height: 600p
-
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p
-
使用vue编写一个点击数字计时小游戏
使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果顺序没有按对,会提示游戏结束. 1.首先下载vue源码,下载地址http://cn.vuejs.org 2.jquery是在面向dom操作,而vue是面向数据操作的,所以使用vue最好不要去操作dom,尽量发挥出vue的独到之处,(如果使用过angularjs可能更容易理解) 3.建立一个普通的ht
-
Java使用定时器编写一个简单的抢红包小游戏
目录 1.新建项目 2. 添加 计时器,按钮组件 3.抢红包业务逻辑 4.效果演示 1.新建项目 2. 添加 计时器,按钮组件 <?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:widt
-
基于Python编写一个中秋节嫦娥投食小游戏
目录 游戏设计 1.游戏背景 2.功能设计 效果展示 代码素材 代码 素材 山河远阔,烟火人间,又一年,千里婵娟~ 今天给大家带来的是给玉兔投喂月饼的小游戏.八月十五中秋夜晚,让我们对着月亮许愿:希望我们在意和在意我们的人,诸邪避退.百事无忌.平安喜乐.万事胜意.提前祝大家中秋节快乐. 中秋节的起源 中秋节起源于上古时代,普及于汉代,定型于唐朝初年,盛行于宋朝以后.中秋节是秋季时令习俗的综合,其所包含的节俗因素,大都有古老的渊源.中秋节以月之圆兆人之团圆,为寄托思念故乡,思念亲人之情,祈盼丰收.
-
python实现井字棋小游戏
本文为大家分享了python实现井字棋小游戏,供大家参考,具体内容如下 周五晚上上了python的选修课,本来以为老师是从python的基础语法开始的,没想到是从turtle画图开始,正好补上了我以前一些不懂的地方,有人讲一下还是比啃书好一点. 之前从图书馆借了一本python游戏编程,看了前面几章后就没怎么看了,晚上突然想看看,然后跟着教程写个游戏的.最后就有了这个井字棋的诞生,其实代码并不是很长,主要是思路,需要考虑的周全一点.代码写完后就和电脑下了好久的井字棋,一局都没赢,真的是很无奈了,
-
VUE+Canvas实现财神爷接元宝小游戏
之前的canvas小游戏系列欢迎大家戳: <VUE实现一个Flappy Bird~~~> <猜单词游戏> <VUE+Canvas 实现桌面弹球消砖块小游戏> <VUE+Canvas实现雷霆战机打字类小游戏> 如标题,这个游戏大家也玩过,随处可见,左右方向键控制财神移动,接住从天而降的金元宝等,时间一到,则游戏结束.先来看一下效果: 相比于之前的雷霆战机要打出四处飞的子弹,这次元素的运动轨迹就很单一了,垂直方向的珠宝和水平移动的财神爷,类似于之前的代码,这里就
-
用js编写简单的贪吃蛇小游戏
本文实例为大家分享了js编写简单的贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 代码如下: HTML 5 部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
-
Python+Tkinter实现经典井字棋小游戏
目录 演示 介绍 官方文档 tkinter.messagebox 源码 演示 介绍 首先来介绍一下GUI库Tkinter 主要模块: tkinter Main Tkinter module. tkinter.colorchooser 让用户选择颜色的对话框. tkinter.commondialog 本文其他模块定义的对话框的基类. tkinter.filedialog 允许用户指定文件的通用对话框,用于打开或保存文件. tkinter.font 帮助操作字体的工具. tkinter.messa
-
利用Python编写简易版德州扑克小游戏
目录 德州扑克简要介绍 什么是德州扑克 游戏规则简要介绍 德州扑克游戏的python实现过程 游戏初始化 评选赢家 游戏主题函数 游戏体验与展示 模块不足与后续改进 德州扑克简要介绍 什么是德州扑克 德州扑克不知道大家是否玩过,它是起源于美国的得克萨斯州的一种博弈类卡牌游戏,英文名叫做Texas Hold’em Poker.玩法上又分为常规桌(Cash, 现金局),单桌赛(SNG)和多桌锦标赛(MTT).虽然扑克种类繁多,但基本的扑克规则通常保持一致.它是一种考验心态与谋略的游戏. 游戏规则简要
-
利用Java编写个"不贪吃蛇"小游戏
目录 前言 代码 蛇.药丸的抽象 游戏界面 启动类 游戏演示 最后 前言 我写的这个”贪吃蛇“和小时候玩的”贪吃蛇“有点不一样,以往的”贪吃蛇“吃了食物蛇身就会变长,而我写的这个吃了“食物”蛇身会变短,并且胜利条件就是“把蛇变没”,嘻嘻~ 这里的“食物”其实是“药丸”,初始时,蛇身很长,你要通过食用“药丸”,来让自己的身体变短,直到自己消失不见,你就获胜了. “药丸”共有三种,分别为“红色药丸.蓝色药丸.绿色药丸”,对应分值“5分.2分.1分”,蛇吃了“药丸”会减掉对应分值数量的身体,并累计分值
-
java编写的简单移动方块小游戏代码
本文实例讲述了java编写的简单移动方块小游戏代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 第一次用java编写图形化的界面,还是有些青涩..以后继续努力!!具体代码如下: //Little Box Game by AlexYui //Game.java By 1093710210@ HIT import javax.swing.*; import java.awt.event.*; import java.awt.geom.*; import java.awt.*; import