canvas小游戏-飞机大战

285 阅读2分钟

前言

canvas小游戏系列之手摸手实现飞机大战;

预览图

项目信息

在线试玩

· 加了丢丢音效,建议打开声音

· 因为放在github上,所以loading会久一丢丢,不过他是真的有在load

源码地址: github.com/Dranein/act…

  • git clone https://github.com/Dranein/activities-.git
  • cd canvas/plane
  • npm install
  • npm run start
  • npm run build

建议阅读之前,可以先阅读上一篇文章: 来从这篇实战中感受canvas做小游戏的技巧;如果了解掌握了上篇的内容,这个飞机大战其实是比较好实现的;

游戏规则

· 整个游戏有7个level,根据得分的情况升级,相对的设置了8架飞机,每次达到升级分数,你的飞机就会升级;

· 敌方的飞机也根据游戏的等级,会出现越来越多种类的飞机,其中一些飞机也有着自己的特性,这边是设置了斜飞,加速度;

· 敌方飞机被子弹打中的话就会爆炸,游戏累加100分;

· 当我方飞机被敌机触碰时,游戏结束;

实现思路

音效方面用了 howler,实现起来也十分方便;

直接拿了上一个小游戏的框架直接做的,也可顺便去瞧瞧 canvas小游戏 - 爱心鱼;

动画的技巧和实现在做爱心鱼的时候已经印象很深刻了,这里主要记录一下一些可扩展的点:

checkLevel()

根据当前的分数this.score去检查等级,当达到指定等级的时候,飞机就会升级,执行upgrade(),并且有一个升级的音效soundUpgrade.play()

  // Canvas.js
  checkLevel() {
    // let arr = [2000, 8000, 15000, 20000, 50000, 100000, 200000];
    let arr = [1000, 2000, 3000, 4000, 5000, 6000, 7000];
    if (arr.indexOf(this.score) > -1) {
      this.myPlane.upgrade();
      soundUpgrade.play();
      window.gameLevel++;
    }
  }

upgrade()

飞机的upgrade()实现飞机升级的变化,这边是处理了飞机的模型,子弹的速度shootSpeed和加了一个波动的效果waveList,后续根据需求,也可以替换子弹的img或者子弹发射的数量,实现也就是在子弹执行draw()的时候做文章;但有一点要注意的是,如果子弹宽高改变了,碰撞系数就要重新计算修改;

// MyPlane.js
  upgrade() {
    this.level++;
    this.shootSpeed += 1;
    if (this.level > img_Plane.length) this.level = img_Plane.length - 1;
    this.img = img_Plane[this.level];
    this.waveList.push(new Wave({
      x: 0,
      y: 0,
      radius: 100,
      ctx: this.ctx
    }))
  }

dranein@163.com

地址:github.com/Dranein/act…