之前做过一个红包雨和弹幕，本着既然追求刺激，那就贯彻到底的原则,就用vue来写一个小游戏看看，呈现基本如下

1.主要对象

我们是面向对象编程，先设定对象

classDiagram
FlyObj <|-- Hero
FlyObj <|-- Airplane
FlyObj <|-- Award
FlyObj <|-- Bullet
FlyObj: int x
FlyObj: int y
FlyObj: int width
FlyObj: int Height
FlyObj: outOfWindow()
FlyObj: step()
FlyObj: reset()
FlyObj: shootBy()

class Airplane {
 int life
 int score
 string type
 int speed
 step()
 getScore()
 subLife()
 isDie()
 shoot()
 reset()
}

class Hero {
  int shootLv
  int shootSpeed
  int shootPower
  int shootType
  int life
  reset()
  addLife()
  subLife()
  addShoot()
  supShoot()
  changeShootType()
  getAward()
  shoot()
}

class Award {
 int xSpeed
 int xSpeed
 int awardType
 step()
 reset()
}

class Bullet {
  speed
  xSpeed
  life
  reset()
  subLife()
  isDie()
}

这里面主要的4个类都是从FlyObj继承来的，FlyObj有上面的几个主要属性，x坐标，y坐标，width宽度，height长度

reset()是让后面子类可以重写的一个函数，因为画布上面所有的元素都是div，不能频繁的删除和增加页面的元素，每次使用之后如果有闲置的div元素再拿出来时候就可以 shootBy()是所有都会使用到的一个碰撞函数

            shootBy(obj) {
                let x1 = obj.x - this.width / 2;
                let x2 = obj.x + this.width / 2 + obj.width;
                let y1 = obj.y - this.height / 2;
                let y2 = obj.y + this.height / 2 + obj.height;

                let herox = this.x + this.width / 2;
                let heroy = this.y + this.height / 2;

                return herox > x1 && herox < x2 && heroy > y1 && heroy < y2;
            }

Hero是自己控制的飞机，会多出很多的属性和方法，火力增减，生命增减，弹道切换等等

敌方飞机我一个写了3个类，普通的（Airplane），射击的（ShootAirplane），快速飞机（FastAirplane）， 这里还可以继承出更多，但是基本类型都有了，可以通过射击飞机在继承出Boss飞机

奖励类最简单，就是多出一个奖励类型的属性（awardType）

子弹里面有三个类，主角射出的子弹（Bullet），敌方子弹（EnemyBullet），释放大招的子弹飞机（MaxFireBullet），反正主要就是撞

2.计时器

                 pauseTimer() {
                    clearInterval(this.pushAirplaneTimer);
                    clearInterval(this.pushAwardTimer);
                    clearInterval(this.pushBulletTimer);
                    clearInterval(this.bulletTimer);

                    clearInterval(this.airplaneTimer)
                    clearInterval(this.awardTimer)
                    clearInterval(this.enemyBulletTimer)
                },

画布上面的运动主要就是这几个timer来推进的，控制dom的transfrom：transla(x,y)，transform可以硬件加速，应该比改变top和left好些（其实我也是个水狗，我看虎牙的弹幕也是改变transfrom：transla(x,y)来做的，弹幕过去之后不删除再复用）

3.飞行元素队列

   airplaneList: [], //敌机数列
   awardList: [], //奖励列表
   bulletList: [], //子弹列表
   enemyBulletList: [], //敌方子弹队列

 <div class="airplane fly-obj" v-for="item in bulletList" :style="{transform:`translate(${item.x}px, ${item.y}px)`,width:`${item.width}px`,
            height:`${item.height}px`}">
 </div>
  <div class="bullet fly-obj" v-for="item in bulletList" :style="{transform:`translate(${item.x}px, ${item.y}px)`,width:`${item.width}px`,
            height:`${item.height}px`}">
 </div>
  <div class="award fly-obj" v-for="item in bulletList" :style="{transform:`translate(${item.x}px, ${item.y}px)`,width:`${item.width}px`,
            height:`${item.height}px`}">
 </div>
 <div class="enemy-bullet fly-obj" v-for="item in bulletList" :style="{transform:`translate(${item.x}px, ${item.y}px)`,width:`${item.width}px`,
            height:`${item.height}px`}">
 </div>

上面飞行的元素主要就是这4个队列里面的，然后再html对应渲染上去，碰撞也就是这几个队列里面的元素瞎几把乱撞。

4.游戏控制属性

   data: {
     score: 0, //得分
     power: 100, //能量条
     pause: false, //暂停控制

   }
   computed：{
     //难度系数根据得分越高越难
     deffcultLv(){}
   }
     watch: {
                deffcultLv(val) {
                    this.resetPushAirPlaneTimer(val)
                },
                shootSpeed(val) {
                    this.resetPushBulletTimer(val)
                },

                pause(val) {
                    if (!val) {
                        this.startTimer();
                    } else {
                        this.pauseTimer();
                    }
                },

                life(val) {
                    if (val <= 0) {
                        //游戏结束
                        console.log('游戏结束')
                        this.pauseTimer();
                    }
                }
      },

没了，其实还可以给主角飞机加2个僚机，再来个boss什么的，但是目前这个我连500分都打不过，先不加了 毁灭吧，赶紧的

代码地址

在线体验

带哥，带姐们如果需要可以看看

我是一条水狗