<!doctype html>
<html>
<head>
<title>游戏编程</title>
<script type="text/javascript" src='jquery-1.9.1.min.js'></script>
<style type="text/css">
body{background:#cccccc;}
.cont{width:800px;height: 600px;border: 5px solid #8552a1;background:#78a355;position: absolute;left: 50%;top: 50%;margin-left: -400px;margin-top: -300px;overflow: hidden;}
.bird{position: absolute;width: 40px;height: 40px;background:rgba(120,163,85, 0);border-radius: 50%;top: 200px;left: 425px;z-index: 11;background-image:url("aaa.gif");}
.top{width: 50px;position: absolute;top: 0;background: green;right: -10px;}
.bottom{width: 50px;position: absolute;bottom: 0;background:green;right: -10px;}
.number{width: 100px;height: 30px;border: 2px solid black;position: absolute;left: 50%;top: 10px;margin-left: -50px;background:#bed742;z-index: 10;line-height: 30px;text-align: center;font-size:14pt;font-weight:bolder;
}
.letStart{width: 200px;height: 40px;border: 1px solid black;position: absolute;left: 50%;top: 50%;margin-left: -70px;background: #eeee00;color:red;font-weight:bolder;z-index: 10;line-height: 40px;text-align: center;margin-top: -20px;
}
</style>
</head>
<body onload="hello()">
<script type="text/javascript">
function hello(){
alert("欢迎进入！");
}
var _html = [
"<div class='cont'>",
"<div class='bird' id='div1'></div>",
"<div class='number'>0</div>",
"<div class='letStart'>Tips:按空格键开始</div>",
"</div>"
].join(""),first = 0,nodeStop = true;
function addStart(){
var speedY=1,_index =0,oDiv=document.getElementById('div1'),
l1,r1,t1,b1,l2,r2,t2,b2,add=pan =num = move= null,number = 0;//鸟（l1,r1,t1,b1）柱（l2,r2,t2,b2）用于判断鸟与柱间位置关系来确定是否撞了
move = setInterval(function (){
speedY+=1.3;//鸟下落速度
var t=oDiv.offsetTop+speedY;
if(t>=$('.cont').height()-oDiv.offsetHeight){
speedY=0;
t=$('.cont').height()-oDiv.offsetHeight;
}
//落地了
if(oDiv.offsetTop == $('.cont').height()-$(oDiv).height()){
speedY=0;
if(nodeStop)
stop();
}
oDiv.style.top=t+'px';
}, 30);
$('body').bind({
keydown:function(e){
if(e.which == 32){
speedY= -15;
}
}
});
add =setInterval(function(){
var m = b(30,400),s = (600 - m )-180;//160为上下宽度
$('<div class="top'+_index+' top node" style="height:'+m+'px"></div>').appendTo('.cont'),//将上柱添加到cont的div
$('<div class="bottom'+_index+' bottom node" style="height:'+s+'px"></div>').appendTo('.cont'),//将下柱添加到cont的div
$('.top'+_index).animate({'right':750},3500,'linear',function(){$(this).detach()}),//用3500ms将上柱缓慢移动距离右边750像素时移除这个上柱
$('.bottom'+_index).animate({'right':750},3500,'linear',function(){$(this).detach()});//下柱同上，与上柱保持一致
num = setTimeout(function(){
number++,
$('.number').html(number);
},2000);
setTimeout(function(){
if(oDiv.offsetTop<0)stop();
},880);
},1600);//此处的1500为每1.5秒产生一对
pan = setInterval(function(){
if(('.node').length){
for(var i = 0; i <$('.node').length;i++){
if(jc($(oDiv),$('.node:eq('+i+')'))){}
else{
if(nodeStop)stop();
}
}
}
},30);
function b(n,m){
return parseInt(Math.random()*(m-n))+n
};
function stop(){
nodeStop = false,
clearInterval(add),
$('body').unbind(),//撞到后不再绑定空格按键，避免撞到后继续跳动
speedY = 3,
clearInterval(pan),
clearTimeout(num),
setTimeout(function(){
$('.node').stop();
},150),
setTimeout(function(){
$('.node').stop();
},200),
setTimeout(function(){
clearInterval(move);
$('.letStart').fadeIn().html('按空格键重新开始'),
$('body').keydown(function(e){
if(e.which == 32){
nodeClier();
}
})
},1500)
}
function jc(node,node2){
l1 = node.offset().left;
r1 = node.offset().left+parseInt(node.width());
t1 = node.offset().top;
b1 = node.offset().top+parseInt(node.height());
l2 = node2.offset().left;
r2 = node2.offset().left+parseInt(node2.width());
t2 = node2.offset().top;
b2 = node2.offset().top+parseInt(node2.height());
return l2>r1||r2<l1||t2>b1||b2<t1?true:false;
};
}
function nodeClier(){
nodeStop = true;
first?nodeNotQuit():nodeQuit();
};
function nodeQuit(){
first = 1;
$('body').unbind().html(_html).bind({
keydown:function(e){
if(e.which == 32){
$('body').unbind(),
$('.letStart').stop().fadeOut(),
addStart();
}
}
});
};
function nodeNotQuit(){
$('body').unbind().html(_html),
$('.letStart').html('按空格键从新开始').stop().fadeOut(),addStart();
}
nodeClier();
</script>
</body>
</html>
Game_Code.zip （3个子文件） 
Game_Code 
Index.html 5KB
jquery-1.9.1.min.js 90KB
aaa.gif 2KB资源评论
yudi341
- 粉丝: 1
- 资源: 3
