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

Posted 刚入门的程序猿小白

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
			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>

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

 

以上是关于HTML+CSS+JavaScript实现小游戏“不死鸟”的主要内容,如果未能解决你的问题,请参考以下文章

HTML + CSS + JavaScript 实现打地鼠小游戏 闲暇时刻玩一玩 轻松丢烦恼~

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

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

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

HTML+CSS+JavaScript实现猜数字游戏

HTML+CSS+JavaScript实现猜数字游戏