Vue.js小游戏:测试CF打狙速度
此项目只测试反应速度,即手点击鼠标的反应速度
html代码
<div id="top">请等待图片变颜色,颜色便的那一刻即可点击测手速</div>
<div id="mybody" v-bind:style="{backgroundColor:bgcolor}">
<div id="myBtn" v-on:click="myclick">点我测手速</div>
</div>
js代码
//定义一个全局变量,用于记录上一次执行的时间
var lasttime = new Date();
var myModel = {bgcolor:'green'};
var myViewModel = new Vue({
el:'#mybody',
data:myModel,
methods:{
myclick:function(){
now = new Date();
dif = now - lasttime -170;
if(dif<150){
alert('你反应速度:'+dif+',如果你不是神,那就是碰巧点了鼠标,不是真正的实力!');
}else if(dif<200){
alert('你反应速度:'+dif+',正常');
}else if(dif<300){
alert('你反应速度:'+dif+',还可以!');
}else if(dif<400){
alert('你反应速度:'+dif+',可以试一下睡一觉,精神好点再来');
}else{
alert('你反应速度:'+dif+',你睡着了吗?');
}
}
}
});
function changeBgColor(){
myModel.bgcolor= 'rgb' + '(' + Math.ceil(Math.random() * 245) + ',' + Math.ceil(Math.random() * 245) + ',' + Math.ceil(Math.random() * 245) + ')';
//这是,最小极限为3秒,最大极限为12+3秒的算法
time = Math.random()*12*1000+3000;
setTimeout(changeBgColor,time);
lasttime = new Date();
}
//定时函数有2个(settimeout,setInterval)
/**
* settimeout(指定时间,执行1次,但是可以执行结束后,再1次,而且时间可以配置)
* setInterval(固定时间,反复循环执行)
*/
setTimeout(changeBgColor,5000);
css代码
html,body{
width: 100%;/* 配合垂直居中3 */
height: 100%;/* 配合垂直居中4 */
margin:;/* 防止出现小幅度的滚动栏 */
padding:;/* 防止出现小幅度的滚动栏 */
}
#top{
text-align: center;
color:red;
font-size:30px;
display:block;
margin:20px auto;
}
#mybody{
background-color: red;
width: 300px;
height: 350px;
/*问题:布局的居中,内容的居中*/
/* 布局的居中1,水平 */
margin: 0 auto;
/* 配合垂直居中1 *position: relative;/
/* 配合垂直居中2 * top:20%;/
/* 内容的居中 */
text-align: center;/* 内容的水平居中 */
line-height: 350px;/* 内容的垂直居中 */
}
#myBtn{
width:100px;
height:80px;
margin: 0 auto;
color:#FFF;
background-color: blue;
text-align: center;/* 内容的水平居中 */
line-height: 100px;/* 内容的垂直居中 */ }
Vue.js小游戏:测试CF打狙速度的更多相关文章
- 一个js小游戏----总结
花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用web ...
- JS小游戏:贪吃蛇(附源码)
javascript小游戏:贪吃蛇 此小游戏采用的是面向对象的思想,将蛇,食物,和游戏引擎分为3个对象来写的. 为方便下载,我把js写在了html中, 源码中暂时没有注释,等有空我在添加点注释吧. 游 ...
- vue.js小总结
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统; 指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性; v-for 指令可以绑定数组的数据来渲染一个项目列 ...
- js小游戏:五子棋
使用纯js的小游戏,五子棋 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- JS小游戏-蓝色拼图
// a[href=#viewSource]"); //查看源代码标签 viewSourceArr.attr("title", "查看源代码"); v ...
- Vue.js小案例(2)
即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] ...
- Vue.js小案例(1)
数据绑定 数据绑定是vue.js的基础.本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定. <!--这是我们的View--> <div id=" ...
- JS小游戏寻找房祖名
提示:1:先把两个图片放到重命名并放到相应的路径内. 2:本小游戏只为闲事练手,如有小bug自行解决,解决不了的可以留言,我看到后解决. 代码如下: <!DOCTYPE html>< ...
- Vue.js小demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 用mybatis进行模糊查询总是查不到结果!
//IStudentDao.xml @Override public List<Student> selectStudentByName(String name) { SqlSession ...
- HBase启动错误提示别的机器60000已经存在
已经用cm 安装好了cdh,需要在上面添加HBase,并且做一个HBase故障转移功能,现在需要配置2个HMaster 在不同的机器上. 启动出现异常信息: 2015-12-23 14:44:38, ...
- Hexo使用攻略-添加分类及标签
创建"分类"选项 生成"分类"页并添加tpye属性 打开命令行,进入博客所在文件夹.执行命令 hexo new page categories 成功后会提示: ...
- Error:ORA-00937: 非单组分组函数错误
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/istend/article/details/34429721 ORA-00937: 非单组分组函数错 ...
- undefined reference to `TTF_Init'
如果编译时遇上 undefined reference to `FunctionName' 或是这种类似错误,首先就得检查是不是函数名拼写错误,如果不是,那估计是编译时候有些链接库没加进去 比如这篇上 ...
- 关于HTML 5 canvas 的基础教程
HTML 5 规范引进了很多新特性,其中最令人期待的之一就是 canvas 元素.HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大.每一个canv ...
- angularJs input框绑定ng-model后js获取不到问题
搬运自:https://blog.csdn.net/fenglongmiao/article/details/81545993 与其他指令一样,ng-controller指令也会创建一个子级作用域,因 ...
- Android studio的ERROR: Unable to resolve dependency for 错误
同事拷贝一份工程给我,在我这里用AS编译的时候出现这个错误.按照网上很多的方法都不行,后来终于可以. 在AS中打开FILE->Setting->gradle->,在右边service ...
- python的magic methods
https://pycoders-weekly-chinese.readthedocs.io/en/latest/issue6/a-guide-to-pythons-magic-methods.htm ...
- 使用tensorboard报错 ImportError: No module named past.builtins
安装 future pip install future conda install future