你的鼠标有多快-小游戏

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];}
}