几个月前，JS1k游戏制作节（JS1K game jam）传出不再举办消息后，许多游戏迷开始哀嚎。

Frank Force 也是其中一位，但他还有另一层身份——一位德克萨斯州奥斯汀的独立游戏设计师。Frank Force 在游戏行业工作了20年，参与过9款主流游戏、47个独立游戏的设计。

在听到这个消息后，他马上和其他开发朋友讨论了这个问题，并决定做点什么为此纪念。

在此期间，他们受到三重因素的启发。

一是赛车游戏，包括怀旧向的80年代赛车游戏，他们在非常早期的硬件上推动实时 3D 图形，所以作者沿用了相同的技术，用纯 JavaScript 从头开始实现做 3D 图形和物理引擎；还有一些现代赛车游戏带来了视觉设计的灵感，比如《Distance》和《Lonely Mountains: Downhill》；

二是之前 Jake Gordon 用 JavaScript 创建一个虚拟3D赛车的项目，并分享了代码；

三是 Chris Glover 曾经做过一款小到只有 1KB 的 JS1k 赛车游戏《Moto1kross by Chris Glover》。

于是 Frank 和他的朋友们决定做一个压缩后只有 2KB 的 3D 赛车游戏。2KB 到底有多小呢？提供一个参考，一个3.5英寸软盘可以容纳700多个这样的游戏。

他给这个游戏取名 Hue Jumper。关于名字的由来，Frank 表示，游戏的核心操作是移动。当玩家通过一个关卡时，游戏世界就会换一个颜色色调。

“在我想象中，每通过过一个关卡，玩家都会跳转到另一个维度，有着完全不同的色调。”

做完这个游戏后，Frank 将包含了游戏的全部 JavaScript 代码都发布在他的个人博客上，其中用到的软件主要也是免费或开源软件的。游戏代码发布在 CodePen，可以在 iframe 中试玩，有兴趣的朋友可以去看看。

以下是原博内容，这里进行了不改变原意的编译：

确定最高目标

因为严格的大小限制，我需要非常仔细对待我的程序。我的总体策略是尽可能保持一切简单，为最终目标服务。

为了帮助压缩代码，我使用了 Google Closure Compiler，它删除了所有空格，将变量重命名为1个字母字符，并进行了一些轻量级优化。

用户可以通过 Google Closure Compiler 官网在线跑代码。不幸的是，Closure Compiler 做了一些没有帮助的事情，比如替换模板字符串、默认参数和其他帮助节省空间的ES6特性。所以我需要手动撤销其中一些事情，并执行一些更“危险”的压缩技术来挤出最后一个字节空间。在压缩方面，这不算很成功，大部分挤出的空间来自代码本身的结构优化。

代码需要压缩到2KB。如果不是非要这么做不可，有一个类似的但功能没那么强的工具叫做 RegPack 。

无论哪种方式，策略都是一样的：尽最大可能重复代码，然后用压缩工具压缩。最好的例子是 c.width，c.height和 Math。因此，在阅读这段代码时，请记住，你经常会看到我不断重复一些东西，最终目的就是为了压缩。

HTML

其实我的游戏很少使用 html ，因为它主要用到的是 JavaScript 。但这是创建全屏画布 Canvas ，也能将画布 Canvas 设为窗口内部大小的代码最小方法。我不知道为什么在 CodePen 上有必要添加 overflow:hiddento the body，当直接打开时按理说也可以运行。

我将 JavaScript 封装在一个 onload 调用，得到了一个更小的最终版本…< body style = margin:0 onload = " code _ goes _ here " > < canvas id = c >但是，在开发过程中，我不喜欢用这个压缩设置，因为代码存储在一个字符串中，所以编辑器不能正确地高亮显示语法。

压缩

这就是整个游戏啦！下方的一小段代码就是压缩后的最终结果，我用不同的颜色标注了不同的部分。

完成所有这些工作后，你能感受到我在2KB内就做完了整个游戏是多么让我满意了吗？而这还是在zip之前的工作，zip还可以进一步压缩大小。

警告 Caveats

当然，还有很多其他 3D 渲染方法可以同时保证性能和视觉效果。如果我有更多的可用空间，我会更倾向于使用一个 WebGL API 比如 three.js ，我在去年制作的一个类似游戏“Bogus Roads”中用过这个框架。

此外，因为它使用的是 requestAnimationFrame ，所以需要一些额外的代码来确保帧速率不超过60 fps，增强版本中我会这么用，尽管我更喜欢使用 requestAnimationFrame 而不是 setInterval ，因为它是垂直同期的（VSyn，VerticalSynchronization），所以渲染更丝滑。这种代码的一个主要好处是它非常兼容，可以在任何设备上运行，尽管在我旧 iPhone 上运行有点慢。

游戏代码被我放到了 GitHub 上的 GPL-3.0 下（https://github.com/KilledByAPixel/HueJumper2k），所以你可以在自己的项目中自由使用它。该库中还包含 2KB 版本的游戏，准确说是2031字节！欢迎你添加一些其他的功能，比如音乐和音效到“增强”版本中。

后记

Frank Force 在个人博客发了这篇文章后，在内容、标题的加持下，这篇文章后来被不少国外媒体转载。

在盛赞之余，也有质疑的声音。网友“Anon”在原文下评论：你是如何在 2KB 安装一个完整的 javascript 的，除非你可以随意忽略 dependencies 插件库的大小，或者你将整个游戏作为 dependency，大小才有可能控制到 2KB，否则就是欺骗。

Frank 回复表示，大多数 small demos 都需要某种运行环境，即使它是可执行的。在这种情况下，就是 javascript 运行时环境，没有其他 dependencies.。因为 javascript 是解释的，所以也可以说压缩后的代码是在2KB以内的。

有其他网友表示认可 Frank 的说法，他们认为 JS 是一种解释语言，不能将其与其他编译语言相比较。

- THE END -

#赛车游戏#程序员#游戏#代码#JavaScript

原文链接：雷锋网责任编辑：上方文Q