文章開(kāi)頭先問(wèn)下大家，13kb 是什么概念？

我給你形容一下。

這篇文章上方“差評(píng)”兩字的動(dòng)圖，體積是 481kb。如果把這個(gè)動(dòng)圖切成 37 份，那么一份就剛好是 13kb。

這 37 分 1 的“差評(píng)”能干嘛？

說(shuō)出來(lái)你可能不信，有人能用它做出一個(gè)游戲來(lái)。

最近世超發(fā)現(xiàn)一個(gè)很魔性的網(wǎng)頁(yè)過(guò)關(guān)游戲，正如你猜的那樣，它的體積只有 13kb。

游戲里我們控制一只小蜘蛛，要從一個(gè)房間的入口一段走到出口，并進(jìn)入到下一個(gè)房間。

這當(dāng)中我們要躲避各種會(huì)旋轉(zhuǎn)的陷阱，一旦不小心碰到陷阱，小蜘蛛就會(huì)沒(méi)命。

隨著關(guān)卡難度增加，各種奇怪的陷阱也層出不窮。

比如你走著走著會(huì)遇到突然出現(xiàn)的方塊，要過(guò)關(guān)的話，只有記住方塊出現(xiàn)和消失的規(guī)律，在一個(gè)完美的瞬間穿過(guò)去。

再比如這個(gè)全圖都在變大變小的圓圈，因?yàn)榭雌饋?lái)很容易讓人眼花，所以你在移動(dòng)的時(shí)候，一定要保持好距離。。

別的不說(shuō)，就這賽博風(fēng)格和各式各樣的陷阱，世超都不敢想，這個(gè)有20個(gè)關(guān)卡的游戲居然只有 13kb。

后來(lái)世超順著游戲的名字在網(wǎng)上搜了一圈，才發(fā)現(xiàn)這個(gè)游戲原來(lái)是出自于一場(chǎng)叫 js13kGames 的大賽。

它的比賽規(guī)則很簡(jiǎn)單，用 JavaScript 開(kāi)發(fā)一個(gè) H5 游戲，時(shí)間期限為 1 個(gè)月。

不過(guò)有一個(gè)要求，你最終提供的游戲文件 zip 壓縮包大小必須在 13kb 以內(nèi)，而且你的游戲不可以使用任何掛載在服務(wù)器上的圖片、文件等。

換句話說(shuō)，這 13 kb 包含了游戲運(yùn)行需要的全部文件。

盡管有了體積和時(shí)間的限制，但讓人驚訝的是，不管是玩法和畫面，這些網(wǎng)頁(yè)游戲居然還挺豐富的。

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

游戲里我們扮演一個(gè)忍者，需要從起點(diǎn)出發(fā)，通過(guò)跳躍、爬墻等方式來(lái)到電腦旁偷到資料。

每個(gè)關(guān)卡中，除了有監(jiān)控，還有來(lái)回巡視的安保，一旦被他們視線掃到，我們就要重來(lái)。

光看看忍者屁股后面的幻影效果，還有跳躍時(shí)的白色塵土效果這些細(xì)節(jié)，你告訴我這只有 13kb？

還有這個(gè)叫 The Last Spartan（最后的斯巴達(dá)人），游戲里我們?cè)谝粔K草原上進(jìn)行砍殺，隨著時(shí)間不斷增加，敵人的數(shù)量和種類也會(huì)隨之增多。

游戲里攻擊招式也比較齊全。

除了普通攻擊，我們可以使用 J + K 來(lái)突刺別人，或者是 J + Space 肉彈沖擊，造成范圍性傷害。

再來(lái)看看這個(gè)小車過(guò)河的游戲，它采用了和紀(jì)念碑谷類似的視覺(jué)錯(cuò)位。

這個(gè) 3D 畫面下，小車被斷橋擋住了去路，但如果切換到了 2D 畫面，兩個(gè)橋梁就很巧妙地連接上了。

隨著難度增加，游戲也逐漸復(fù)雜起來(lái)，到后面不僅需要切換 2D 和 3D 畫面，還需要移動(dòng)視角才能過(guò)關(guān)。

看到這里大家一定好奇，這些游戲是怎么把體積控制在 13kb 以內(nèi)的。

說(shuō)起來(lái)你可能不信，除了有過(guò)人的編程技術(shù)，這些開(kāi)發(fā)者還精通了五花八門的摳門學(xué)。

因?yàn)樗麄優(yōu)榱税延螒蝮w積控制在 13kb ，把能摳的地方都摳過(guò)了。。

往往一個(gè)游戲里，素材圖片占據(jù)了很大的比重。

如果要單純地減小這些圖片體積，我們可以使用壓圖工具進(jìn)行壓縮。

比如一個(gè)原本 173kb 的圖片，重復(fù)壓縮四次后就只有 80kb ，如果再重復(fù)壓縮下去，可能最后只有幾 kb。

當(dāng)然，這個(gè)方法未免有點(diǎn)效率太低。

有些開(kāi)發(fā)者采用了另外一種方法：用光圈來(lái)代替原圖。

比如大賽里有一個(gè)3D迷宮博物館的游戲，場(chǎng)景里放滿了各種世界名畫，有梵高也有蒙娜麗莎。

要展示一張蒙娜麗莎的畫像，我們可以利用算法，讓幾十個(gè)光圈的無(wú)限組合，最后得到一張最接近的圖片。

如果你摘掉眼鏡拿遠(yuǎn)了看下圖（不近視的請(qǐng)嘗試讓眼睛失焦），就會(huì)發(fā)現(xiàn)右邊的光圈看起來(lái)其實(shí)跟左邊沒(méi)啥區(qū)別了。

所以，在游戲里告訴玩家這是一張蒙娜麗莎的畫像，我們不需要放上一張幾百 kb 的圖片。

利用這些光圈，只需要在代碼中敲出每個(gè)光圈位置、半徑和顏色數(shù)據(jù)就行了。

當(dāng)然了，就算你把素材壓縮足夠小，但要是素材數(shù)量太多，還是會(huì)超過(guò) 13kb 的限制。

所以開(kāi)發(fā)者們最要做的，就是把素材重復(fù)利用。

比如上面的忍者游戲，你仔細(xì)觀察會(huì)發(fā)現(xiàn)看似豐富的場(chǎng)景下，其實(shí)有很多重復(fù)的素材，有的最多也只是換了一種顏色。

除了上面這些素材圖片要處理，游戲里的文字也是讓參賽者頭大的一個(gè)問(wèn)題。

要在游戲里顯示文字，就需要調(diào)用字體庫(kù)。

盡管一個(gè)通用字體庫(kù)只有十幾 kb，但這明顯不適合用在 13kb 大小的游戲上。

所以有聰明的開(kāi)發(fā)者想到做像素字體。

首先他創(chuàng)立一個(gè)對(duì)象，這個(gè)對(duì)象由 3x5 個(gè)空白格子組成，每個(gè)格子里可以填入 true（真）或者 false（假）。

當(dāng)填入 true 的時(shí)候，格子就會(huì)被涂上一個(gè)黑色的像素。

那如果填入 false，這個(gè)格子就會(huì)被跳過(guò)，留下空白。

那么要把這個(gè)對(duì)象涂成一個(gè)字母A，我們可以按照下面的方式填入 true 和 false。

這個(gè)填入方式對(duì)應(yīng)的代碼也就是：

多 1 個(gè)字母就會(huì)多占 1 個(gè)字節(jié)，為了把體積縮到最小，我們可以用 1 來(lái)代替 true，把 false 刪掉。

所以優(yōu)化后的代碼如下。

這樣一來(lái)，原本在游戲里顯示一個(gè)字母 A 需要調(diào)用十幾 kb 字庫(kù)，現(xiàn)在只需要十幾個(gè)字節(jié)了。

解決了文字和圖片的問(wèn)題，開(kāi)發(fā)者還需要把代碼壓縮得盡可能小。

通常做一個(gè)游戲都需要借助游戲引擎或者框架，來(lái)減少一些工作量。

但常見(jiàn)的游戲框架肯定不適合做 13kb 的游戲。

好在這游戲已經(jīng)舉辦了不少年，有一些早期參賽選手自己做了一些游戲微框架，并提供給后來(lái)的參賽者。

比如有人做出了一個(gè)非常輕量級(jí)的游戲框架Kontra.js。

如果要在游戲中做出一個(gè)不斷循環(huán)的元素，原本可能需要敲下幾十行的代碼，但通過(guò)Kontra.js只需要幾行代碼就能實(shí)現(xiàn)。

光是這種方式縮減代碼還不夠。

在編程中有一類工具叫混淆器，它在保證不破壞原功能的前提上，把源代碼混淆成讓人難以理解的格式，來(lái)保護(hù)源代碼。

怎么混淆呢？

比如把變量和函數(shù)用單字母代替、刪除代碼之間的空格、將多行代碼擠到一行等等。

大家有沒(méi)有注意到它的混淆方式中包含了“縮減中間變量和函數(shù)”，“去掉空格”。。

巧了。。

這就意外地讓混淆后的代碼相比之前縮小了25%左右。

所以，這個(gè)主要用來(lái)保護(hù)源代碼的工具也被大家用來(lái)縮減代碼體積。。

除此之外，還有人建議編寫代碼時(shí)盡量少用一些層級(jí)目錄（少用一些分類文件夾）。

雖然這樣編寫時(shí)會(huì)比較亂，但至少在游戲文件最終打包的時(shí)候，壓縮率會(huì)高一點(diǎn)。

這個(gè)世超特意還做了測(cè)試驗(yàn)證了一下：

把 3 個(gè)文件直接放在一個(gè)文件夾內(nèi)，壓縮得到 A.zip。

把同樣的 3 個(gè)文件分別放到 3 個(gè)小文件夾內(nèi)，然后把這 3 個(gè)小文件夾放到一個(gè)大文件夾內(nèi)，再壓縮得到 B.zip。

經(jīng)過(guò)對(duì)比發(fā)現(xiàn)，雖然文件一模一樣，但是A.zip確實(shí)小了幾百個(gè)字節(jié)。。

不僅是壓縮上摳細(xì)節(jié)，這些選手還會(huì)對(duì)壓縮包再壓縮。

用什么軟件都有講究，比如有人就建議使用advzip，因?yàn)樗鄬?duì)其他的壓縮軟件能多縮小1kb。。

看到這些開(kāi)發(fā)者個(gè)個(gè)跟摳門學(xué)大師一樣的操作，其實(shí)世超也能理解他們。

畢竟你要把一個(gè)游戲做得既有趣，又得控制在13kb以內(nèi)，真就好比用電鋸剪鼻毛，每一步都得小心翼翼。。

但恰恰在這些壓力下，開(kāi)發(fā)者會(huì)絞盡腦汁去優(yōu)化自己的代碼，去挖掘自己的腦洞。。

所以反而意外的讓他們做出了這些比較好玩的，有創(chuàng)意的游戲。

這也讓我想到了另外一個(gè)例子：《超級(jí)馬里奧》。

你可能從未想過(guò)，這個(gè)多達(dá) 32 個(gè)關(guān)卡的過(guò)關(guān)游戲，它只有 40kb。

我們?cè)?jīng)出過(guò)一期視頻告訴大家是怎么做到的，這里再稍微講講。

和上面講到 13kb 游戲素材重復(fù)利用一樣，馬里奧也是有一套素材包。

我們只需要在需要用到素材的時(shí)候，把他拖放過(guò)去。

當(dāng)然了，這些素材包也要能省就省。

比如游戲里的草垛，其實(shí)就是白云的上半部分換個(gè)顏色罷了。

再比如馬里奧一整套的動(dòng)作，是由21張圖像（準(zhǔn)確說(shuō)法為Sprite）組成的。

但 21 張圖片占用空間太多，所以開(kāi)發(fā)者把每張馬里奧圖片都切成了 4 份，去掉相同的部分。

這樣剩下的素材依然可以通過(guò)組合，來(lái)完整馬里奧所有的動(dòng)作。

如果你仔細(xì)觀察，就會(huì)發(fā)現(xiàn)花朵和星星都是對(duì)稱的。

其實(shí)游戲開(kāi)發(fā)者只存儲(chǔ)了半只花和星星，只是在顯示它們的時(shí)候，把它們復(fù)制了一下再放出來(lái)罷了。

你看，雖然限制非常嚴(yán)苛，但這并不妨礙開(kāi)發(fā)者們做出影響了幾代人的《超級(jí)馬里奧》。

這樣的例子還不少。

比如早期因?yàn)闄C(jī)器性能問(wèn)題，根本做不出 3D 游戲，那怎么表現(xiàn)出 3D 效果呢。

在上世紀(jì)80年代就有開(kāi)發(fā)者想出利用平行投影，通過(guò)傾斜視角來(lái)展示游戲畫面，從而產(chǎn)生立體效果。

1982年世嘉出品的《Zaxxon》▼??

這類游戲也被稱為等距游戲，這種方式也被各種 RPG 和戰(zhàn)略類游戲所采用。

還有開(kāi)發(fā)者想到利用視差滾動(dòng)的效果，讓 2D 畫面更有立體感。

什么是視差滾動(dòng)？

我們坐車的時(shí)候向窗外看，會(huì)感覺(jué)遠(yuǎn)處的山脈移動(dòng)速度慢，近處的稻田和建筑物移動(dòng)速度快。

那游戲里也可以把遠(yuǎn)處的背景速度拉慢，距離鏡頭較近的物品速度拉快，模仿人類視覺(jué)效果，營(yíng)造立體感。

1981 年推出的《 Jump Bug 》就采用了視差滾動(dòng)效果，仔細(xì)看近處的大樓要比遠(yuǎn)處的白云移動(dòng)速度快很多。

這個(gè)方式后來(lái)經(jīng)常被用在橫版闖關(guān)游戲里，甚至還有一些網(wǎng)站為了提高逼格，也用上了這種視覺(jué)效果。

所以盡管當(dāng)時(shí)各項(xiàng)硬性條件不足，但是開(kāi)發(fā)者還是發(fā)揮了他們最大的能力，給我們做出了一代又一代經(jīng)典的游戲。

雖說(shuō)現(xiàn)在隨著科技高速發(fā)展，開(kāi)發(fā)者們做游戲很少有這樣那樣的條件限制。

但是通過(guò)這樣一個(gè) 13kb 的比賽，我們發(fā)現(xiàn)如今依然有人可以在這種嚴(yán)苛的限制下，做出優(yōu)質(zhì)的游戲。可以看到只要盡力了，困難永遠(yuǎn)都不能限制到他們，辦法也總比困難多嘛。當(dāng)然在某種層面上，這個(gè)道理也適用于所有人。