分享一个比较简单的canvas+js 飞翔的小鸟小游戏

最新推荐文章于 2022-10-19 16:27:51 发布

ZzGGXLXBX

最新推荐文章于 2022-10-19 16:27:51 发布

阅读量1.9k

点赞数 2

本文链接：https://blog.csdn.net/ZzGGXLXBX/article/details/73647533

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		canvas{
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<canvas width="456" height="512" id="canvas">
		对不起,您的浏览器不支持画布,请升级!
	</canvas>

	<script>
		//版本 1.0
		//没有完成的任务
		//1,小鸟倾斜
		//2,开始画面
		//3,2位以上的分数 
		//4,多个排水管同时出现

		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		//获取最优执行频率的变量
		var raf;

		//整个界面的图片绘制
		var pipeup = new Image();//上下水道
		var pipedown = new Image();//下下水道
		var sky = new Image();//天空
		var land = new Image();//大地
		var birds = new Image();//小鸟
		var count = new Image(); //分数
		var count1 = new Image(); //分数
		var b = parseInt(Math.random()*2.99);  //0,1,2
		var d = parseInt(Math.random()*1.99);  //0,1

		//取值
		pipeup.src = 'images/pipe_up.png';
		pipedown.src = 'images/pipe_down.png';
		sky.src = 'images/bg_' + d + '.png'; //白天或者黑夜
		land.src = 'images/land.png';
		birds.src = 'images/bird' + b + '_0.png';
		count.src = 'images/font_048.png';
		count1.src = 'images/font_048.png';

		//地图
		function map(){
			for (var i = 0; i < 2; i++) {
				ctx.drawImage(sky,i*288,0,288,512);
				ctx.drawImage(land,i*266,400,336,112);
			}
			ctx.drawImage(count1,20,20,34,64);
			ctx.drawImage(count,54,20,34,64);
		}
		//小鸟对象
		var bird = {
			x:100,
			y:220,
			vx:5,
			vy:2,
			src:'images/bird' + b + '_0.png',
			draw:function(){
				birds.src = this.src;
				ctx.drawImage(birds,this.x,this.y,60,60);
				// ctx.save();
				// ctx.translate(bird.x*1.2,bird.y*1.2);
				// ctx.rotate(bird.vy/ 7);
				// ctx.drawImage(birds,-birds.width / 4,-birds.height / 4);
				// ctx.restore();
			}
		}

		//下水道
		var pipe = {
			x:456,
			upy:220,
			downy:-220,
			vx:1.5,
			upsrc:'images/pipe_up.png',
			downsrc:'images/pipe_down.png',
			draw:function(){
				pipeup.src = this.upsrc;
				pipedown.src = this.downsrc;
				ctx.drawImage(pipeup,this.x,this.upy,80,320);
				ctx.drawImage(pipedown,this.x,this.downy,80,320);
			}
		};

		//游戏结束的函数
		function gameover(){
			ctx.fillStyle = 'rgba(255,255,255,0.5)';
			ctx.fillRect(0,0,canvas.width,canvas.height);
			var over = new Image();
			over.src = 'images/text_game_over.png';
			over.onload = function(){
				//确定图片位置,显示图片
				ctx.drawImage(over,80,100,300,80);
			}
			canvas.addEventListener('click',function(){
				location.reload();
			})
		}

		var m = 0;
		var n = 0;
		var score = 0;
		var aa = 0
		//这是一个核心函数
		function draw(){
			//清屏
			ctx.clearRect(0,0,456,512);
			//重新加载地图
			map();
			m++;
			// 每15帧 让小鸟翅膀动一次
			if (m % 4 == 0) {
				n++;
				if (n > 2) {
					n = 0;
				}
				bird.src = 'images/bird' + b + '_' + n + '.png';
				bird.draw();
			}
			//每帧小鸟都会下降0.35px
			bird.vy += 0.25;
			//小鸟水平是不会运动的
			bird.y += bird.vy;
			//下水道一直在运动
			pipe.x -= bird.vx;
			if (pipe.x < -80) {
				pipe.upy = Math.random() * 150 +140;
				pipe.downy = pipe.upy - 440;
				pipe.x = 456;
			}
			//得分
			if (pipe.x == 46) {
				score++;
				if (score > 9) {
					score = 0;
					aa++;
				}
				count.src = 'images/font_0'+(48 + score) + '.png';
				count1.src = 'images/font_0'+(48 + aa) + '.png';
			}

			//画小鸟
			bird.draw();
			pipe.draw();
			//以最优的频率运动
			raf = window.requestAnimationFrame(draw);
			//判断碰撞
			//没有使用像素检测
			if ((bird.y < pipe.downy + 305 || bird.y + 50 > pipe.upy) && (pipe.x < 150 && pipe.x > 50)) {
				//停止动画
				window.cancelAnimationFrame(raf);
				gameover();
			}
		}

		//点击画布开始游戏
		//每次点击都会给小鸟能量,得到能量小鸟会向上移动7
		canvas.addEventListener('click',function(e){
			//停止动画
			window.cancelAnimationFrame(raf);
			bird.vy = -7;
			raf = window.requestAnimationFrame(draw);
		});

		sky.onload = function(){
			//初始化
			map();
			bird.draw();
		}




	</script>
</body>
</html>

ZzGGXLXBX

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
分享一个比较简单的canvas+js 飞翔的小鸟小游戏

Document canvas{ border: 1px solid #000; } 对不起,您的浏览器不支持画布,请升级! //版本 1.0 //没有完成的任务 //1,小鸟倾斜 //2,开始画面 //3,2位以上的分数 //4,多个排水管同时出现 var canvas = document.getElementById
复制链接

扫一扫