用js写飞机大战的小游戏

最新推荐文章于 2024-06-10 17:33:11 发布

疯狂进击的二胖~

最新推荐文章于 2024-06-10 17:33:11 发布

阅读量7.2k

点赞数 3

分类专栏： js小项目练习文章标签：用js写飞机大战的小游戏

本文链接：https://blog.csdn.net/qq_40896410/article/details/82261074

版权

飞机大战思路整理飞机大战分为5个阶段: 1.游戏开始阶段 1.0定义整个游戏的全局变量，并进行初始化 1.1.0创建游戏背景图片 1.1.1初始化背景图片的数据 1.1.2创建游戏开始阶段的构造函数 ...

摘要由CSDN通过智能技术生成

飞机大战思路整理

飞机大战分为5个阶段:
1.游戏开始阶段
1.0定义整个游戏的全局变量，并进行初始化
1.1.0创建游戏背景图片
1.1.1初始化背景图片的数据
1.1.2创建游戏开始阶段的构造函数
*绘制方法
*运动方法
1.1.3创建游戏开始的对象
1.1.4绘制游戏名
2.游戏加载阶段
2.0绘制游戏加载
2.1.0创建游戏加载时的图片，并放在一个数组中
2.1.1初始化游戏加载时的数据
2.1.2创建游戏加载时的构造函数
*绘制方法
*运动方法
2.1.3创建游戏加载时的对象
2.1.4增加鼠标点击事件（点击第一阶段会跳转到第二阶段）
3.游戏运行阶段
3.1 绘制我方飞机
3.1.0创建我方飞机的图片，并把它们放进数组中；
3.1.1初始化我方飞机的数据；
3.1.2创建我方飞机的构造函数；
*绘制方法
*运动方法
*碰撞方法（在3.3.8中调用）
*射击方法（我方飞机射击时，要调用子弹产生的对象实例）
3.1.3创建我方飞机的对象
3.1.4增加鼠标移动事件（当鼠标移动的时候我方飞机要跟着移动）
3.2 绘制子弹
3.2.0创建子弹的图片
3.2.1初始化子弹的数据
3.2.2创建子弹的构造函数
*绘制方法
*运动方法
*碰撞方法（在3.3.8中调用）
3.2.3定义一个子弹的数组。将新的子弹的对象实例放进数组中（方便后面遍历、增加、删除）
3.2.4创建绘制子弹的函数：遍历数组调用子弹对象的构造函数中的绘制子弹的方法
3.2.5创建子弹移动函数：遍历数组调用子弹对象的构造函数中子弹运动的方法
3.2.6创建删除子弹的函数:
删除子弹满足的条件：1.碰撞的时候删除子弹
2.子弹的纵坐标小于负的子弹的高度的时候删除子弹
3.3 绘制敌方飞机
3.3.0创建敌方飞机的图片（分别用3个数组存放：区别小飞机、中飞机、大飞机）
3.3.1分别初始化三个类型飞机的数据
3.3.2创建敌方飞机的构造函数
*绘制方法
*运动方法
*敌方飞机碰撞的方法（在3.3.8中调用）
*检测敌方飞机是否碰撞的方法（有可能是我方飞机碰撞、也有可能事子弹碰撞）
3.3.3定义一个存放敌方飞机的数组（方便后面函数遍历、增加子弹、删除、改变）
3.3.4创建一个函数，往数组中添加数据（小飞机、中飞机、大飞机）————较难
它们的产生是随机的，将new出来的飞机对象实例添加进入数组中。
3.3.5创建函数，遍历画出敌方飞机（调用数组中对象的方法）
3.3.6创建函数，遍历出敌方飞机的运动（调用数组对象中的方法）
3.3.7创建函数，删除敌方飞机
删除敌方飞机满足的条件：
1.敌方飞机的高度大于整个画布的高度时
2.敌方飞机爆炸完成时
3.3.8创建函数，敌方飞机碰撞以后的函数（循环遍历敌方飞机的数组）
判断：1.碰撞为我方飞机的时候
调用数组元素中的检测是否碰撞的方法（传入的实参就是我方飞机）
分别调用敌方飞机和我方飞机的撞击以后的方法
2.碰撞为子弹的时候
调用数组元素中的检测是否碰撞的方法（传入的参数就是子弹数组的元素）
分别调用敌方飞机和子弹数组元素中的撞击以后的方法
3.4绘制分数值和生命值
4.游戏暂停阶段
用画布的鼠标移出事件暂停游戏状态
用画布的鼠标移入事件开始游戏状态
5.游戏结束阶段
绘制游戏结束
写一个定时器：调用所有的对象方法以及函数调用
通过判断游戏状态调用所对应的对象方法和函数
注意：在后面的暂停阶段和游戏结束阶段要把前面第三阶段的我方飞机、子弹、敌方飞机都显示出来


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#canvas{
				display: block;
				margin: 100px auto;
				/*border: solid 1px #000;*/
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="480" height="650"></canvas>
		<script>
			var canvas=document.getElementById("canvas");
			var context=canvas.getContext("2d");
//          0.游戏初始化
//			0.1将游戏分为几个阶段
			var START=0;//   第一个阶段   游戏开始阶段
			var STARTING=1;//第二个阶段   游戏游戏开始的加载阶段
			var RUNNING=2;// 第三个阶段   游戏运行阶段
			var PAUSE=3;//   第四个阶段   游戏暂停阶段
			var GAMEOVER=4;//第五个阶段   游戏结束阶段
//			0.2定义一个自己的状态,去和上面的状态作比较
			var state=START;
//			0.3定义画布的宽和高
			var WIDTH=canvas.width;
			var HEIGHT=canvas.height;
//			0.4定义游戏的得分
			var score=0;
//			0.5定义我方飞机的生命值为3
			var life=3;
			//初始化阶段完成
			
			//1.游戏刚开始的阶段
			//1.1加载背景图片
			//1.1.1创建加载背景图片的对象
			var bg=new Image();
			bg.src="img/background.png";
			//1.1.2初始化背景图片的数据
			var BG={
				imgs:bg,
				width:480,
				height:852
			}
			//1.1.3创建背景图片的构造函数（构造出一个对象）  
			//这里使用了创建对象的第二种方法：先使用函数来定义对象，然后创建新的对象实例
			//构造函数的特点： 
//			①构造函数的首字母必须要大写，用来区分与普通函数 
//			②内部

最低0.47元/天解锁文章

疯狂进击的二胖~

关注

3
点赞
踩
38

收藏

觉得还不错? 一键收藏
4
评论
用js写飞机大战的小游戏

飞机大战思路整理飞机大战分为5个阶段: 1.游戏开始阶段 1.0定义整个游戏的全局变量，并进行初始化 1.1.0创建游戏背景图片 1.1.1初始化背景图片的数据 1.1.2创建游戏开始阶段的构造函数 ...
复制链接

扫一扫

专栏目录