使用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编写点击数字小游戏的更多相关文章
- Demo_2：Qt实现猜字小游戏
1 环境 系统:windows 10 代码编写运行环境:Qt Creator 4.4.1 (community) Github: 2 简介 参考视频:https://www.bilibili.co ...
- Vue编写的todolist小例子
Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...
- LY.猜字小游戏
猜字小游戏
- 用Java编写的猜拳小游戏
学习目标: 熟练掌握各种循环语句 例题: 代码如下: // 综合案例分析,猜拳案例 // isContinue为是否开始游戏时你所输入的值 char isContinue; //y为开始,n为借宿 S ...
- 使用vue+ivew做2048小游戏
首先先弄页面 废话不多说 上代码 静态页面代码 <template> <div class="main"> <div class="top& ...
- 用python+pyqt5语言编写的扫雷小游戏软件
github源码地址:https://github.com/richenyunqi/Mine-game ,撒娇打滚求star哦~~ღ( ´･ᴗ･` )比心 扫雷主界面模块 整个扫雷界面使用大量的白色方 ...
- 尝试用Vue.js开发网页小游戏的过程
准备 首先去官方下载并安装VSCODE,下载地址 https://code.visualstudio.com/.安装后打开会发现是英文版的,需要去安装插件来汉化.具体是在扩展插件搜索chinese,选 ...
- 用Java语言编写的迷宫小游戏软件
可查看本项目的github 源码链接,撒娇打滚求 star 哦~~ღ( ´･ᴗ･ ` )比心 本仓库代码是经过 eclipse 编译运行过的,一般情况下将本仓库代码下载下来之后,使用 eclipse ...
- python -猜字小游戏
代码运行效果如下: 注意: 1.必须要在python3环境想使用 2.QQ:3084276329(一起交流学习) 3.还请大家评论 Guess the word game代码如下: #! /usr/b ...
随机推荐
- How to debug Typescript in browser
How to debug typescript, In Chrome, we need to press F12, open settings, uncheck the Enable JavaScri ...
- 安卓开发笔记——自定义HorizontalScrollView控件（实现QQ5.0侧滑效果）
对于滑动菜单栏SlidingMenu,大家应该都不陌生,在市场上的一些APP应用里经常可以见到,比如人人网,FaceBook等. 前段时间QQ5.0版本出来后也采用了这种设计风格:(下面是效果图) 之 ...
- angularjs + seajs构建Web Form前端(一)
简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark Otto和Jacob Thornton合作开,是一个CSS/HTML框架. Angula ...
- zepto - reduce
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce var ss ...
- 【MVC 过滤器的应用】ASP.NET MVC 如何统计 Action 方法的执行时间
代码如下: using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; u ...
- AEM - Adobe CMS 扒坑记之始
AEM是Adobe公司所出的商业内容管理系统,全称阿豆比体验管理系统(Adobe Experience Manager),其前身叫CQ,分别有CQ5 CQ6两个大版本.它提供了整套的网站内容管理系统解 ...
- 使用DirectWrite测量Direct2D文字大小
转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 最近在使用Direct2D和DirectWrite写引擎,在引擎中需要实现文本标签控件.但是文本标签的尺寸最好不 ...
- ChartDirector应用笔记（二）
关于Simple Bar Chart Simple bar chart是XYChart大类中的Bar chart类型中的最简单的例子.Bar chart的表现形式简单直观,在数据量较少.数据维度简单等 ...
- 可拖动FPS显示框（UGUI）
简介 本来是想往上找一个可拖动FPS显示框的(我记得以前有人写过),然而搜了一个多小时都没搜到,索性自己写了一个,花费不到20分钟,看来还是自己动手丰衣足食啊 o(╯□╰)o 效果 上下的Toast不 ...
- 脊柱外科病人资料管理系统的界面设计分析(2)--JOA评分记录的实现
在上篇随笔<脊柱外科病人资料管理系统的界面设计分析>中介绍了一些常用的界面设计方面的内容,本篇继续上一篇,介绍脊柱外科病人管理系统的JOA评分记录模块的界面设计以及实现方面的内容. JOA ...