你的鼠标有多快-小游戏

HTML

<div class="box"><h3>你的鼠标有多快?</h3><p>游戏说明:点击'开始游戏',随机掉下QQ表情,点中它,千万别让它掉下去!!</p><input type="button" name="" id="" value="开始游戏" /><div class="cont"><div class="fen"><span>得分:0分</span><span>失分:0分</span></div><div id="game"></div></div>
</div>
<script src="mTween.js" type="text/javascript" charset="utf-8"></script>
<script src="tween.js" type="text/javascript" charset="utf-8"></script>

  

CSS

body{background: #ccc;
}
*{margin: 0;padding: 0;
}.box{width: 800px;margin: 20px auto;text-align: center;
}
.cont{width: 100%;
}
.cont:after{display: block;clear: both;content: "";
}
p{line-height: 30px;
}
input{padding: 5px 10px;margin-bottom: 10px;
}
.fen{float: left;width: 150px;padding: 10px;border: 1px solid #000;border-right: 0;background: #EBB22B;text-align: left;
}
.fen span{display: block;
}
#game{width: 547px;height: 400px;border: 1px solid #000;float: left;background: #fff;position: relative;overflow: hidden;text-align: center;font-size: 30px;font-weight: bold;line-height: 400px;
}
#game i{position: absolute;top: 0px;left: 0;width: 20px;height: 20px;background: red;border-radius: 50%;
}

JS

var game=document.getElementById("game");
var Btn=document.getElementsByTagName("input")[0];
var aIs=document.getElementsByTagName("i");
var aSpan=document.getElementsByTagName("span");
var num=0;
var num1=0
var timer=null;
var time1=3000;
var time2=2000;Btn.οnclick=function(){//修改按钮文字this.value="游戏进行中...";fn();timer=setInterval(function(){fn();},time1)}function fn(){//生成掉落的圆点game.innerHTML+="<i style='left: "+Math.round( Math.random()*520)+"px;'></i>";var len=aIs.length;for (var i=0;i<len;i++) {//圆点掉落mTween(aIs[i],"top",400,time2,"linear");mTween(aIs[i],"left",Math.round( Math.random()*530),time2,"linear",function(){//运动结束失分加1aSpan[1].innerHTML="失分:"+(aIs.length-num)+"分";//当失分大于10之后,游戏结束,不在生成圆点if(aIs.length-num>9){clearInterval(timer);Btn.value="游戏结束";}});aIs[i].index=i;//鼠标移入清除运动aIs[i].οnmοuseοver=function(){clearInterval(this["top"]);clearInterval(this["left"]);}//鼠标点击背景变为黑色,左右抖动,透明度变为0,得分加1,失分保持原先的值aIs[i].οnclick=function(){var that=this.index;num++;this.style.background="#000";shake(this,"left",function(){aIs[that].style.opacity="0";aSpan[0].innerHTML="得分:"+num+"分";aSpan[1].innerHTML="失分:"+(aIs.length-num)+"分";});}}//每次点击的圆点达到20个之后速度加快,都缩短100msif(num%20==0){time1-=100;time2-=100;//当时间减为0,并且失分少于10个之后,游戏终止,并清除定时器,显示恭喜if(time1<=0&&aIs.length-num<9){time1=0;time2=0;game.innerHTML="大神,恭喜您通关了!!"Btn.value="游戏结束";clearInterval(timer);}}}//抖动函数
function shake(obj,attr,fn){var timer=null;var arr=[];for(var i=20;i>0;i-=2){arr.push(i,-i);}arr.push(0);var num=0;clearInterval(timer);timer=setInterval(function(){var seep=parseInt(getStyle(obj,attr))+arr[num];num++;obj.style[attr]=seep+"px";if(num===arr.length){clearInterval(timer);if(fn){fn();}}},30)
}
//获取样式
function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj)[attr];}
}

  

转载于:https://www.cnblogs.com/yangxue72/p/7998810.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/415142.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android图片查看器,实现图片加载进度监听,实现保存图片

1、添加依赖 implementation com.github.bumptech.glide:glide:4.6.1 compile com.github.chrisbanes:PhotoView:2.0.0 compile com.squareup.okhttp3:okhttp:3.9.0 2、实现fragmentactivity&#xff1a; /*** 作者&#xff1a;created by meixi* 邮箱&#xff1a;131647168…

iPhone X Web 设计

iPhone X Web 设计 原文地址&#xff1a;https://webkit.org/blog/7929/designing-websites-for-iphone-x/ 开箱即用(开发者无需进行任何设置)&#xff0c;在iPhone X中&#xff0c;Safari 就可以完美的在全面屏上显示你既有的网站。网页内容会自动插入到显示的安全区域以至于不…

[转载] 我的WafBypass之道(SQL注入篇)

我的WafBypass之道&#xff08;SQL注入篇&#xff09; Web安全 作者&#xff1a;先知技术社区 2016-11-23 7,566【本文转自安全脉搏战略合作伙伴先知技术社区 原帖地址 安全脉搏编辑huan9740整理发布】 0x00 前言 去年到现在就一直有人希望我出一篇关于waf绕过的文章&#xf…

Linux之Ubuntu下安装屏幕录像软件(SimpleScreenRecorder)【摘抄】

本博文全文属于摘抄自&#xff1a; (见文末处参考文献)(由于担心原博文丢失&#xff0c;以后查找不到&#xff0c;故此原文摘抄&#xff0c;以备日后多次查阅) 在日常工作中&#xff0c;有时需要对屏幕进行录像&#xff0c;以制作讲解文档等。下面介绍在Linux上安装屏幕录像软件…

docker 目录 挂载

docker容器启动的时候&#xff0c;如果要挂载宿主机的一个目录&#xff0c;可以用-v参数指定。 譬如我要启动一个centos容器&#xff0c;宿主机的/share目录挂载到容器的/share目录&#xff0c;可通过以下方式指定&#xff1a; docker run -it -v /share:/share centos /bin/…

工作177:表单重置项目处理

<template><!--新建账号对话框--><el-dialog title"新建账号" :visible.sync"dialogFormVisible" close"close"><el-form ref"form" :model"form" size"medium" :label-width"formLabe…

docker删除所有镜像和容器

需求&#xff1a;重新进行开发&#xff0c;需要清空目前的镜像和容器。 1、删除容器 1&#xff09;首先需要停止所有的容器 docker stop $(docker ps -a -q) 2&#xff09;删除所有的容器&#xff08;只删除单个时把后面的变量改为image id即可&#xff09; docker rm $(d…

Android 自定义字体,设置字体

效果图 实现代码&#xff1a; 1、先下载字体文件.ttf 下载链接&#xff1a;http://font.chinaz.com/maobiziti.html 2、main文件夹下创建fonts文件夹&#xff0c;.ttf文件复制到fonts文件夹下 3、读取ttf文件 List<Typeface> mTypefaceList new ArrayList(); priva…

docker 安装 centos

1、设置docker 镜像加速 三个源 名称路径网易https://hub-mirror.c.163.com/阿里云https://<你的ID>.mirror.aliyuncs.com七牛云加速器https://reg-mirror.qiniu.com "registry-mirrors":["https://hub-mirror.c.163.com/","https://reg-mirr…

工作177:时间戳转换

main.js // 将时间戳转日期格式的过滤器 Vue.filter(dateFormat, (dataStr) > {var time new Date(dataStr);function timeAdd0(str) {if (str < 10) {str 0 str;}return str}var y time.getFullYear();var m time.getMonth() 1;var d time.getDate();var h time…

二.java下使用RabbitMQ实现hello world

上一篇文章介绍了windows环境下的安装和配置rabbitMQ&#xff0c;具体戳这边&#xff0c;一.windows环境下rabbit的的安装和配置。 现在我们可以着手编写hello world程序了&#xff0c;一窥RabbitMQ的效用&#xff0c;从rabbitmq的官网的get start进入rabbitMQ文档学习区&#…

工作180:前端是业务需求理解

1做一个系统之前 要明确数据的一个处理流程 才能避免做返工操作

docker centos ssh

1、创建一个容器 docker run -d -p 18022:22 -p 18000:8000 --privileged -v /Users/caowei/share:/share --name yf c17f22223248 /usr/sbin/init 2、进入容器 docker exec -it 39550a9d4610 /bin/bash 3、安装openssh和openssh-server yum install -y passwd openssh op…

Android自定义view详解,使用实例,自定义属性,贝塞尔曲线

//只会触发执行onDraw方法&#xff0c;只会改变绘制里面的内容,条目的绘制 invalidate(); //只会触发执行onDraw方法&#xff0c;但是可以在子线程中刷新 postInvalidate(); //view的布局参数改变之后刷新&#xff0c;比如view的宽度和高度都修改了&#xff0c;只能通过reques…

前端学习(2679):安装mysql_front

mysql front安装与使用教程 2020-04-10 11:32 更新mysql front一种小巧的管理Mysql的应用工具&#xff0c;那么这个工具该如何安装和使用呢&#xff1f;一起来看看吧。 一&#xff0c;mysql前端下载&#xff1a; mysql front下载地址&#xff1a;点击下载 二&#xff0c;mysql前…

Android RecyclerView 向上偏移解决、添加自定义分割线,瀑布流,ScrollView嵌套RecyclerView滑动卡顿

向上偏移解决 android:focusableInTouchMode"true" android:focusable"true" android:fillViewport"true" 卡顿解决方法 recyclerViewwg.setHasFixedSize(true); recyclerViewwg.setNestedScrollingEnabled(false); 删除条目&#xff1a; l…

前端学习(2678):懂代码之表格BaseTable编辑操作

第一步:编辑操作 <template slot-scope"scope"><el-buttontype"text"icon"el-icon-edit"click"handleEdit(scope.$index, scope.row)">编辑</el-button></template> 第二步 进行编辑处理 // 编辑操作handle…

工作182:表格渲染

<el-table :data"tableData" style"width: 100%" border> <!-- <el-table-column label"id" prop"1" align"center"></el-table-column>--><!--渲染账号名称--><el-table-column l…