canvas实现飞机打怪兽射击小游戏的示例代码

接触 canvas 也只有一个多月，第一次完整实现一个游戏流程，收获还是挺大的。

射击游戏截图

先上 demo：

游戏规则

要求玩家控制飞机发射子弹，消灭会移动的怪兽，如果全部消灭了则游戏成功，如果怪兽移动到底部则游戏失败。

• 使用 ← 和 → 操作飞机
• 使用空格（space）进行射击
• 需有暂停功能
• 多关卡

场景切换

游戏分为几个场景：

• 开始游戏（.game-intro）
• 游戏中（#canvas）
• 游戏失败（.game-failed）
• 游戏成功（.game-success）
• 游戏通关（.game-all-success）
• 暂停（.game-stop）

实现场景切换，其实是先把所有场景 display: none , 然后通过 js 控制 data-status 分别为 start 、playing 、failed 、success 、all-success 、stop 来实现对应场景 display: block 。

html 和 css 如下：

  <div id="game" data-status="start"> 
    <div class="game-panel">
      <section class="game-intro game-ui">
        <h1 class="section-title">射击游戏</h1>
        <p class="game-desc">这是一个令人欲罢不能的射击游戏，使用 ← 和 → 操作你的飞机，使用空格（space）进行射击，使用回车（enter）暂停游戏。一起来消灭宇宙怪兽吧！</p>
        <p class="game-level">当前level: 1</p>
        <button class="js-play button">开始游戏</button>
      </section>
      <section class="game-failed game-ui">
        <h1 class="section-title">游戏结束</h1>
        <p class="game-info-text">最终得分: <span class="score"></span></p>
        <button class="js-replay button">重新开始</button>
      </section>
      <section class="game-success game-ui">
        <h1 class="section-title">游戏成功</h1>
        <p class="game-next-level game-info-text"></p>
        <button class="js-next button">继续游戏</button>
      </section>
      <section class="game-all-success game-ui">
        <h1 class="section-title">通关成功</h1>
        <p class="game-next-level game-info-text">你已经成功地防御了怪兽的所有攻击。</p>
        <button class="js-replay button">再玩一次</button>
      </section>
      <section class="game-stop game-ui">
        <h1 class="section-title">游戏暂停</h1>
        <button class="js-stop button">游戏继续</button>
      </section>
    </div>
    <div class="game-info game-ui">
      <span class="title">分数:</span>
      <span class="score"></span>
    </div>
    <canvas id="canvas" width="700" height="600">
        <!-- 动画画板 -->
    </canvas>
  </div>

#game{
  width: 700px;
  height: 600px;
  position: relative;
  left: 50%;
  top: 40px;
  margin: 0 0 0 -350px;
  background: linear-gradient(-180deg, #040024 0%, #07165c 97%);
}

.game-ui{
  display: none;
  padding: 55px;
  box-sizing: border-box;
    height: 100%;
}

[data-status="start"] .game-intro {
  display: block;
  padding-top: 180px;
  background: url(./img/bg.png) no-repeat 430px 180px;
  background-size: 200px;
}

[data-status="playing"] .game-info {
  display: block;
  position: absolute;
  top:0;
  left:0;
  padding:20px;
}

[data-status="failed"] .game-failed,
[data-status="success"] .game-success,
[data-status="all-success"] .game-all-success,
[data-status="stop"] .game-stop{
  display: block;
  padding-top: 180px;
  background: url(./img/bg-end.png) no-repeat 380px 190px;
  background-size: 250px;
}

面向对象

整个游戏可以把怪兽（enemy）、飞机（plane）、子弹（bullet）都当作对象，另外还有配置对象（config）和控制游戏逻辑的游戏对象（game）。

游戏相关配置

/**
  * 游戏相关配置
  * @type {object}
  */
var config = {
  status: 'start', // 游戏开始默认为开始中
  level: 1, // 游戏默认等级
  totallevel: 6, // 总共6关
  numperline: 7, // 游戏默认每行多少个怪兽
  canvaspadding: 30, // 默认画布的间隔
  bulletsize: 10, // 默认子弹长度
  bulletspeed: 10, // 默认子弹的移动速度
  enemyspeed: 2, // 默认敌人移动距离
  enemysize: 50, // 默认敌人的尺寸
  enemygap: 10,  // 默认敌人之间的间距
  enemyicon: './img/enemy.png', // 怪兽的图像
  enemyboomicon: './img/boom.png', // 怪兽死亡的图像
  enemydirection: 'right', // 默认敌人一开始往右移动
  planespeed: 5, // 默认飞机每一步移动的距离
  planesize: {
    width: 60,
    height: 100
  }, // 默认飞机的尺寸,
  planeicon: './img/plane.png'
};

定义父类

因为怪兽（enemy）、飞机（plane）、子弹（bullet）都有相同的 x, y, size, speed 属性和 move() 方法，所以可以定义一个父类 element，通过子类继承父类的方式实现。

/*父类：包含x y speed move() draw()*/
var element = function (opts) {
        this.opts = opts || {};
        //设置坐标、尺寸、速度
        this.x = opts.x;
        this.y = opts.y;
        this.size = opts.size;
        this.speed = opts.speed;
};

element.prototype.move = function (x, y) {
        var addx = x || 0;
        var addy = y || 0;
        this.x += addx;
        this.y += addy;
};

//继承原型的函数
function inheritprototype(subtype, supertype) {
        var proto = object.create(supertype.prototype);
        proto.constructor = subtype;
        subtype.prototype = proto;
}

move(x, y) 方法根据传入的 (x, y) 值自叠加。

定义怪兽

怪兽包含特有属性：怪兽状态、图像、控制爆炸状态持续的 boomcount ，和 draw()、down()、direction()、booming() 方法。

/*敌人*/
var enemy = function (opts) {
    this.opts = opts || {};
    //调用父类属性
    element.call(this, opts);

    //特有属性状态和图像
    this.status = 'normal';//normal、booming、noomed
    this.enemyicon = opts.enemyicon;
    this.enemyboomicon = opts.enemyboomicon;
    this.boomcount = 0;
};
//继承element方法
inheritprototype(enemy, element);

//方法：绘制敌人
enemy.prototype.draw = function () {
    if (this.enemyicon && this.enemyboomicon) {

        switch (this.status) {
            case 'normal':
                var enemyicon = new image();
                enemyicon.src = this.enemyicon;
                ctx.drawimage(enemyicon, this.x, this.y, this.size, this.size);
                break;
            case 'booming':
                var enemyboomicon = new image();
                enemyboomicon.src = this.enemyboomicon;
                ctx.drawimage(enemyboomicon, this.x, this.y, this.size, this.size);
                break;
            case 'boomed':
                ctx.clearrect(this.x, this.y, this.size, this.size);
                break;
            default:
                break;
        }
    }
    return this;
};

//方法：down 向下移动
enemy.prototype.down = function () {
    this.move(0, this.size);
    return this;

};

//方法：左右移动
enemy.prototype.direction = function (direction) {
    if (direction === 'right') {
        this.move(this.speed, 0);
    } else {
        this.move(-this.speed, 0);
    }
    return this;
};

//方法：敌人爆炸
enemy.prototype.booming = function () {
    this.status = 'booming';
    this.boomcount += 1;
    if (this.boomcount > 4) {
        this.status = 'boomed';
    }
    return this;
}

• draw() 主要是根据怪兽的状态绘制不同的图像。
• down() 调用父类 move() 方法，传入 y 值控制怪兽向下移动。
• direction() 根据传入的方向值控制左/右移动。
• booming() 让爆炸状态持续4帧，4帧后再消失。

定义子弹

子弹有 fly() 、draw() 方法。

/*子弹*/
var bullet = function (opts) {
    this.opts = opts || {};
    element.call(this, opts);
};

inheritprototype(bullet, element);

//方法：让子弹飞
bullet.prototype.fly = function () {
    this.move(0, -this.speed);
    return this;
};

//方法：绘制子弹
bullet.prototype.draw = function () {
    ctx.beginpath();
    ctx.strokestyle = '#fff';
    ctx.moveto(this.x, this.y);
    ctx.lineto(this.x, this.y - config.bulletsize);
    ctx.closepath();
    ctx.stroke();
    return this;
};

• fly() 调用父类 move() 方法，传入 y 值控制子弹向上移动。
• draw() 因为子弹其实就是一条长度为 10 的直线，通过绘制路径的方式画出子弹。

定义飞机

飞机对象包含特有属性：状态、宽高、图像、横坐标最大最小值，有 hashit()、draw()、direction()、shoot()、drawbullets() 方法。

/*飞机*/
var plane = function (opts) {
    this.opts = opts || {};
    element.call(this, opts);

    //特有属性状态和图像
    this.status = 'normal';
    this.width = opts.width;
    this.height = opts.height;
    this.planeicon = opts.planeicon;
    this.minx = opts.minx;
    this.maxx = opts.maxx;
    //子弹相关
    this.bullets = [];
    this.bulletspeed = opts.bulletspeed || config.bulletspeed;
    this.bulletsize = opts.bulletsize || config.bulletsize;
};
//继承element方法
inheritprototype(plane, element);

//方法：子弹击中目标
plane.prototype.hashit = function (enemy) {
    var bullets = this.bullets;
    for (var i = bullets.length - 1; i >= 0; i--) {
        var bullet = bullets[i];
        var ishitposx = (enemy.x < bullet.x) && (bullet.x < (enemy.x + enemy.size));
        var ishitposy = (enemy.y < bullet.y) && (bullet.y < (enemy.y + enemy.size));
        if (ishitposx && ishitposy) {
            this.bullets.splice(i, 1);
            return true;
        }
    }
    return false;
};

//方法：绘制飞机
plane.prototype.draw = function () {
    this.drawbullets();
    var planeicon = new image();
    planeicon.src = this.planeicon;
    ctx.drawimage(planeicon, this.x, this.y, this.width, this.height);
    return this;
};
//方法：飞机方向
plane.prototype.direction = function (direction) {
    var speed = this.speed;
    var planespeed;
    if (direction === 'left') {
        planespeed = this.x < this.minx ? 0 : -speed;
    } else {
        planespeed = this.x > this.maxx ? 0 : speed;
    }
    console.log('planespeed:', planespeed);
    console.log('this.x:', this.x);
    console.log('this.minx:', this.minx);
    console.log('this.maxx:', this.maxx);
    this.move(planespeed, 0);
    return this;//方便链式调用
};
//方法：发射子弹
plane.prototype.shoot = function () {
    var bulletposx = this.x + this.width / 2;
    this.bullets.push(new bullet({
        x: bulletposx,
        y: this.y,
        size: this.bulletsize,
        speed: this.bulletspeed
    }));
    return this;
};
//方法：绘制子弹
plane.prototype.drawbullets = function () {
    var bullets = this.bullets;
    var i = bullets.length;
    while (i--) {
        var bullet = bullets[i];
        bullet.fly();
        if (bullet.y <= 0) {
            bullets.splice(i, 1);
        }
        bullet.draw();
    }
};

• hashit() 判断飞机发射的子弹是否击中怪兽，主要是判断子弹的横坐标是否在[怪兽横坐标,怪兽横坐标+怪兽高度]范围内，同时子弹的纵坐标在[怪兽纵坐标,怪兽纵坐标+怪兽宽度]范围内，击中返回 true，并移除该子弹。
• draw() 绘制子弹和飞机。
• direction() 因为飞机移动范围有左右边界，需要判断飞机横坐标是否到达边界，如果到达边界 planespeed 为 0，不再移动。
• shoot() 创建子弹对象，保存到 bullets 数组，子弹横坐标为飞机横坐标加上飞机宽度的一半。
• drawbullets() 绘制子弹，从数组最后往回遍历子弹对象数组，调用子弹 fly() 方法，如果子弹向上飞出屏幕，则移除这颗子弹。

定义键盘事件

键盘事件有以下几种状态：

• keydown：用户在键盘上按下某按键时发生。一直按着某按键则会不断触发（opera 浏览器除外）。
• keypress：用户按下一个按键，并产生一个字符时发生（也就是不管类似 shift、alt、ctrl 之类的键，就是说用户按了一个能在屏幕上输出字符的按键 keypress 事件才会触发）。一直按着某按键则会不断触发。
• keyup：用户释放某一个按键是触发。

因为飞机需要按下左键（keycode=37）右键（keycode=39）时（keydown）一直移动，释放时 keyup 不移动。按下空格（keycode=32）或上方向键（keycode=38）时（keydown）发射子弹，释放时 keyup 停止发射。另外按下回车键（keycode=13）暂停游戏。所以，需要定义一个 keyboard 对象监听 onkeydown 和 onkeyup 是否按下或释放某个键。

因为左右键是矛盾的，为保险起见，按下左键时需要把右键 设为 false。右键同理。

//键盘事件
var keyboard = function () {
  document.onkeydown = this.keydown.bind(this);
  document.onkeyup = this.keyup.bind(this);
};
//keyboard对象
keyboard.prototype = {
  pressedleft: false,
  pressedright: false,
  pressedup: false,
  heldleft: false,
  heldright: false,
  pressedspace: false,
  pressedenter: false,
  keydown: function (e) {
    var key = e.keycode;
    switch (key) {
      case 32://空格-发射子弹
        this.pressedspace = true;
        break;
      case 37://左方向键
        this.pressedleft = true;
        this.heldleft = true;
        this.pressedright = false;
        this.heldright = false;
        break;
      case 38://上方向键-发射子弹
        this.pressedup = true;
        break;
      case 39://右方向键
        this.pressedleft = false;
        this.heldleft = false;
        this.pressedright = true;
        this.heldright = true;
        break;
      case 13://回车键-暂停游戏
        this.pressedenter = true;
        break;
    }
  },
  keyup: function (e) {
    var key = e.keycode;
    switch (key) {
      case 32:
        this.pressedspace = false;
        break;
      case 37:
        this.heldleft = false;
        this.pressedleft = false;
        break;
      case 38:
        this.pressedup = false;
        break;
      case 39:
        this.heldright = false;
        this.pressedright = false;
        break;
      case 13:
        this.pressedenter = false;
        break;
    }
  }
};

游戏逻辑

游戏对象（game）包含了整个游戏的逻辑，包括init（初始化）、bindevent（绑定按钮）、setstatus（更新游戏状态）、play（游戏中）、stop（暂停）、end（结束）等，在此不展开描述。也包含了生成怪兽、绘制游戏元素等函数。

// 整个游戏对象
var game = {
  //一系列逻辑函数
  //游戏元素函数
}

1、初始化

初始化函数主要是定义飞机初始坐标、飞机移动范围、怪兽移动范围，以及初始化分数、怪兽数组，创建 keyboard 对象，只执行一次。

/**
   * 初始化函数,这个函数只执行一次
   * @param  {object} opts 
   * @return {[type]}      [description]
   */
init: function (opts) {
    //设置opts
    var opts = object.assign({}, opts, config);//合并所有参数
    this.opts = opts;
    this.status = 'start';
    //计算飞机对象初始坐标
    this.planeposx = canvaswidth / 2 - opts.planesize.width;
    this.planeposy = canvasheight - opts.planesize.height - opts.canvaspadding;
    //飞机极限坐标
    this.planeminx = opts.canvaspadding;
    this.planemaxx = canvaswidth - opts.canvaspadding - opts.planesize.width;
    //计算敌人移动区域
    this.enemyminx = opts.canvaspadding;
    this.enemymaxx = canvaswidth - opts.canvaspadding - opts.enemysize;

    //分数设置为0
    this.score = 0;
    this.enemies = [];
    this.keyboard = new keyboard();

    this.bindevent();
    this.renderlevel();
  },

2、绑定按钮事件

因为几个游戏场景中包含开始游戏（playbtn）、重新开始（replaybtn）、下一关游戏（nextbtn）、暂停游戏继续（stopbtn）几个按钮。我们需要给不同按钮执行不同事件。

首先定义 var self = this; 的原因是 this 的用法。在 bindevent 函数中， this 指向 game 对象，而在 playbtn.onclick = function () {}; 中 this 指向了 playbtn ，这显然不是我们希望的，因为 playbtn 没有 play() 事件，game 对象中才有。因此需要把game 对象赋值给一个变量 self ，然后才能在 playbtn.onclick = function () {}; 中调用 play() 事件。

需要注意的是 replaybtn 按钮在闯关失败和通关场景都有出现，因此获取的是所有 .js-replay 的集合。然后 foreach 遍历每个 replaybtn 按钮，重置关卡和分数，调用 play() 事件。

bindevent: function () {
    var self = this;
    var playbtn = document.queryselector('.js-play');
    var replaybtn = document.queryselectorall('.js-replay');
    var nextbtn = document.queryselector('.js-next');
    var stopbtn = document.queryselector('.js-stop');
    // 开始游戏按钮绑定
    playbtn.onclick = function () {
      self.play();
    };
    //重新开始游戏按钮绑定
    replaybtn.foreach(function (e) {
      e.onclick = function () {
        self.opts.level = 1;
        self.play();
        self.score = 0;
        totalscoretext.innertext = self.score;
      };
    });
    // 下一关游戏按钮绑定
    nextbtn.onclick = function () {
      self.opts.level += 1;
      self.play();
    };
    // 暂停游戏继续按钮绑定
    stopbtn.onclick = function () {
      self.setstatus('playing');
      self.updateelement();
    };
  },

3、生成飞机

createplane: function () {
  var opts = this.opts;
  this.plane = new plane({
      x: this.planeposx,
      y: this.planeposy,
      width: opts.planesize.width,
      height: opts.planesize.height,
      minx: this.planeminx,
      speed: opts.planespeed,
      maxx: this.planemaxx,
      planeicon: opts.planeicon
    });
}

4、生成一组怪兽

因为怪兽都是成组出现的，每一关的怪兽数量也不同，两个 for 循环的作用就是生成一行怪兽，根据关数（level）增加 level 行怪兽。或者增加怪兽的速度（speed: speed + i,）来提高每一关难度等。

//生成敌人
  createenemy: function (enemytype) {
    var opts = this.opts;
    var level = opts.level;
    var enemies = this.enemies;
    var numperline = opts.numperline;
    var padding = opts.canvaspadding;
    var gap = opts.enemygap;
    var size = opts.enemysize;
    var speed = opts.enemyspeed;
    //每升级一关敌人增加一行
    for (var i = 0; i < level; i++) {
      for (var j = 0; j < numperline; j++) {
      //综合元素的参数
        var initopt = {
          x: padding + j * (size + gap),
          y: padding + i * (size + gap),
          size: size,
          speed: speed,
          status: enemytype,
          enemyicon: opts.enemyicon,
          enemyboomicon: opts.enemyboomicon
        };
        enemies.push(new enemy(initopt));
      }
    }
    return enemies;
  },

5、更新怪兽

获取怪兽数组的 x 值，判断是否到达画布边界，如果到达边界则怪兽向下移动。同时也要监听怪兽状态，正常状态下的怪兽是否被击中，爆炸状态下的怪兽，消失的怪兽要从数组剔除，同时得分。

//更新敌人状态
  updateenemeis: function () {
    var opts = this.opts;
    var plane = this.plane;
    var enemies = this.enemies;
    var i = enemies.length;
    var isfall = false;//敌人下落
    var enemiesx = gethorizontalboundary(enemies);
    if (enemiesx.minx < this.enemyminx || enemiesx.maxx >= this.enemymaxx) {
      console.log('enemiesx.minx', enemiesx.minx);
      console.log('enemiesx.maxx', enemiesx.maxx);
      opts.enemydirection = opts.enemydirection === 'right' ? 'left' : 'right';
      console.log('opts.enemydirection', opts.enemydirection);
      isfall = true;
    }
    //循环更新敌人
    while (i--) {
      var enemy = enemies[i];
      if (isfall) {
        enemy.down();
      }
      enemy.direction(opts.enemydirection);
      switch (enemy.status) {
        case 'normal':
          if (plane.hashit(enemy)) {
            enemy.booming();
          }
          break;
        case 'booming':
          enemy.booming();
          break;
        case 'boomed':
          enemies.splice(i, 1);
          this.score += 1;
          break;
        default:
          break;
      }
    }
  },

gethorizontalboundary 函数的作用是遍历数组每个元素的 x 值，筛选出更大或更小的值，从而获得数组最大和最小的 x 值。

//获取数组横向边界
function gethorizontalboundary(array) {
  var min, max;
  array.foreach(function (item) {
    if (!min && !max) {
      min = item.x;
      max = item.x;
    } else {
      if (item.x < min) {
        min = item.x;
      }
      if (item.x > max) {
        max = item.x;
      }
    }
  });
  return {
    minx: min,
    maxx: max
  }
}

6、更新键盘面板

按下回车键执行 stop() 函数，按下左键执行飞机左移，按下右键执行飞机右移，按下空格执行飞机发射子弹，为了不让子弹连成一条直线，在这里设置 keyboard.pressedup 和 keyboard.pressedspace 为 false。

  updatepanel: function () {
    var plane = this.plane;
    var keyboard = this.keyboard;
    if (keyboard.pressedenter) {
      this.stop();
      return;
    }
    if (keyboard.pressedleft || keyboard.heldleft) {
      plane.direction('left');
    }
    if (keyboard.pressedright || keyboard.heldright) {
      plane.direction('right');
    }
    if (keyboard.pressedup || keyboard.pressedspace) {
      keyboard.pressedup = false;
      keyboard.pressedspace = false;
      plane.shoot();
    }
  },

7、绘制所有元素

draw: function () {
    this.renderscore();
    this.plane.draw();
    this.enemies.foreach(function (enemy) {
      //console.log('draw:this.enemy',enemy);
      enemy.draw();
    });
  },

8、更新所有元素

首先判断怪兽数组长度是否为 0 ，为 0 且 level 等于 totallevel 说明通关，否则显示下一关游戏准备画面；如果怪兽数组 y 坐标大于飞机 y 坐标加怪兽高度，显示游戏失败。

canvas 动画的原理就是不断绘制、更新、清除画布。

游戏暂停的原理就是阻止 requestanimationframe() 函数执行，但不重置元素。因此判断 status 的状态为 stop 时跳出函数。

  //更新所有元素状态
  updateelement: function () {
    var self = this;
    var opts = this.opts;
    var enemies = this.enemies;

    if (enemies.length === 0) {
      if (opts.level === opts.totallevel) {
        this.end('all-success');
      } else {
        this.end('success');
      }
      return;
    }
    if (enemies[enemies.length - 1].y >= this.planeposy - opts.enemysize) {
      this.end('failed');
      return;
    }
    //清理画布
    ctx.clearrect(0, 0, canvaswidth, canvasheight);
    //绘制画布
    this.draw();
    //更新元素状态
    this.updatepanel();
    this.updateenemeis();

    //不断循环updateelement
    requestanimationframe(function () {
      if(self.status === 'stop'){
        return;
      }else{
        self.updateelement();
      }
    });
  },

写在最后

通过以上几个步骤，游戏的基本功能就完成了，其他一些游戏流程控制，包括开始、结束、得分计算等在此就不叙述了。

可以优化的地方：在按住空格键的时候，可以连续发射子弹。但是，这时再按一下方向键，发现无法再发射子弹了。最好是能移动的时候，也能保持着子弹的发射。

canvas 做游戏还是比较有趣的，另外还可以把这个游戏加以扩展，改成手机版，画布尺寸通过获取屏幕宽高确定，键盘部分改成触摸事件（touchstart、touchmove、touchend），怪兽出现方式也可以改成从屏幕顶端随机下落，怪兽增加血量（如射击4次才消失）等。

下载地址：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。