江苏龙网

  1. 首页 > 人文 > >

『小熊带你玩科技』KB代码实现3D赛车游戏？2kPlus Jam大赛了解一下，如何用2

选自frankforce
作者：Frank
机器之心编译
参与：王子嘉、GeekAI
控制复杂度一直是软件开发的核心问题之一 ， 一代代的计算机从业者纷纷贡献着自己的智慧 ， 试图降低程序的计算复杂度 。 然而 ， 将一款3D赛车游戏的代码压缩到2KB以内 ， 听起来是不是太夸张了？本文作者Frank是一名资深游戏开发者 ， 在本文中 ， 他详细介绍了如何灵活运用代码压缩、编译、随机数生成、代码复用、设计模式等十八般武艺仅仅通过2KB的代码就能实现一款强大的3D赛车游戏 。
几个月前 ， 当我听说传奇JS1K游戏编程竞赛将不再举办时 ， 当即把这件事告诉了其他开发者 ， 最后我们决定在itch上搞一个2KB版的编程竞赛以弥补这一遗憾 ， 我们将其称之为「2kPlusJam」 。 这个竞赛的主要目标是制作一个只需要2KB压缩文件就可以容纳的游戏 。 如果你知道一个3.5英寸软盘可以存超过700个这样的游戏 ， 你也就知道这有多小了 。
我的作品（HueJumper）是对80年代赛车游戏渲染技术的致敬 。 这里的3D图像和物理引擎是我纯粹地使用JavaScript从零开始实现的 ， 同时我还花了大量时间去调整游戏玩法和视觉效果 。
游戏编程竞赛强调「变化」（shift） ， 所以每当玩家通过关卡时 ， 我就会改变整个世界的色调 。 我想在玩家通过关卡时 ， 会感觉到像进入了一个色调不同的新的维度 ， 这就是我为它取名为「HueJumper」的原因 。
本文包含了这个游戏的完整JavaScript代码 ， 所以可能会有点长 。 不过代码的注释很友好 ， 所以我不打算一行一行解读 ， 也不要求你现在就通读所有代码 。 我的目的是向你解释它的工作原理 ， 还有为什么我要这样做 ， 以及这个项目的整个结构 。 你也可以在CodePen上找到这份代码（https://codepen.io/KilledByAPixel/pen/poJdLwB） ， 并进行现场调试 。
那么 ， 系好安全带 ， 坐稳 ， 我们要开始啦！
灵感来源
『小熊带你玩科技』KB代码实现3D赛车游戏？2kPlus Jam大赛了解一下，如何用2
文章图片
我的灵感主要来源于80年代的经典赛车游戏 ， 比如《OutRun》 。 使用相似的技术 ， 他们能够在非常早期的硬件上实现实时三维图形 。 我最近也在玩一些现代的赛车游戏 ， 比如《Distance》和《LonelyMountains:Downhill》 ， 这些游戏也对我的视觉设计和游戏体验有所帮助 。
JakeGordon用JavaScript写的一个伪3D赛车的项目（https://github.com/jakesgordon/javascript-racer/）帮我减轻了很多负担 。 他还为此写了一系列解释其工作原理的博文 。 尽管我的项目是从零开始的 ， 但是他的代码助我解决了遇到的包括数学在内的一些问题 。
我还看了ChrisGlover开发的一款名为「Moto1kross」的JS1k游戏（https://js1k.com/2019-x/demo/4006） 。 这款简单的1KB赛车游戏给了我一个参考 ， 让我知道什么是可能实现的 。 现在我有额外的1KB可用空间 ， 因此我得远远超过它 。
总体策略
由于游戏大小有严格的限制 ， 程序的架构就显得尤为重要 。 我的总体策略是让一切尽可能的简单 ， 以实现创造一款视觉感受和游戏体验都很棒的游戏的最终目标 。
为了压缩代码 ， 我用GoogleClosureCompiler(https://closure-compiler.appspot.com/home)来运行它 。 这个编译器会删掉所有空白 ， 把变量重命名为1个字母的字符 ， 并且做了一些简单的优化 。 你可以通过下面的链接使用这个编译器：https://clocompiler.appspot.com/home 。
不过 ， 这个编译器还做了一些无用的事 ， 比如替换模板字符串、缺省参数和其它有助于节省空间的ES6特性 。 所以我需要手动撤销某些无用的工作 ， 并预先准备一些更「冒险」的压缩技术 ， 以节省每一个字节 。 但这并不是最主要的成功之处 ， 大部分文件体积的压缩还是归功于代码本身的架构 。


推荐阅读


上一篇：【暖特加低氮燃气锅炉】暖特加--燃气锅炉·领跑者

下一篇：「华为荣耀」狙杀荣耀X10！红米K30新版入网：1799元起性价比炸裂！