用原生JS仿Flappy bird游戏

最新推荐文章于 2024-03-21 21:44:41 发布

21世纪电热阻

最新推荐文章于 2024-03-21 21:44:41 发布

阅读量1.2k

点赞数

文章标签： Flappy Bird 游戏 JS

本文链接：https://blog.csdn.net/JackPen0306/article/details/88920041

版权

首先明白，这个游戏的鸟是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>

谢谢您的观看

21世纪电热阻

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用原生JS仿Flappy bird游戏

首先明白，这个游戏的鸟是X轴固定不动的，变的只是Y轴。这个游戏最难的就是碰撞检测预览图：下面贴代码↓↓<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content=...
复制链接

扫一扫