首先明白,这个游戏的鸟是X轴固定不动的,变的只是Y轴。这个游戏最难的就是碰撞检测
预览图:
下面贴代码↓↓
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="user-scalable=no" />
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#bird{
width: 50px;
height: 50px;
background-color: pink;
position: absolute;
left: 45%;
}
body{
overflow: hidden;
}
/*上面柱子*/
.topG{
position: absolute;
top: 0;
width: 50px;
left: 100%;
background:black;
}
/*下面柱子*/
.bottomG{
position: absolute;
width: 50px;
background:black;
left: 100%;
}
</style>
</head>
<body>
<div id="bird"></div>
</body>
<script type="text/javascript">
//返回上面柱子的高
function random(min,max){
return parseInt(Math.random()*(max-min+1)+min);
};
//碰撞检测
function setBoom(objA,objB){
var objBl = objB.offsetLeft;
var objBt = objB.offsetTop;
var objBr = objBl+ objB.offsetWidth;
var objBb = objBt+ objB.offsetHeight;
var objAt = objA.offsetTop + objA.offsetHeight;
var objAl = objA.offsetWidth + objA.offsetLeft;
var objAr = objA.offsetLeft;
var objAb = objA.offsetTop;
if(objAt>objBt && objAl>objBl && objBr>objAr && objAb < objBb){
return true
}
else{
return false;
}
};
//生成上下2个柱子
function zhuzi(){
var oDiv=document.createElement('div');
oDiv.className="topG";
oDiv.leftData=100;//对象的私有属性
var oDiv2=document.createElement('div');
oDiv2.className="bottomG";
oDiv2.leftData=100;//对象的私有属性
var h=random(10,200);
oDiv.style.height=h+'px';
oDiv2.style.height=innerHeight-h-200+'px';//下面柱子的高等于页面高度-上面柱子高度-中间空隙高度
oDiv2.style.top=h+200+'px';
console.log(h);
document.body.appendChild(oDiv);
document.body.appendChild(oDiv2);
};
var last=setInterval(zhuzi,1500);//每1.5秒执行一次生成柱子函数
clearInterval(bigtimer);
var bigtimer=setInterval(function(){
var allTopG=document.querySelectorAll('.topG');
var allBottomG=document.querySelectorAll('.bottomG');
for(var i=0;i<allTopG.length;i++){
if(allTopG[i].leftData==-10){
document.body.removeChild(allTopG[i]);
document.body.removeChild(allBottomG[i]);
continue;
}
if(setBoom(bird,allTopG[i]) || setBoom(bird,allBottomG[i])){
die = true;
clearInterval(bigtimer);
clearInterval(last);
}
allBottomG[i].style.left=allTopG[i].style.left=allTopG[i].leftData-1+'%';
allTopG[i].leftData-=1;
}
},30);
var timer=null;
var iSpeed=0;
var bird=document.getElementById('bird');
var die=false;
clearInterval(timer);
timer=setInterval(function(){
iSpeed++;
var t=bird.offsetTop+iSpeed;//鸟的自由落体算法
if(t<0){
die=true;
t=0;
iSpeed=0;
clearInterval(bigtimer);
clearInterval(last);
}
if(t>innerHeight-bird.offsetHeight){
die=true;
iSpeed=0;
clearInterval(bigtimer);
clearInterval(timer);
clearInterval(last);
}
bird.style.top=t+'px';
},30);
//点击屏幕时触发
window.function(){
iSpeed-=15;
}
</script>
</html>
谢谢您的观看