基于 React 的高质量坦克大战复刻版

前端外刊评论 · 公众号 · 前端 · 2018-04-12 06:30

正文

坦克大战当年红遍大江南北，很多和我一样的九零后应该都有着对这个游戏的记忆。现在显示器分辨率越来越高，使用矢量图来实现像素风格游戏，可以获得非常高的展现质量。该复刻版是我花了很长时间折腾的坦克大战复刻版本，所有元素都使用矢量图（SVG）进行渲染，针对网页的交互方式重新设计了关卡编辑器，该复刻版新增了关卡选择功能、自定义关卡管理功能等，另外它还包括了一个 Gallery 页面用于展示所有的游戏元素，想必它一定可以勾起你的儿时回忆。

针对鼠标交互设计的关卡编辑器

点击鼠标，选择画笔类型，在地图中拖拽鼠标就即可完成关卡配置，再也不用担心游戏手柄按得手酸啦 (●ˇ∀ˇ●)。

方便的自定义关卡管理页面

完成自定义关卡配置之后，可以将关卡信息保存到浏览器缓存中（localStorage）。然后在关卡管理页面编辑/删除/下载这些关卡配置，当然你也点击关卡缩略图下方 PLAY 按钮直接开始自定义关卡。

放大了很多倍的 Gallery

浏览 Gallery 页面来更全面地了解游戏中的各个元素。

点击这里开始游戏。欢迎大家在 GitHub 上 star 本项目，如果发现游戏的 BUG 也可以直接发起 issue。本文后面的内容会大致介绍整个游戏的开发过程，对 React / Redux 感兴趣的前端同学可以继续往下看。

复刻版主要包括了下面五个方面的内容：素材、数据、展现、逻辑、AI。

一、素材

素材主要包括了以下几个方面的内容：

图片素材：例如坦克的形状/颜色, 各种地形的形状等；
关卡配置：每一关的战场地形配置，一关内会出现的敌对坦克的数量和等级；
数值配置：例如子弹的速度，坦克的移动速度，道具铲子的持续时间等；
游戏场景：游戏开始/结束场景，关卡结算场景等；
音效（该复刻版的音效部分尚未完成）。

图片素材

图片素材可以从网上下载得到，该位图图片中包含了坦克大战绝大部分的图片素材。因为复刻版使用矢量图来展现画面，所以需要对位图进行矢量化处理。位图图片中的每个像素点, 都需要被转换为 SVG 中 1x1 的小矩形，这样整个游戏才会呈现像素风格。素材也可以适当地转换为 SVG 矩形元素或是 SVG 路径元素，以减少元素的数量，提升渲染性能。

大部分的素材，都是通过手工输入的方式得到的。例如坦克生成时的闪光效果，其颜色为白色，形状可认为是若干个矩形的叠加，我们使用若干个矩形元素就能表示闪光效果了。

对于一些比较复杂的素材，我将其分解为若干个部分，对每个部分进行矢量化，然后组装起来得到整体素材。例如我们可以将坦克分解为以下几个部分：

左侧的轮胎(left-tire)： 轮胎的背景色 & 轮胎上的花纹
右侧的轮胎(right-tire)：轮胎的背景色 & 轮胎上的花纹
坦克主体(tank-body)： 坦克主体的轮廓 & 坦克主体上的装饰
坦克炮管(gun)：一个矩形

一些素材的形状具有一定的模式，此时可以采用循环/分支的方式来生成所需要的 SVG 元素。例如一个完整的砖墙的大小为 16x16，但是砖墙的左上/右上/左下/右下四个部分是完全一样的，有了砖墙左上部分(8x8)的 SVG 之后，使用循环可以生成整个砖墙。

一些素材的形状非常不规则，难以通过手工的方式进行输入，例如子弹/坦克的爆炸效果，掉落道具的形状。我使用脚本读取原始素材中每个像素点的颜色值，然后将其转换为一个字符，用于保存该点的颜色值。React 渲染时, 根据字符渲染出对应颜色的矩形(1x1)。该方式可以方便地对素材进行矢量化，但是会导致 React 组件数量大大增加，降低渲染效率。

素材矢量化的过程非常灵活，复刻版充分利用了循环/分支/组合简化了矢量化过程。一些工具组件，例如 /> 和 /> ，在矢量化的过程中提供了很大的便利。一项素材完成矢量化之后，可以将其放在 Gallery 页面进行查看，和原始素材进行对比，方便改正其中的错误。

关卡配置

坦克大战 WIKI上有完整的关卡配置表，根据配置表使用关卡编辑器生成关卡配置 json 文件即可，关卡列表中已经列出了所有游戏自带的关卡，玩家也可以使用关卡编辑器创建自定义关卡，自定义关卡数据将保存在 localStorage 中。

数值配置

一部分数值配置比较明显，多玩几遍原版游戏就可以找到规律，例如玩家的坦克数量、坦克升级过程、不同类型坦克子弹效果、击毁不同类型坦克的得分等。其他数值配置的获取较为繁琐，例如子弹飞行速度、坦克移动速度、爆炸效果各帧的持续时间，这一部分大都从原版游戏录像中获取。该文件中记录了一些我已经测量好的数值，可供参考。随着游戏的不断完善，该文件也会不断完善。

游戏场景

坦克大战中的不同场景的区分度很大，而同一场景的变化较小，对原版游戏中不同场景进行截图，复刻版根据这些截图进行开发即可。

二、展现

经过第一步之后，游戏的素材被封装成了相应的 React 组件或数据项，以方便后续使用，这一步将利用这些元素创建出游戏界面。坦克大战游戏包括了若干页面（游戏页面、标题页面、关卡选择页面、关卡列表页面、关卡编辑页面等），文件 app/App.tsx 中使用了 react-router 来管理这些页面组件，这样一来玩家也可以通过手动在地址栏上输入地址直接执行操作（例如直接开始某个关卡）。

React 的组件非常容易被组合，整个游戏的展现过程也是 react 组件不断组合的过程。下图是游戏中主要场景 BattleField 的结构，可以看出 BattleField 组件由许多不同的组件组合而成，游戏中的其他组件也类似，归根结底由第一步中的素材组合而成。

export class BattleField extends React.PureComponent {
  render() {
    return (
      <g className="battle-field">
        <rect width={13 * BLOCK_SIZE} height={13 * BLOCK_SIZE} fill="#000000" />
        <RiverLayer rivers={rivers} />
        <SteelLayer steels={steels}




    
 />
        <BrickLayer bricks={bricks} />
        <SnowLayer snows={snows} />
        <Eagle x={eagle.x} y={eagle.y} broken={eagle.broken} />
        <g className="bullet-layer">{bullets.map((b, i) => <Bullet key={i} bullet={b} />)}g>
        <g className="tank-layer">
          {activeTanks.map(tank => <Tank key={tank.tankId




    
} tank={tank} />)}
        g>
        <ForestLayer forests={forests} />
        <g className="power-up-layer">
          {powerUps.map(p => <PowerUp key={p.powerUpId} powerUp={p} />)}
        g>
      g>
    )
  }
}

React 性能优化

复刻版中组件较多，组件变化频率快（理想情况下是每秒 60 帧），如果不对 react 渲染进行优化，整个游戏最终十分卡顿（5 帧/秒左右）。

优化一：应用 React . PureComponent 来过滤掉不需要的 re-render。游戏运行时，只有一小部分的组件会不断更新（例如坦克和子弹），大部分的组件（例如游戏中的地形元素）保持不变。这些不怎么变化的组件，在很多时候，前后两次接收到的 props 是相等的（shallow-equal）。让组件继承自 React . PureComponent ，就可以跳过该组件大部分额外的 re-render 。经过该步优化后，整个游戏的帧率大幅上升，大部分情况下可以到达 60 FPS。对于那些一直在变化的组件（例如子弹等），应用 PureComponent 的收益很小，也许 React.Component 更为合适。不过我在实际编程中也没考虑那么多，全盘使用了 PureComponent。

优化二：经过优化一之后游戏在 短时间内生成大量组件 的情况下仍会出现掉帧的现象，例如坦克爆炸效果出现的时候。优化一避免了组件更新时重复渲染，但无法优化组件加载时的初次渲染过程，当组件复杂的时候，组件初次渲染就会有较大的开销。这篇文章中提到了使用离屏画布提升 canvas 性能，优化二的思路也是类似： 将组件渲染的内容保存到 SVG 图片中，下次渲染时直接使用准备好的图片。 游戏中的爆炸效果、地形元素等组件的内容较为固定，其内容保存为图片后可以被多次复用。该优化实现代码如下：（完整版代码）

import { renderToString } from 'react-dom/server'
const svgns = 'http://www.w3.org/2000/svg'
// imageKey 到 object-url 的映射，一个 imageKey 对应了一张保存好的图片
const cache = new Map()
class Image extends React.PureComponent {
  render() {
    const { imageKey, width, height, transform, children } = this.props
    if (!cache.has(imageKey)) {
      const open 




    
= `<svg xmlns="${svgns}" width="${width}" height="${height}">`
      const string = renderToString(<g>childreng>)
      const close = ''
      const markup = open + string + close
      // 使用 react-dom/server 来生成 SVG 图片
      const blob = new Blob([markup], { type: 'image/svg+xml' })
      const url = URL.createObjectURL(blob)
      cache.set(imageKey, url)
    }
    return <image transform={transform} href={cache.get(imageKey)} />
  }
}
// 其他地方像这样使用 
class OtherComponentUsingImage extends React.PureComponent {
  render() {
    return (
      <Image