飞机大战思路整理
飞机大战分为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创建背景图片的构造函数(构造出一个对象)
//这里使用了创建对象的第二种方法:先使用函数来定义对象,然后创建新的对象实例
//构造函数的特点:
// ①构造函数的首字母必须要大写,用来区分与普通函数
// ②内部