<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ padding:0px; margin:0px; font-family:"微软雅黑";} body{ background:#f1f1f1; font-family:"微软雅黑"; font-size:16px; } #info{ text-align:center; } #box{ width: 800px; height: 450px; border: 1px solid #066; background: none repeat scroll 0% 0% #FFF; margin: 20px auto 0px; position: relative; top: 0px; left: 0px; } #left{ width:130px; border:1px solid #066; position:relative; top:-1px; left:-152px; background:#ffc; padding:10px; } #left p{ font-size:16px; line-height:30px; } #qq{ position:absolute; top:0px; left:0px; width:800px; height:450px; } </style> <script type="text/javascript" src="float.js"> </script> <script type="text/javascript"> window.onload = function() { var obtn = document.getElementById(\'info\').getElementsByTagName("input")[0]; var oqq = document.getElementById(\'qq\'); var obox = document.getElementById(\'box\'); var ascore = obox.getElementsByTagName(\'p\'); var score1 = score2 = 0; var speed = 1; var arr = [\'img/icon1.png\', \'img/icon2.png\', \'img/icon3.png\', \'img/icon4.png\', \'img/icon5.png\']; obtn.onclick = function () { this.value = \'正在游戏...\'; this.style.opacity = \'1\'; this.disabled = \'disabled\'; fnqq(); function fnqq() { creat(); drop(fnqq); }; function init() { obtn.value = \'开始游戏\'; obtn.style.opacity = \'1\'; obtn.disabled = \'\'; oqq.innerHTML = \'\'; speed = 1; score1 = score2 = 0; }; function check() { if( score1 == 25 ) { alert(\'恭喜！\'); init(); return true; } if( score2 == 5 ) { alert(\'真遗憾！\') init(); return true; } }; function creat() { oqq.innerHTML = \'<img style = "position: absolute; top: 0; left: \' + Math.round(Math.random() * 776) + \'px" src = "\' + arr[Math.round(Math.random() * (arr.length - 1))]+ \' "/>\'; } function drop(fnend) { var icon = oqq.getElementsByTagName(\'img\')[0]; speed += 0.8; domove(icon,\'top\',speed,50,426,function() { oqq.innerHTML = \'\'; score2++; ascore[1].innerHTML = \'失分\' + score2 + \'分\'; shake(obox,\'top\',function() { if(check()) { return; } fnend&&fnend(); }) }) icon.onmouseover = function () { clearInterval(icon.timer); icon.src = \'img/icon6.png\'; shake(icon,\'left\',function() { oqq.innerHTML = \'\'; score1++; ascore[0].innerHTML = \'得分\' + score1 + \'分\'; if(check()) { return; } fnend&&fnend(); }) } } } } </script> </head> <body> <div id="info"> <h2>你的鼠标有多快</h2> <p>游戏说明：点击“开始游戏”，随机掉下QQ表情，把鼠标划上去，千万别让它掉下去！！<br> 划掉25个算你赢；掉下5个算你输 :)</p> <input type="button" value="开始游戏"></input> </div> <div id="box"> <div id="left"> <p>得分：0 分</p> <p>失分：0 分</p> </div> <div id="qq"></div> </div> </body> </html>
function getstyle(obj,attr) { return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; } function domove (obj,attr,step,frequency,target,endfn) { step = parseInt(getstyle(obj,attr))<target?step:-step; clearInterval(obj.timer); obj.timer = setInterval( function () { var speed = parseInt(getstyle(obj,attr)) + step; if(step>0&&speed>target||step<0&&speed<target) { speed = target; } obj.style[attr] = speed + \'px\'; if( speed == target ) { clearInterval(obj.timer); endfn&&endfn(); } },frequency); }; function opacity(obj,step,target,frequency,endfn) { var currentOpacity = getstyle(obj,\'opacity\') * 100; step = currentOpacity < target?step:-step; clearInterval(obj.opacity) obj.opacity = setInterval (function () { currentOpacity = getstyle(obj,\'opacity\') *100; var nextOpacity = currentOpacity + step; if(step>0&& nextOpacity>target || step<0&& nextOpacity < target ) { nextOpacity = target; } obj.style.opacity = nextOpacity/100; obj.style.filter = \'alpha(opacity:)\' + nextOpacity +\')\'; if(nextOpacity == target ) { clearInterval(obj.opacity); endfn&&endfn(); } },frequency); }; function shake(obj,attr,endfn) { if( obj.shaked ) { return; } obj.shaked = true; var num = 0; var timer = null; var arr = []; var pos = parseInt(getstyle(obj,attr)); for( var i = 20; i > 0; i-=2 ) { arr.push(i,-i); } arr.push(0); clearInterval(obj.shake); obj.shake = setInterval(function () { obj.style[attr] = pos + arr[num] +\'px\'; num++; if(num==arr.length) { clearInterval(obj.shake); endfn&&endfn(); obj.shaked = false; } },50); };