消除QQ表情小游戏
2024-10-20 16:09:11
<!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);
};
最新文章
- Android使用静默安装时碰见的问题
- 浅析Java中的final关键字
- JAVA对象和XML文档、原来他们之间还有这一出
- [推荐] WordPress主题使用Google Fonts字体访问不了的解决办法
- @Autowired获取被@Service注解的bean为null的问题
- 【Executor】配置ThreadPoolExecutor
- cojs QAQ的图论题 题解报告
- vs2010生成Dll文件并引用dll(C#)
- ubuntu下安装phpstrom
- java.lang.IllegalStateException at org.apache.catalina.connector.ResponseFacade
- kafka集群配置与测试
- 20170717_python爬虫之requests+cookie模拟登陆
- 链表详解(C语言)
- windows安装zookeeper
- Kali学习笔记37:APPSCAN
- Vicious Keyboard CodeForces - 801A (暴力+模拟)
- 对Redis的理解
- BZOJ4556 [Tjoi2016&;Heoi2016]字符串 SA ST表 二分答案 主席树
- Excel表格规范
- c sharp dll