初学JS，使用JavaScript和HTML5画布编写游戏Flappy Bird简易版

最新推荐文章于 2020-08-11 20:59:50 发布

原创

最新推荐文章于 2020-08-11 20:59:50 发布 · 1.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#js #flappy bird #html5 #canvas

本文介绍了初学者如何使用JavaScript和HTML5的Canvas标签编写经典游戏Flappy Bird的简易版。文章详细阐述了所需的能力要求，包括JavaScript、HTML5 Canvas和面向对象思想，并详细分解了游戏设计、画布绘制、游戏逻辑和计分系统的实现过程。通过实例代码和分步解释，帮助读者理解游戏开发的基本思路和技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用js和H5<canvas>标签编写经典游戏：Flappy Bird 简易版

声明：本人初学JS和H5，本文涉及编写方式以及算法如有更好地改进，请各位大佬提出建议~

一.能力要求：

JavaScript相关知识，HTML5<canvas>，json，面向对象思想等。

二.需要完成以下工作：

1.设计游戏（包括小鸟、柱子等，我们必须遵循一条清晰的逻辑：鸟是在做竖直上抛和自由落体运动，柱子不断创建并向左移动，将鸟和柱子隔离开，各自动各自的）

2.画不会扇翅膀的小鸟

3.让鸟飞起来（自由落体，点击鼠标竖直上抛）

4.逻辑部分（柱子向左移动，小鸟碰到柱子游戏结束等）

5.分数计算（每通过一个柱子分数加1）

6.加背景（图片，音乐，音效等）

三.开始编写：

首先我们需要创建4个类：game.html(用来运行游戏)，game.js(用来写逻辑部分)，paint.js(用来画物体)，pojo.js(用来创建对象，进行封装)

game.html类：

用HTML5编写，需要加<!DOCTYPE HTML>，并且我习惯把margin设置为0：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>flappy bird</title>
		
		<style>
		/*设置边距为0*/
			body{
				margin:0px;
				overflow:hidden;
			}
		/*加背景*/
			#can1{
				background-image: url(背景.jpg);
				background-size:100%100%;
			}
		</style>
		<script type="text/javascript" src="pojo.js"></script>
		<script type="text/javascript" src="game.js"></script>
		<script type="text/javascript" src="paint.js"></script>
		<!--调用run()-->
		<script>
		    window.onload = function (){
			run();
		    };
		</script>
	</head>
	<body>
		<!--画布标签，设置长宽像素-->
		<canvas id="can1" width="1536" height="733"></canvas>
		<!--加入背景音乐-->
		<audio src="bgm.mp3" autoplay loop></audio>
		<!--加入点击鼠标触发的音效-->
		<audio id="audio1" autoplay></audio>
	</body>
</html>

其实在html文件里就调用run()方法，<body>里面就写<canvas>标签和<audio>用来调入音频文件

pojo.js类：用来存放类，我们需要两个类：小鸟的柱子。在这里，我们做的是简易版的，所以小鸟用圆近似代替，这样的话之后的碰撞检测好写一些。其中，确定的值直接写出来，可变的值不赋值。

书写格式如下：