<!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{ 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{ 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; 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); };