Internship14

最新推荐文章于 2025-06-30 19:10:13 发布

原创最新推荐文章于 2025-06-30 19:10:13 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个基于HTML5 Canvas实现的小鸟游戏案例，详细展示了如何使用CSS和JavaScript来创建游戏背景、小鸟角色及管道障碍物，并通过代码实现了小鸟的上下移动、背景滚动及碰撞检测等功能。

小鸟游戏案例

今天所学的小鸟案例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		#game {
			width: 800px;
			height: 600px;
			background: url(imagesgame/sky.png);
			position: relative;
			background-position-x:50px;
			overflow: hidden;
		}

		#bird {
			width: 34px;
			height: 25px;
			background: url(imagesgame/birds.png) -8px -10px;
			position: absolute;
			top: 100px;
			left: 100px;

		}
	</style>
</head>
<body>
	<!--搭建骨架-->
	<div id="game">
		<div id="bird"></div>
	</div>
</body>
<script>
	window.onload = function(){
		


	}
	//让小鸟飞起来 背景向后移动
	//获取元素
	var game = document.getElementById('game');
	var birdel = document.getElementById('bird');

	//以键值对形式保存小鸟和背景参数
	var sky = {
		x:0
	}
	//初始化bird值
	var bird = {
		speedX:5,
		speedY:0,
		x:birdel.offsetLeft,
		y:birdel.offsetTop

	}
	//判断游戏进程  需要一个状态值
	var running = true;
	//定义定时器 使游戏背景移动
	setInterval(function() {
	if (running){
			sky.x -= 5;
		game.style.backgroundPositionX = sky.x + 'px';
		//实现小鸟的上下移动
		//距离 = 时间 * 速度
		bird.speedY +=1;  // 加速度 为 1
		bird.y += bird.speedY;
		if (bird.y < 0) {
			running = false;
			bird.y = 0;
		}
		//当小鸟的offsetTop + 自身的高度大于背景高度时游戏停止 小鸟固定
		if (bird.y + birdel.offsetHeight > 600) {
			running = false;
			bird.y = 600 - birdel.offsetHeight;
		}
			birdel.style.top = bird.y + 'px';
		}

	},30)
	//点击文档时，小鸟跃起
	document.onclick = function() {
		bird.speedY = -10;
	}


	//创建管道的函数
	function createPipe(position) {
		//管道有很多参数 水平位置 自身高度 上下两根管子
		
		var pipe = {};
		//水平位置
		pipe.x = position;
		//上管道的高度
		pipe.uHeight = 200 + parseInt(Math.random()*100)
		//下管道的高度
		pipe.dHeight = 600 - pipe.uHeight - 200;
		//下管top值
		pipe.dTop = pipe.uHeight + 200;
		//创建div
		var uPipe = document.createElement('div');
		uPipe.style.width = '52px';
		uPipe.style.height = pipe.uHeight + 'px';
		uPipe.style.position = 'absolute';
		uPipe.style.top = '0px';
		uPipe.style.left = pipe.x + 'px';
		uPipe.style.background = 'url(imagesgame/pipe2.png) center bottom';
		game.appendChild(uPipe);
		//上管道end

		//下管道start
		var dPipe = document.createElement('div');
		dPipe.style.width = '52px';
		dPipe.style.height = pipe.dHeight + 'px';

		dPipe.style.position = 'absolute';
		dPipe.style.top = pipe.dTop + 'px';
		dPipe.style.left = pipe.x + 'px';
		dPipe.style.background = 'url(imagesgame/pipe1.png) center top';
		game.appendChild(dPipe);

		//让管道动起来
		setInterval(function() {
			if(running) {
				pipe.x -= 1;
				uPipe.style.left = pipe.x + "px";
				dPipe.style.left = pipe.x + "px";	

				if (pipe.x < -52 ) {
					pipe.x = 800;

				}
			}
			var uCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y < pipe.uHeight;

			var dCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y > pipe.uHeight + 200;

			if (uCheck || dCheck) {
				running = false;
			}

		},2)
	}


createPipe(400);
createPipe(600);
createPipe(800);
createPipe(1000);
	


	
</script>
</html>