一群大佬猛肝30天 最后就做出個(gè)13kb的游戲？_網(wǎng)絡(luò)游戲
導(dǎo)語：說出來你可能不信，有人能用它做出一個(gè)游戲來。最近發(fā)現(xiàn)一個(gè)很魔性的網(wǎng)頁過關(guān)游戲，正如你猜的那樣，它的體積只有 13kb。
文章開頭先問下大家，13kb 是什么概念？我給你形容一下。這篇文章上方 “ 差評 ” 兩字的動(dòng)圖，體積是 481kb。如果把這個(gè)動(dòng)圖切成 37 份，那么一份就剛好是 13kb。這 37 分 1 的 “ 差評 ” 能干嘛？說出來你可能不信，有人能用它做出一個(gè)游戲來。最近發(fā)現(xiàn)一個(gè)很魔性的網(wǎng)頁過關(guān)游戲，正如你猜的那樣，它的體積只有 13kb。
游戲里我們控制一只小蜘蛛，要從一個(gè)房間的入口一段走到出口，并進(jìn)入到下一個(gè)房間。
這當(dāng)中我們要躲避各種會旋轉(zhuǎn)的陷阱，一旦不小心碰到陷阱，小蜘蛛就會沒命。
隨著關(guān)卡難度增加，各種奇怪的陷阱也層出不窮。
比如你走著走著會遇到突然出現(xiàn)的方塊，要過關(guān)的話，只有記住方塊出現(xiàn)和消失的規(guī)律，在一個(gè)完美的瞬間穿過去。
再比如這個(gè)全圖都在變大變小的圓圈，因?yàn)榭雌饋砗苋菀鬃屓搜刍ǎ阅阍谝苿?dòng)的時(shí)候，一定要保持好距離。。
別的不說，就這賽博風(fēng)格和各式各樣的陷阱都不敢想，這個(gè)有 20 個(gè)關(guān)卡的游戲居然只有 13kb。
后來順著游戲的名字在網(wǎng)上搜了一圈，才發(fā)現(xiàn)這個(gè)游戲原來是出自于一場叫 js13kGames 的大賽。
它的比賽規(guī)則很簡單，用 JavaScript 開發(fā)一個(gè) H5 游戲，時(shí)間期限為 1 個(gè)月。
不過有一個(gè)要求，你最終提供的游戲文件 zip 壓縮包大小必須在 13kb 以內(nèi)，而且你的游戲不可以使用任何掛載在服務(wù)器上的圖片、文件等。
換句話說，這 13 kb 包含了游戲運(yùn)行需要的全部文件。
盡管有了體積和時(shí)間的限制，但讓人驚訝的是，不管是玩法和畫面，這些網(wǎng)頁游戲居然還挺豐富的。
比如 2020 年的冠軍作品：Ninja vs.Evilcorp。
游戲里我們扮演一個(gè)忍者，需要從起點(diǎn)出發(fā)，通過跳躍、爬墻等方式來到電腦旁偷到資料。
每個(gè)關(guān)卡中，除了有監(jiān)控，還有來回巡視的安保，一旦被他們視線掃到，我們就要重來。
光看看忍者屁股后面的幻影效果，還有跳躍時(shí)的白色塵土效果這些細(xì)節(jié)，你告訴我這只有 13kb？
還有這個(gè)叫 The Last Spartan（ 最后的斯巴達(dá)人 ），游戲里我們在一塊草原上進(jìn)行砍殺，隨著時(shí)間不斷增加，敵人的數(shù)量和種類也會隨之增多。
游戲里攻擊招式也比較齊全。
除了普通攻擊，我們可以使用 J + K 來突刺別人，或者是 J + Space 肉彈沖擊，造成范圍性傷害。
再來看看這個(gè)小車過河的游戲，它采用了和紀(jì)念碑谷類似的視覺錯(cuò)位。
這個(gè) 3D 畫面下，小車被斷橋擋住了去路，但如果切換到了 2D 畫面，兩個(gè)橋梁就很巧妙地連接上了。
隨著難度增加，游戲也逐漸復(fù)雜起來，到后面不僅需要切換 2D 和 3D 畫面，還需要移動(dòng)視角才能過關(guān)。
看到這里大家一定好奇，這些游戲是怎么把體積控制在 13kb 以內(nèi)的。
說起來你可能不信，除了有過人的編程技術(shù)，這些開發(fā)者還精通了五花八門的摳門學(xué)。
因?yàn)樗麄優(yōu)榱税延螒蝮w積控制在 13kb ，把能摳的地方都摳過了。。
往往一個(gè)游戲里，素材圖片占據(jù)了很大的比重。
如果要單純地減小這些圖片體積，我們可以使用壓圖工具進(jìn)行壓縮。
比如一個(gè)原本 173kb 的圖片，重復(fù)壓縮四次后就只有 80kb ，如果再重復(fù)壓縮下去，可能最后只有幾 kb。
當(dāng)然，這個(gè)方法未免有點(diǎn)效率太低。
有些開發(fā)者采用了另外一種方法：用光圈來代替原圖。
比如大賽里有一個(gè) 3D 迷宮博物館的游戲，場景里放滿了各種世界名畫，有梵高也有蒙娜麗莎。
要展示一張蒙娜麗莎的畫像，我們可以利用算法，讓幾十個(gè)光圈的無限組合，最后得到一張最接近的圖片。
如果你摘掉眼鏡拿遠(yuǎn)了看下圖（ 不近視的請嘗試讓眼睛失焦 ），就會發(fā)現(xiàn)右邊的光圈看起來其實(shí)跟左邊沒啥區(qū)別了。
所以，在游戲里告訴玩家這是一張蒙娜麗莎的畫像，我們不需要放上一張幾百 kb 的圖片。
利用這些光圈，只需要在代碼中敲出每個(gè)光圈位置、半徑和顏色數(shù)據(jù)就行了。
當(dāng)然了，就算你把素材壓縮足夠小，但要是素材數(shù)量太多，還是會超過 13kb 的限制。