Html飞机大战(十四): 分数编辑和生命值设定

好家伙，这章让我感受到了面向对象的优势了

 

1.分数设置

每个种类的敌机分数都设置好了，

那么当我们击毁不同的敌机后，加上不同的分数就行了

但是我们还是要想一下，

 

我要在哪里放这个分数增加的方法

两个思路

1.在敌机的生命值耗尽后，增加该敌机对应的分数

2.在敌机被删除后，增加该敌机对应的分数

 

显然第一个方案更好，为什么？

我们可以直接把这个方法写进enemy类里面，便于管理

（其实都差不了太多。。。）

 

Enemy类的代码：

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));
        this.y = -config.height;
        this.life = config.life;
        this.score = config.score;
        this.frame = config.frame;
        this.img = this.frame.live[0];
        this.live = true;
        this.speed = Math.floor(Math.random() * (config.minSpeed - config.maxSpeed + 1)) + config.maxSpeed;
        this.lastTime = new Date().getTime();
        this.deathIndex = 0;
        this.destory = false;
      }
      move() {
        const currentTime = new Date().getTime();
        if (currentTime - this.lastTime >= this.speed) {
          if (this.live) {
            this.img = this.frame.live[0];
            this.y++;
            this.lastTime = currentTime;
          } else {
            this.img = this.frame.death[this.deathIndex++];
            if (this.deathIndex === this.frame.death.length) {
              this.destory = true;
            }
          }
        }
      }
      paint(context) {
        context.drawImage(this.img, this.x, this.y);
      }
      outOfBounds() {
        if (this.y > 650) {
          return true;
        }
      }
      hit(o) {
        let ol = o.x;
        let or = o.x + o.width;
        let ot = o.y;
        let ob = o.y + o.height;
        let el = this.x;
        let er = this.x + this.width;
        let et = this.y;
        let eb = this.y + this.height;
        if (ol > er || or < el || ot > eb || ob < et) {
          return false;
        } else {
          return true;
        }
      }
      collide() {
        this.life--;
        if (this.life === 0) {
          this.live = false;
          score += this.score;
        }
      }
    }

一行代码，直接搞定

 score += this.score;

 

 

2.关于英雄生命值的设定

在检测到英雄的destory属性变为false后我们动用我们的“扣除生命值方法”

function deleteComponent() {
      if (hero.destory) {
        life--;
        hero.destory = false;
        if (life === 0) {
          state = END;
        } else {
          hero = new Hero(HERO);
        }
      }

 没命了，自然就Game over

有命的话，跑完死亡爆炸动画，就再新建一个实例

 

3.记得改把const 改成 let 

//初始化一个英雄实例 英雄是会变的
    let hero = new Hero(HERO);

 

4.绘制分数和生命面板

// 全局函数 来绘制所有的子弹/敌人组件 绘制score&life面板
    function paintComponent() {
      for (let i = 0; i < hero.bulletList.length; i++) {
        hero.bulletList[i].paint(context);
      }
      for (let i = 0; i < enemies.length; i++) {
        enemies[i].paint(context);
      }
      context.font = "20px 微软雅黑";
      context.fillStyle = "red";
      context.textAlign = "left";
      context.fillText("score: " + score, 10, 20);
      context.textAlign = "right";
      context.fillText("life: " + life, 480 - 10, 20);
      //重置样式
      context.fillStyle = "black";
      context.textAlign = "left";
    }

样式的调整

按你自己的浏览器来，反正就那几个参数总有一个合适的

 

调完记得重置

不然后面的样式会出错

 

 

来看看效果吧

 

 

（非常nice）