网页JavaScript特效之flappy bird（像素鸟）

最新推荐文章于 2022-09-16 16:32:47 发布

01-01

最新推荐文章于 2022-09-16 16:32:47 发布

阅读量6.3k

点赞数 4

分类专栏： HTML/Css/Javascript学习文章标签： javascript 入门动态像素鸟特效

本文链接：https://blog.csdn.net/qq_35354855/article/details/75570997

版权

HTML/Css/Javascript学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

今天用JavaScript做了一个小小的像素鸟，256行代码实现flappybird，虽然有很多bug，废话不多说，上源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<style type="text/css">
		*{
			padding: 0;margin: 0;
		}
		.main{
			border: solid 1px black;
			width: 600px;
			height: 512px;
			background: url(img/bg_day.png) 10px 0px;
			margin: 20px auto;
			position: relative;
			
			overflow: hidden;
		}
		
		.bird{
			width:37px;height: 27px;
			background: url(img/bird0_0.png) no-repeat center;
			position: absolute;
			left: 20px;
			top: 200px;
			display: none;
		}
		.gameover{
			width: 204px;
			height: 54px;
			background: url(img/text_game_over.png);
			margin: auto;
			left: 0;top: 0;right: 0;bottom: 0;
			position: absolute;
			display: none;
			
		}
		.title{
			width: 178px;
			height: 48px;
			background:url(img/title.png) ;
			margin: auto;
			left: 0;top: 0;right: 0;bottom: 0;
			position: absolute;
			
		}
		
		.bluebird{
			display: block;
			margin: 100px auto;
			
		}
		
		.start{
			display: block;
			position: absolute;
			left: 240px;top: 300px;
			cursor: pointer;
		}
	</style>
	<body>
		<div class="main">
			
			<div class="bird" src="img/bird0_0.png"></div>
			
			<div class="gameover">
				
			</div>
			<div class="title"></div>
			<img class="bluebird" src="img/bird1_0.png"/>
			<img class="start" src="img/button_play.png" />
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-2.0.3.js" ></script>
	<script type="text/javascript">
		var flynum = 0;
		var bluebird = $(".bluebird");
		var gamerunning = false;
		//蓝色小鸟翅膀运动
		var bluebirdfly = setInterval(function(){
			flynum++;

			bluebird.attr("src","img/bird1_"+flynum+".png");
			if(flynum==2)flynum=-1;
		},100);
		
		
//		bluebird.animate({marginTop: 130},500,function(){
//			bluebird.animate({marginTop:70},1000,function(){
//				bluebird.animate({marginTop:130},1000,function(){
//					bluebird.animate({marginTop:70},1000,function(){
//						
//					});
//				});
//			});
//		});//可用递归解决
		//小鸟上下跳动
		var sign = 1;
		jump();
		function jump(){
			if(!gamerunning){
				bluebird.animate({marginTop: 100+30*sign},1000,jump);
			    sign*=-1;
			}
			
			
			//当点击页面任意一点时,开始游戏
//			document.οnclick= function(){
//				clearInterval(bluebirdfly);
//				
//				gamestart();
//				clearInterval(this);
//				jump().remove();
//			}
		
		}
		
		$(".start").click(function(){
			gamerunning = true;
			
			bluebird.remove();
			$(".title").remove();
			$(".start").remove();
			
			gamestart();
		});
		
		
		
		
		function gamestart(){
			$(".bird").show();
			var pipes = []   //用来保存所有的管道
		var score = 0;
//		关于背景的运动
		var count = 0;
		var movebg = setInterval(function(){
			count-=2;
			var bg = $(".main");
			bg.css("background","url(img/bg_day.png)"+count+"px");
			
		},200);
		
		
		
//		关于小鸟翅膀的运动
		var num = 0;
		var birdfly = setInterval(function(){
			num++;
			var bird = $(".bird");
			bird.css("background","img/bird0_"+num+".png");
			
			if(num == 2)num=-1;
		},200);
		
		
//		小鸟的自由落体
			
		var speedy = 0;
		var birddown = setInterval(function(){
			var bird = $(".bird");
			
			bird.css("top",bird.position().top+ ++speedy +"px");
			
			//判断小鸟是否跟数组里的所有管道碰撞
			for(var i = 0;i<pipes.length;i++){
			var leftSide = pipes[i].position().left-bird.width();//左边界
			var rightSide = pipes[i].position().left+pipes[i].width();//右边界
			//小鸟碰撞的左右边界
			
			var topSide = pipes[i].position().top - bird.height();
			var downSide = pipes[i].position().top + pipes[i].height();
			//小鸟碰撞的上下边界
			
			//以上为小鸟的碰撞范围，若小鸟出现在碰撞范围之内，则碰撞发生
			//if（鸟left》左边界且《右边界同时鸟top》上边界且《下边界）
			if(bird.position().left>leftSide && bird.position().left<rightSide && 
			bird.position().top>topSide && bird.position().top<downSide){
				alert("分数为"+score);
				clearInterval(birdfly);
				clearInterval(movebg);
				clearInterval(autopipes);
				clearInterval(birddown);
				//关掉所有定时器
				
				for(var k = 0;k<pipes.length;k++){
					pipes[k].stop();
				}
				
				$(".gameover").show();
				break;
			}else{
				score++;
			}
				
			}
		},60);
		
		
//		小鸟的跳跃
		$(document).keydown(function(e){
			if(e.keyCode==32){//如果按下了空格键
				speedy-=20;
			}
		});
		
		var autopipes = setInterval(function(){
			
			var pipeUp = $("<img>");
			pipeUp.attr("src","img/pipe_up.png");
			pipeUp.css({
				position : "absolute",
				left : 600,
			    bottom : -Math.round(Math.random()*150+100)
			})
			
			var pipeDown = $("<img>");
			pipeDown.attr("src","img/pipe_down.png");
			pipeDown.css({
				position:"absolute",
				left :600,
				top: -Math.round(Math.random()*150+100)
			})
			
			
//			把两根管道加入到游戏中
			$(".main").append(pipeUp);
			$(".main").append(pipeDown);
			
			
			pipes.push(pipeUp);
			pipes.push(pipeDown);
			
			//共600px+52px（管道）宽度 652*30,开口向上的管道运动
			pipeUp.animate({left:-52}, 9780, "linear",function(){
				pipeUp.remove();
				pipes.shift();//删除数组的第一个元素
				
			});
			
			//开口向下的管道运动
			pipeDown.animate({left: -52}, 9780,"linear",function(){
				pipeDown.remove();
				pipes.shift();//删除数组的第一个元素
			});
			
		},3000);
		}
		
	</script>
	
</html>

相当于一个粗糙的模子，细节等待打磨，下面是效果：

01-01

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
网页JavaScript特效之flappy bird（像素鸟）

今天用JavaScript做了一个小小的像素鸟，256行代码实现flappybird，虽然有很多bug，废话不多说，上源码 *{ padding: 0;margin: 0; } .main{ border: solid 1px black; width: 600px; height: 512px; background:
复制链接

扫一扫