Html飞机大战(九): 使徒来袭 （设计敌机）

好家伙，本篇介绍敌机

 

好了,按照惯例我们来理一下思路:

 

我们有一个敌机类,第一步当然是实例一个敌机对象,

然后我们把这个敌机放入我们的敌机群(敌机数组)

然后是熟悉的移动和绘制

 

那我们回顾一下子弹的生成逻辑

变量： 子弹  bullet  弹夹（用来装子弹的东西）bulletList[] 

方法：装填子弹  绘制子弹 移动子弹

子弹发射的物理逻辑是很简单的：

生产第一个子弹，推入弹夹中，绘制弹夹（即绘制弹夹中的所有子弹)，

生产第二个子弹，同样推入弹夹，移动第一颗子弹（应该说是改变第一颗子弹的y坐标），绘制弹夹中的所有子弹 

。。。。。。

生产第n个子弹，推入弹夹中，改变第n-1颗子弹的Y坐标，绘制弹夹中的所有子弹

 

有没有感觉到两者逻辑的相似之处

（像啊，太像了）

 

 

子弹和敌机的处理,本质上是用的是同一套逻辑

 

那么,开始干活:

 

1.配置项

这里我们会用到两种类型的配置项E1和E2

（因为我们有两种类型的敌人，大敌机和小敌机，其中e1为小敌机（血少），e2为大敌机（血厚））

先设置一个数组存放图片资源

//e1用于存放小敌机的图片素材         const e1 = {             live: [],             death: [],         }         e1.live[0] = new Image();         e1.live[0].src = "img/enemy1.jpg"         e1.death[0] = new Image();         e1.death[0].src = "img/enemy1_boom1.jpg"         e1.death[1] = new Image();         e1.death[1].src = "img/enemy1_boom2.jpg"         e1.death[2] = new Image();         e1.death[2].src = "img/enemy1_boom3.jpg"          //e2用于存放小敌机的图片素材         const e2 = {             live: [],             death: [],         }         e2.live[0] = new Image();         e2.live[0].src = "img/enemy2.jpg"         e2.death[0] = new Image();         e2.death[0].src = "img/enemy2_boom1.jpg"

 

 

 

  

 

 

 

 （图片素材来自网络）

 

 

 

 2.敌机配置项

//小敌机         const E1 = {             type: 1,             width: 57,             height: 51,             life: 1, //少点血,一下打死             score: 1,             frame: e1,             minSpeed: 20,             maxSpeed: 10,         }         //大敌机         const E2 = {             type: 2,             width: 69,             height: 95,             life: 2,             frame: e2,             minSpeed: 50,             maxSpeed: 20,         }

minSpeed: 50, maxSpeed: 20,
值得说明一下，这两个玩意是为了弄敌机的随机速度（更刺激一点，但实际上好像没什么感觉）
关于如何弄到一个”随机速度“，接着往下看

3.敌机类

class Enemy {              constructor(config) {                 //敌机类型                 this.type = config.type;                 //敌机宽,高                 this.width = config.width;                 this.height = config.height;                 //敌机的初始化位置                 this.x = Math.floor(Math.random() * (480 - config.width));                 //这里我们让飞机从头部开始渲染,所以Y轴坐标自然是飞机高度的负值                 this.y = -config.height;                 //敌机生命                 this.life = config.life;                 //敌机分数                 this.score = config.score;                 //敌机图片库                 this.frame = config.frame;                 //此刻展示的图片                 this.img = null;                 //活着的证明                 this.live = true;                 // this.minSpeed = config.minSoeed;                 // this.maxSpeed = config.speed;                 //随机去生成一个速度                 this.speed = Math.floor(Math.random() * (config.minSpeed - config.maxSpeed + 1)) + config.maxSpeed;                 //最后渲染的时间                 this.lastTime = new Date().getTime();              }             //移动敌机             move() {                 const currentTime = new Date().getTime();                 //                                  if (currentTime - this.lastTime >= this.speed) {                     // console.log("此处为this.frame"+this.frame.live[0]);                     this.img = this.frame.live[0];                     this.y++;                     //时间修正                     this.lastTime = currentTime;                 }             }              //渲染敌机方法             paint(context) {                 // console.log("此处为this.img"+this.img);                 if(this.img !=null){                     context.drawImage(this.img, this.x, this.y);                   }                              }         }

 

 

3.1.随机速度

先浅浅的说明一下

随机数方法 Math.random

 

这玩意会在[0,1)也就是在0到1之间取一个值

然后问题来了,这是一个半开半闭区间,也就是说它会取到0但是不会取到1

this.speed = Math.floor(Math.random() * (config.minSpeed - config.maxSpeed + 1)) + config.maxSpeed;

在这里我们要取的是一个10到20之间的速度由于我们向下取整

Math.floor(Math.random() * (config.minSpeed - config.maxSpeed )) + config.maxSpeed;

必然只能取得10-19之间的数

于是我们在(config.minSpeed - config.maxSpeed )中加一

变成(Math.random() * (config.minSpeed - config.maxSpeed +1))

（聪明的你一定能很快想明白，而愚蠢的我想了很久才想明白）

3.2.敌机的移动方法

move() {                 const currentTime = new Date().getTime();                 //                                  if (currentTime - this.lastTime >= this.speed) {                     // console.log("此处为this.frame"+this.frame.live[0]);                     this.img = this.frame.live[0];                     this.y++;                     //时间修正                     this.lastTime = currentTime;                 }             }

移动同样的用时间判定的方式去控制速率

现在和过去的时间差大于速度，更新地址

3.3.渲染方法

paint(context) {                 // console.log("此处为this.img"+this.img);                 if(this.img !=null){                     context.drawImage(this.img, this.x, this.y);                   }                              }

嗯，非常好理解了，多加的一个if是为了防止出现空img导致报错

4.全局函数（生产敌机）

//以下三项均为全局变量         const enemies = [];         //敌机产生的速率         const ENEMY_CREATE_INTERVAL = 2000;         let ENEMY_LASTTIME = new Date().getTime();          //全局函数 用于生产敌机         function createComponent() {             const currentTime = new Date().getTime();             const forenemyTime = new Date().getTime();              //一手经典判断             if (currentTime - ENEMY_LASTTIME >= ENEMY_CREATE_INTERVAL) {                 //当时间满足 实例化一架敌机 放入敌机数组中                 // 小飞机 70% 中飞机30%                 //用随机数去弄概率                 //[0,99]                 //Math.random()=>[0,1)*100                 //EnemyTypeRandom产生的随机数用于判断产生不同的飞机                 let EnemyTypeRandom = Math.floor(Math.random() * 100);                 if (EnemyTypeRandom > 70) {                     enemies.push(new Enemy(E1));                 } else if (EnemyTypeRandom < 30) {                     enemies.push(new Enemy(E2));                 }                 console.log(enemies);                 //更新时间                 ENEMY_LASTTIME = currentTime;             }         }

这里同样的，我们用随机数去控制出现大/小敌机的概率

（E1，E2分别是大小敌机的配置项）

let EnemyTypeRandom = Math.floor(Math.random() * 100);                 if (EnemyTypeRandom > 70) {
　　　　　　　　　　　　//产小敌机                     enemies.push(new Enemy(E1));                 } else if (EnemyTypeRandom < 30) {
　　　　　　　　　　　　//产大敌机                     enemies.push(new Enemy(E2));                 }

你细品，这个控制得还是非常巧妙的

 

5.全局函数渲染

到这里就非常简单了

这里也揭开了前面的谜底

因为敌机生成和子弹生成的逻辑太过相似

所以我们把他们放到同一个全局函数是一个非常明智的选择

//全局函数 来移动所有的子弹/敌人组件         function judgeComponent() {             console.log("judge被触发");             for (let i = 0; i < hero.bulletList.length; i++) {                 hero.bulletList[i].move();             }             for(let i=1;i<enemies.length;i++){                 enemies[i].move();             }         }         //全局函数 来绘制所有的子弹/敌人组件         function paintComponent() {             for (let i = 0; i < hero.bulletList.length; i++) {                 hero.bulletList[i].paint(context);             }             for(let i=1;i<enemies.length;i++){                 enemies[i].paint(context);             }         }

 

6.方法调用

case RUNNING:                         sky.judge();                         sky.paint(context);                         //加载主角                          hero.paint(context);                         hero.shoot();                         createComponent();                         //子弹发射                         judgeComponent();                         paintComponent();                         deleteComponent();                         // context.drawImage(hero_frame.live[0], 0, 0);                         break;

 

 
ok，来看看效果吧：

 

 

 

确实是非常地nice啊