【HTML+CSS+JavaScript】实现小游戏“不死鸟”

最新推荐文章于 2022-11-29 21:02:48 发布

刚入门的程序猿小白

最新推荐文章于 2022-11-29 21:02:48 发布

阅读量774

点赞数 6

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_47148475/article/details/117637293

版权

HTML5游戏 JavaScript CSS 碰撞检测游戏开发

关键词由CSDN通过智能技术生成

运行效果图

全部代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>不死鸟</title>
	</head>
	
	<style>
		
		div#game{
			position:relative;
			width:800px;
			height:600px;
			border:1px solid black;
			background-image: url(img/sky.png);
			
			
		}
		
		div#bird{
			width: 52px;
			height: 45px;
		    /*border: 1px solid red;*/
			background-image: url(img/birds.png);
			position: relative;
			top:300px;
			background-position-x: 0px;
		}
		
		div#mask{
			display: none;
			width: 800px;
			height: 600px;
			background-color: rgba(0,0,0,0.5);
			position: absolute;
			top:0px;
			left:0px;
		}
		
		div#info{
			width: 200px;
			height: 150px;
			background-color: bisque;
			font-size: 25px;
			text-align: center;
			padding-top: 50px;
			color: darkorange;
			border-radius: 10px;
			position: absolute;
			top:50%;
			left:50%;
			margin-left: -100px;
			margin-top: -100px;
		}
		
		div#restart{
			width: 161px;
			height: 45px;
			background-image: url(img/Hint.png);
			position: absolute;
			bottom: 10px;
			left:50%;
			margin-left: -80px;
			cursor: pointer;
		}
		
		
		
	</style>
	<body>
		<div id="game" onclick="birdUp()">
			<div id="bird"></div>
			<div id="upZhu1"></div>
			<div id="upZhu2"></div>
			<div id="upZhu3"></div>
			<div id="upZhu4"></div>
			
			<div id="downZhu1"></div>
			<div id="downZhu2"></div>
			<div id="downZhu3"></div>
			<div id="downZhu4"></div>
			
			<div id="mask">
				<div id="info">
				失败！<br>
				<div id="restart" onclick="location.reload();"></div>
				</div>
				
			</div>
		</div>
	</body>
	<script>
		
		var game = document.getElementById("game");
		var bird = document.getElementById("bird");
		var mask = document.getElementById("mask");
		
		//音频元素，可以播放音频。
		var audio = document.createElement("audio");
		
		//获取柱子，并且放进数组中。
		var upArray = new Array(4);
		upArray[0] = document.getElementById("upZhu1");
		upArray[1] = document.getElementById("upZhu2");
		upArray[2] = document.getElementById("upZhu3");
		upArray[3] = document.getElementById("upZhu4");
		
		var downArray = new Array(4);
		downArray[0] = document.getElementById("downZhu1");
		downArray[1] = document.getElementById("downZhu2");
		downArray[2] = document.getElementById("downZhu3");
		downArray[3] = document.getElementById("downZhu4");
		
		
		//初始化柱子
		function initZhu(){
			for(var i=0;i<=3;i++){
				
				
				//随机生成 200-350 的值。
				var height = Math.floor(Math.random()*150)+200;
				upArray[i].style.width="52px";
				upArray[i].style.height=height+"px";
				/*upArray[i].style.border="1px solid red";*/
				upArray[i].style.position="absolute";
				upArray[i].style.left=200*(i+1)+"px";
				upArray[i].style.top="0px";
				upArray[i].style.backgroundImage="url(img/pipe2.png)";
				upArray[i].style.backgroundPositionY="bottom";
				
				var downHeight = 600 - height - 150;
				downArray[i].style.height=downHeight+"px";
				downArray[i].style.width="52px";
				/*downArray[i].style.border="1px solid red";*/
				downArray[i].style.position="absolute";
				downArray[i].style.left=200*(i+1)+"px";
				downArray[i].style.top=(height+150)+"px";
				downArray[i].style.backgroundImage="url(img/pipe1.png)";
				
				
				
				
			}
		}
		
		initZhu();
		
		//设置定时器，让天空往后移动。
		var time1 = setInterval(skyMove,10);
		var skyX=0;
		function skyMove(){
			game.style.backgroundPositionX=skyX+"px";
			skyX--;
			
			//同时控制柱子往后移动
			for(var i=0;i<=3;i++){
				upArray[i].style.left=(upArray[i].offsetLeft-1)+"px";
				downArray[i].style.left=(downArray[i].offsetLeft-1)+"px";
				
				//控制柱子。如果柱子完全超出左边，那么要放到最后面去。
				//同时更改一下柱子的高度，增添游戏趣味性。
				if(upArray[i].offsetLeft-1<-52){
					 
					upArray[i].style.left = (upArray[i].offsetLeft+800)+"px";
					downArray[i].style.left = (downArray[i].offsetLeft+800)+"px";
					
					var height = Math.floor(Math.random()*150)+200;
					upArray[i].style.height=height+"px";
					downArray[i].style.height = (600-height-150) + "px";
					downArray[i].style.top = (height+150) +"px";
				}
			}
			
			
			
		}
		
		//让小鸟的3张小图不停切换，实现翅膀煽动效果。
		var time2 = setInterval(chiBang,1000);
		
		var birdIndex = 1;
		function chiBang(){
			//x方向偏移量在 0 -52 -104之间切换。
			var x = (-1)*(birdIndex-1)%3*52;
			bird.style.backgroundPositionX=x+"px";
			birdIndex++;
		}
		
		//让小鸟往前，向下移动。
		var time3 = setInterval(birdMove,10);
		var birdLeft = 0;
		var birdTop = 300;
		function birdMove(){
			
			bird.style.left=birdLeft+"px";
			bird.style.top=birdTop+"px";
			
			birdLeft++;
			birdTop++;
			
			//判断小鸟移动过程中，是否超出边界。
			//offsetTop 顶部偏移量
			//offsetLeft 左边偏移量
			//offsetTop 是数字， style.top 是字符串 “10px”
			//alert(bird.offsetLeft+" "+bird.offsetTop);
			
			if(bird.offsetTop<=0 || bird.offsetLeft+52>=800 || bird.offsetTop+45>=600){

				stop();
			}
			
		
			//判断小鸟和柱子是否相撞。
			for(var i=0;i<=3;i++){
				
				if( bird.offsetLeft+52>upArray[i].offsetLeft && bird.offsetLeft+52<upArray[i].offsetLeft+52 ){
					
					if(bird.offsetTop<upArray[i].offsetHeight){
						stop();
					}
					
					if(bird.offsetTop+bird.offsetHeight > upArray[i].offsetHeight+150){
						stop();
					}
					
				}
				
				upArray[i]
				
				downArray[i]
			}
		
		}
		
		//点击屏幕，小鸟向上移动。
		function birdUp(){
			
			//点击屏幕，向上走30个像素。
			birdTop = birdTop - 30; 
			bird.style.top=birdTop+"px";
			
			//播放点击音效。
			// audio元素可以播放音频。
			audio.setAttribute("src","res/Point.wav");
			audio.play();
		}
		
		
		//结束游戏。
		function stop(){
				mask.style.display="block";
				clearInterval(time1);
				clearInterval(time2);
				clearInterval(time3);
				
				game.onclick="";
		}
		
	</script>
	
</html>

虚心接受各位的意见，欢迎在评论区提出宝贵的意见

刚入门的程序猿小白

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
11
评论
【HTML+CSS+JavaScript】实现小游戏“不死鸟”

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>不死鸟</title> </head> <style> div#game{ position:relative; width:800px; height:600px; border:1px solid black; backgrou...
复制链接

扫一扫