首页 > 代码库 > 消除QQ表情小游戏
消除QQ表情小游戏
<!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="http://www.mamicode.com/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 = http://www.mamicode.com/‘正在游戏...‘; 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 = "http://www.mamicode.com/‘ + 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="http://www.mamicode.com/开始游戏"></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);};
消除QQ表情小游戏
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。