家好，今天給大家介紹一款，JavaScript+css實(shí)現(xiàn)的喜慶活動(dòng)邀請(qǐng)函多頁(yè)面html源碼（圖1）。送給大家哦，獲取方式在本文末尾。

模板制作精良美觀，主題非常喜慶，慢慢向下滑動(dòng)，可以看到，包含活動(dòng)信息、時(shí)間地點(diǎn)、公司二維碼、地圖等，自適應(yīng)分辨率，適用于各種移動(dòng)設(shè)備（圖2）

源碼完整，需要的朋友可以下載學(xué)習(xí)（圖3）。

本源碼編碼：10183，需要的朋友，訪問(wèn)[92ui點(diǎn)net]，搜索10183，即可獲取。

個(gè)馬賽克風(fēng)格的表情正好 13Kb，有人竟然能用一個(gè)表情大小的空間，制作個(gè)游戲出來(lái)。我就不信這么點(diǎn)的地兒，能寫出個(gè)花來(lái)？游戲能好玩嗎？因?yàn)檫@些游戲點(diǎn)開就能玩，我抱著試一試的心態(tài)把玩了一會(huì)。

事實(shí)證明是我的無(wú)知限制了我的想象力，這些 13kB 的游戲并沒(méi)有我想的那么簡(jiǎn)陋和無(wú)聊。它們不僅有豐富的圖像，還有音樂(lè)、物理、重力系統(tǒng)，包含射擊、益智、技巧等不同的類別玩法多樣，令我眼前一亮！

下面我就整理出了 3 個(gè)我覺(jué)得好玩的游戲，并附上了在線體驗(yàn)的地址以及 GitHub 上的源碼。

大家先體驗(yàn)一下游戲，后面我們?cè)倭倪@些游戲都用到了哪些開源項(xiàng)目。

1、Space Huggers（太空保護(hù)者）

射擊類游戲，消滅所有敵人。通過(guò)外接手柄可進(jìn)行多人游戲，最多支持 4 個(gè)人。不僅如此還有敵人和道具系統(tǒng)以及雨、雪、血、爆炸、武器、水等粒子系統(tǒng)。手機(jī)端操作需要外接手柄。

操作：

• WASD 或方向鍵：移動(dòng)、跳躍和攀爬
• Z 或左鍵單擊：射擊，大多數(shù)東西會(huì)破裂，有些會(huì)燃燒
• X 或中鍵：滾動(dòng)，短暫的無(wú)敵狀態(tài)，還可滅火
• C 或右鍵單擊：手榴彈，每條命有 3 個(gè)
• 還可最多連接 4 個(gè)進(jìn)行合作游戲！

敵人類型：

• 新兵（綠色）：遲鈍，只需要 1 擊
• 士兵（藍(lán)色）：正常的速度，需要 2 次攻擊
• 船長(zhǎng)（紅色）：可以更頻繁地爬墻和跳躍，需要 3 次攻擊
• 專家（白色）：經(jīng)常跳躍和滾動(dòng)，需要 4 次攻擊
• 爆破專家（紫色）：投擲手榴彈且不會(huì)著火，需要 5 次命中

試玩：https://js13kgames.com/games/space-huggers/index.html

源碼：https://github.com/KilledByAPixel/SpaceHuggers

2、Black Hole Square（黑洞廣場(chǎng)）

益智類游戲，把所有塊清除則過(guò)關(guān)。

• 操作：向左劃開始游戲，點(diǎn)擊塊會(huì)向箭頭方向移動(dòng)，塊進(jìn)入“黑洞”則被清除
• 支持移動(dòng)端

試玩：https://js13kgames.com/games/black-hole-square/index.html

源碼：https://github.com/Quinten/black-hole-square

3、PACKABUNCHAS

益智類游戲，用提供的形狀拼出指定的形狀，

• 操作：點(diǎn)擊旋轉(zhuǎn)，拖動(dòng)圖形
• 支持移動(dòng)端

試玩：https://js13kgames.com/games/packabunchas/index.html

源碼：https://github.com/MattiaFortunati/packabunchas

Js13kGames 是什么

以上這些游戲都是 2021 Js13kGames 的參賽作品，這個(gè)比賽每年舉辦一次，要求參賽者在為期 30 天的時(shí)間里用 JavaScript 做出一款體積小于 13kB 的 HTML5 游戲。

30 天用 JS 做個(gè)游戲并不難，難點(diǎn)在于如何讓游戲小于 13kB。壓縮游戲體積可以從以下四個(gè)方面入手：

• 游戲引擎
• 壓縮代碼
• 圖像和聲音

下面介紹的這些開源項(xiàng)目，在 Js13kGames 很多參賽作品中都能看到它們的身影。

Ga（游戲引擎）

一個(gè)輕量級(jí)、極小(6.5kB)、容易上手的 JavaScript 游戲引擎，可用于制作 HTML5 游戲或任何 2D 動(dòng)作游戲。

https://github.com/kittykatattack/ga

Kontra（游戲引擎）

專注于小體積的 JavaScript 微型游戲引擎，它雖然小但是提供了游戲常用的操控、事件、循環(huán)等核心功能。

https://github.com/straker/kontra

壓縮代碼

壓縮代碼通常是減少空格和換行之類的無(wú)用內(nèi)容，從而達(dá)到減少代碼所占體積的目的。

Google Closure Compiler：https://github.com/google/closure-compiler

MiniMinifier：https://github.com/xem/miniMinifier

Piskel（圖像）

簡(jiǎn)單易用的在線像素圖像制作工具。

https://github.com/piskelapp/piskel

miniMusic（聲音）

可以把音效轉(zhuǎn)化成 JavaScript 的項(xiàng)目，通過(guò)這種方式能夠有效地減小聲音的“體積”，還支持在線可視化的操作方式編輯和生成音效。

https://github.com/xem/miniMusic

看到這里你是不是也蠢蠢欲動(dòng)地準(zhǔn)備寫個(gè)小游戲了呢？

最后

隨著科技的發(fā)展，存儲(chǔ)空間已經(jīng)不再“捉襟見(jiàn)肘”，我們?cè)诰幋a時(shí)也不用再“斤斤計(jì)較”。但如今看到有這么一群極客，在絞盡腦汁用 13kB 完成一個(gè)游戲時(shí)。我從最初的好奇和難以置信，再到看到他們的游戲和源碼后感嘆他們高超的編程技巧，最后開始反思自己在編碼時(shí)對(duì)性能和損耗方面思考的太少。感謝這些開源項(xiàng)目讓我大開眼界，也讓我發(fā)現(xiàn)了自己的不足之處。

本期推薦的開源項(xiàng)目代碼量不多，適合新手學(xué)習(xí)和上手游戲編程，感興趣的讀者可以試著用它們寫個(gè)小游戲。

以上就是本文的全部?jī)?nèi)容，如果你對(duì)本期推薦的開源項(xiàng)目感興趣歡迎點(diǎn)贊、轉(zhuǎn)發(fā)，讓這些優(yōu)秀的開源被更多人發(fā)現(xiàn)和喜歡。這里是 HelloGitHub 分享 GitHub 上有趣、入門級(jí)的開源項(xiàng)目。歡迎留言和我分享開源項(xiàng)目～

- END -