<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>消除QQ表情小游戏</title>
<script src="js/global.js"></script>
</head>
<style>
*{margin:0;padding:0; list-style:none;}
body{font:12px/1.5em "微软雅黑";background:f1f1f1; }
.head{ text-align:center; padding:20px 0}
.head p{ line-height:30px;}
.head h2{ font-size:20px; padding:10px 0}
.head input{ padding:1px 3px;}
.wrap{width:700px; height:400px; border:1px solid #555; margin:0 auto; position:relative;top:0;left:0}
.side{ width:120px; height:90px; border:1px solid #555; position:absolute; top:-1px; right:100%}
.side p{ padding:0px 15px; line-height:25px; font-size:16px;}
.side p:nth-of-type(1){ margin-top:15px;}
.main{width:100%;height:100%; position:absolute; top:0; left:0; overflow:hidden}
.main i{width:24px; height:24px; border-radius:50%; display:block; position:absolute; top:0; left:0; cursor:pointer}
.main img{ width:24px;}
</style>
<script>
window.onload = function(){
var oBox = $('#box'),
oBtn = getTagName(document,'input')[0],
oMin = getClass(oBox,'.main')[0];
var aB = getTagName(oBox,'b');
var W = parseInt(getCss(oMin,'width')),
H = parseInt(getCss(oMin,'height'));
oBtn.onclick = function(){
this.disabled = true;
this.value = '游戏正在进行中...'
console.dir(oBtn)
oMin.innerHTML = '<i></i>'
var oI = getTagName(oMin,'i')[0];
var b = 0,t = 0;
var k = 2
aB[0].innerHTML = b
aB[1].innerHTML = t
fn()
function fn(){
oI.style.top = '0';
oI.style.left = $fn.random([0,W-24]) + 'px';
oI.innerHTML = '<img src="QQexp/'+ $fn.random([1,15]) +'.gif"/>'
$fn.Move(oI,'top',k,H-24,function(){
++t
aB[1].innerHTML = t
$fn.shaKe(oBox,'top',10,function(){
if(!score()) fn()
})
})
}
function score(){
if(t == 10){
alert('失败')
oBtn.disabled = false;
oBtn.value = '开始游戏'
oI.style.top = '-23px';
return true
}
if(b == 30){
alert('你赢了')
oBtn.disabled = false;
oBtn.value = '开始游戏'
oI.style.top = '-23px';
return true
}
}
oI.onmousedown = function(){
clearInterval(oI.timer)
this.innerHTML = '<img src="QQexp/s.gif"/>'
oI.timer = null;
++b
k+=0.2
k.toFixed(1)
aB[0].innerHTML = b
$fn.shaKe(oI,'left',10,function(){
if(!score()) fn()
})
}
}
}
</script>
<body>
<div class="head">
<h2>你的鼠标有多快？</h2>
<p>游戏说明：点击“开始游戏”，随机掉下QQ表情，点中它，千万别让它掉下去！！</p>
<p><input type="button" value="开始游戏" /></p>
</div>
<div id="box" class="wrap">
<div class="side">
<p>得分：<b>0</b> 分</p>
<p>失分：<b>0</b> 分</p>
</div>
<div class="main"></div>
</div>
</body>
</html>
单击消除下落QQ表情HTML5源码
版权申诉
194 浏览量
2022-03-18
11:09:55
上传
评论
收藏 1.45MB RAR 举报
54.rar （18个子文件） 
54 
index.html 3KB js 
global.js 3KB QQexp 
13.gif 126KB 5.gif 149KB 2.gif 85KB 1.gif 131KB 8.gif 110KB 3.gif 54KB 12.gif 120KB 6.gif 57KB 11.gif 119KB 9.gif 36KB 7.gif 143KB 14.gif 123KB 4.gif 56KB s.gif 135KB 15.gif 89KB 10.gif 38KB资源评论
