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(){
//运动结束失分加1
aSpan[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个之后速度加快,都缩短100ms
if(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];
}
}