导语：说出来你可能不信，有人能用它做出一个游戏来。最近发现一个很魔性的网页过关游戏，正如你猜的那样，它的体积只有 13kb。

文章开头先问下大家，13kb 是什么概念？我给你形容一下。这篇文章上方 “ 差评 ” 两字的动图，体积是 481kb。如果把这个动图切成 37 份，那么一份就刚好是 13kb。这 37 分 1 的 “ 差评 ” 能干嘛？说出来你可能不信，有人能用它做出一个游戏来。最近发现一个很魔性的网页过关游戏，正如你猜的那样，它的体积只有 13kb。

游戏里我们控制一只小蜘蛛，要从一个房间的入口一段走到出口，并进入到下一个房间。

这当中我们要躲避各种会旋转的陷阱，一旦不小心碰到陷阱，小蜘蛛就会没命。

随着关卡难度增加，各种奇怪的陷阱也层出不穷。

比如你走着走着会遇到突然出现的方块，要过关的话，只有记住方块出现和消失的规律，在一个完美的瞬间穿过去。

再比如这个全图都在变大变小的圆圈，因为看起来很容易让人眼花，所以你在移动的时候，一定要保持好距离。。

别的不说，就这赛博风格和各式各样的陷阱都不敢想，这个有 20 个关卡的游戏居然只有 13kb。

后来顺着游戏的名字在网上搜了一圈，才发现这个游戏原来是出自于一场叫 js13kGames 的大赛。

它的比赛规则很简单，用 JavaScript 开发一个 H5 游戏，时间期限为 1 个月。

不过有一个要求，你最终提供的游戏文件 zip 压缩包大小必须在 13kb 以内，而且你的游戏不可以使用任何挂载在服务器上的图片、文件等。

换句话说，这 13 kb 包含了游戏运行需要的全部文件。

尽管有了体积和时间的限制，但让人惊讶的是，不管是玩法和画面，这些网页游戏居然还挺丰富的。

比如 2020 年的冠军作品：Ninja vs.Evilcorp。

游戏里我们扮演一个忍者，需要从起点出发，通过跳跃、爬墙等方式来到电脑旁偷到资料。

每个关卡中，除了有监控，还有来回巡视的安保，一旦被他们视线扫到，我们就要重来。

光看看忍者屁股后面的幻影效果，还有跳跃时的白色尘土效果这些细节，你告诉我这只有 13kb？

还有这个叫 The Last Spartan（ 最后的斯巴达人 ），游戏里我们在一块草原上进行砍杀，随着时间不断增加，敌人的数量和种类也会随之增多。

游戏里攻击招式也比较齐全。

除了普通攻击，我们可以使用 J + K 来突刺别人，或者是 J + Space 肉弹冲击，造成范围性伤害。

再来看看这个小车过河的游戏，它采用了和纪念碑谷类似的视觉错位。

这个 3D 画面下，小车被断桥挡住了去路，但如果切换到了 2D 画面，两个桥梁就很巧妙地连接上了。

随着难度增加，游戏也逐渐复杂起来，到后面不仅需要切换 2D 和 3D 画面，还需要移动视角才能过关。

看到这里大家一定好奇，这些游戏是怎么把体积控制在 13kb 以内的。

说起来你可能不信，除了有过人的编程技术，这些开发者还精通了五花八门的抠门学。

因为他们为了把游戏体积控制在 13kb ，把能抠的地方都抠过了。。

往往一个游戏里，素材图片占据了很大的比重。

如果要单纯地减小这些图片体积，我们可以使用压图工具进行压缩。

比如一个原本 173kb 的图片，重复压缩四次后就只有 80kb ，如果再重复压缩下去，可能最后只有几 kb。

当然，这个方法未免有点效率太低。

有些开发者采用了另外一种方法：用光圈来代替原图。

比如大赛里有一个 3D 迷宫博物馆的游戏，场景里放满了各种世界名画，有梵高也有蒙娜丽莎。

要展示一张蒙娜丽莎的画像，我们可以利用算法，让几十个光圈的无限组合，最后得到一张最接近的图片。

如果你摘掉眼镜拿远了看下图（ 不近视的请尝试让眼睛失焦 ），就会发现右边的光圈看起来其实跟左边没啥区别了。

所以，在游戏里告诉玩家这是一张蒙娜丽莎的画像，我们不需要放上一张几百 kb 的图片。

利用这些光圈，只需要在代码中敲出每个光圈位置、半径和颜色数据就行了。

当然了，就算你把素材压缩足够小，但要是素材数量太多，还是会超过 13kb 的限制。