爆炸效果的实现

当识别到击中后将此坦克将触发explode 爆炸效果，然后每帧 判断 isDestroied 是否销毁，后续每帧将 explosion_count++ 从 0 到 5，然后更改alive 状态为0 代表已销毁。

if (s instanceof Tank && s.alive && s.isDestroied()) {  s.explode() } this.isDestroied = function () {  return explosion_count > 0  }  this.explode = function () {  if (explosion_count++ === 5) {  this.alive = 0  }  }

然后 explosion_count 的数值，从0 到 5 代表爆炸效果图的5帧

this.getImg = function () {  if (explosion_count > 0) {  return {  width: TANK_EXPLOSION_FRAME[explosion_count].dimension[0],  height: TANK_EXPLOSION_FRAME[explosion_count].dimension[1],  offset_x: TANK_EXPLOSION_FRAME[explosion_count].image_coordinates[0],  offset_y: TANK_EXPLOSION_FRAME[explosion_count].image_coordinates[1],  }  } else {  return {  width: width,  height: height,  offset_x: this.type.image_coordinates[0],  offset_y: this.type.image_coordinates[1],  }  }  }

到现在我们的坦克游戏已经基本可玩了，只不过现在是一片大平原，毫无遮拦，我们该为画布增加一些障碍物如墙体，石头等，增加游戏可玩性。

生成障碍物（石墙、砖墙等）

有了之前tanke 和 子弹的构建函数，现在这个 Block 就简单多了，只需要定义好基本的信息，如坐标，宽高、状态、方向，然后借用 apply 来使用 CanvasSprite 上的通用方法。

let Block = function (x, y, direction, type) {  type = type || BLOCK_TYPE.BLOCK_BRICK  let alive = 1  let width = type.dimension[0]  let height = type.dimension[1]  let explosion_count = 0  this.type = type  this.x = x  this.y = y  this.genre = 'block'  this.direction = direction || DIRECTION.UP  CanvasSprite.apply(this, [  {  alive: 1,  border_y: HEIGHT,  border_x: WIDTH,  speed: 0,  direction: direction,  x: x,  y: y,  width: width,  height: height,  },  ])  this.isDestroied = function () {  return explosion_count > 0  }  this.explode = function () {  if (explosion_count++ === 5) {  this.alive = 0  }  }  this.getImg = function () {  if (explosion_count > 0) {  return {  width: TANK_EXPLOSION_FRAME[explosion_count].dimension[0],  height: TANK_EXPLOSION_FRAME[explosion_count].dimension[1],  offset_x: TANK_EXPLOSION_FRAME[explosion_count].image_coordinates[0],  offset_y: TANK_EXPLOSION_FRAME[explosion_count].image_coordinates[1],  }  } else {  return {  width: width,  height: height,  offset_x: type.image_coordinates[0],  offset_y: type.image_coordinates[1],  }  }  }  this._generateId = function () {  return uuidv4()  }  sprites[this._generateId()] = this  }

定义好后，使用时只需批量生成Block 的实例，将坐标，类型等信息传递进去就可以在下一帧渲染出来。

for(let i=0; i<=2; i++) {  for(let j=0; j<=2; j++) {  let block = new Block(j*16, 140 + i*16, DIRECTION.UP, BLOCK_TYPE.BLOCK_STONE)  }  }

好了我们看看最终的效果吧!

总结

ok 坦克大战基本上完成了，你可以修改子弹发射速度，敌方坦克数量，障碍物也可以自己随意画，可玩性还是挺好的，当然还有很多细节可以完善，如 预制几种不同的地图，做成通关类，预制几条生命等。如果你想试一下，可以 star 下 github 仓库自己来改造自己的坦克大战吧。