你的鼠标有多快-小游戏

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{
	 800px;
	margin: 20px auto;
	text-align: center;
}
.cont{
	 100%;
}
.cont:after{
	display: block;
	clear: both;
	content: "";
}
p{
	line-height: 30px;
}
input{
	padding: 5px 10px;
	margin-bottom: 10px;
}
.fen{
	float: left;
	 150px;
	padding: 10px;
	border: 1px solid #000;
	border-right: 0;
	background: #EBB22B;
	text-align: left;
}
.fen span{
	display: block;
}
#game{
	 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;
	 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.onclick=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].onmouseover=function(){
			clearInterval(this["top"]);
			clearInterval(this["left"]);
		}
		//鼠标点击背景变为黑色，左右抖动，透明度变为0，得分加1，失分保持原先的值
		aIs[i].onclick=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];
	}
}