好奇！僅 13kB 大小的游戲，源碼長啥樣？

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

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

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

大家先體驗(yàn)一下游戲，后面我們再聊這些游戲都用到了哪些開源項(xiàng)目。

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

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

操作：

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

敵人類型：

新兵（綠色）：遲鈍，只需要 1 擊
士兵（藍(lán)色）：正常的速度，需要 2 次攻擊
船長（紅色）：可以更頻繁地爬墻和跳躍，需要 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（黑洞廣場）

益智類游戲，把所有塊清除則過關(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

壓縮代碼

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

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

Piskel（圖像）

簡單易用的在線像素圖像制作工具。

https://github.com/piskelapp/piskel

miniMusic（聲音）

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

https://github.com/xem/miniMusic

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

最后

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

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

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

- END -

用HTML5+javascript代碼來完成的，其實(shí)這個(gè)原理還是跟普通的游戲差不多的，本人開發(fā)這個(gè)游戲，其實(shí)就是想鍛煉下自己的編程思維及自己的javascript算法。

雖然只錄制了兩關(guān)。但我寫了很多關(guān)的，而且難度越來越大，其實(shí)每一關(guān)其實(shí)都有一個(gè)編程小故事的，能過十關(guān)你就了不起了！

界面如下：

效果全部代碼已經(jīng)上傳群250777811

界面看起來很簡陋，不是很華麗，但是里面的內(nèi)容和代碼還是很有意思的，大家可以下載源碼親自試一試。當(dāng)初拿著游戲手柄插著卡在電視上玩，想想現(xiàn)在自己可以開發(fā)這樣的游戲還是有點(diǎn)成就感的，其實(shí)我從零基礎(chǔ)學(xué)前端也只有三個(gè)多月，現(xiàn)在學(xué)習(xí)到H5和javascript的時(shí)候想找點(diǎn)案例來鍛煉下自己能力。大家想學(xué)習(xí)前端的可以加HTML5進(jìn)階群250777811，無論你是大牛還是想學(xué)習(xí)的都可以加進(jìn)來，只要你想學(xué)前端。

下面來看看這個(gè)代碼，雖然代碼有點(diǎn)多，但是有很多重復(fù)的，最重要的還是那幾行H5和javascript代碼

想要這個(gè)游戲代碼親自試一試的可以加HTML5進(jìn)階群250777811，獲取源碼看你能闖幾關(guān)。

源代碼已經(jīng)全部上傳群250777811

最后面那幾關(guān)連我自己也難闖過去，哈哈，不過這也使我蠻高興的，因?yàn)槲疫€有提升的空間嘛！

用代碼將我的夢想照進(jìn)現(xiàn)實(shí)，謝謝提問于點(diǎn)評(píng)

習(xí)前端還是很有趣的，因?yàn)榭梢暂^快的上手，然后自己開發(fā)一些好玩的項(xiàng)目來練手，并且網(wǎng)上也可以搜集很多關(guān)于前端開發(fā)的小項(xiàng)目，可還是新手的你，在學(xué)習(xí)的時(shí)候不知道可以做什么，以及怎么做；因此，就整理了一些前端資料，希望可以幫助正在學(xué)習(xí)前端的小伙伴。為了方便你，大概把前端可以做的項(xiàng)目分為三類：

?游戲類

?實(shí)用類

?好玩類

然后依次推薦一些項(xiàng)目資料，想要學(xué)習(xí)的小伙伴可以看看~

游戲類

其實(shí)很多常見的小游戲都是純前端開發(fā)出來的，比如曾經(jīng)風(fēng)靡的2048、別踩白塊啊等等，簡單有趣，對(duì)于初學(xué)者來說，這些小游戲是非常不錯(cuò)的練手項(xiàng)目。

網(wǎng)頁版2048

項(xiàng)目通過搭建一個(gè)網(wǎng)頁版的 2048 ，讓大家學(xué)習(xí) web 應(yīng)用程序的開發(fā)流程、以及如何讓應(yīng)用在移動(dòng)端自適應(yīng)處理以應(yīng)對(duì)各種大小的屏幕，布局和初始化，編寫游戲的邏輯、實(shí)現(xiàn)讓它能移動(dòng)，判定結(jié)果。

是不是和我們玩的2048一模一樣呀，O(∩_∩)O~

HTML5兩步實(shí)現(xiàn)拼圖游戲

項(xiàng)目使用HTML5和css3實(shí)現(xiàn)的九宮格拼圖游戲。只要兩步既可以實(shí)現(xiàn)炫酷的效果和動(dòng)畫。詳細(xì)的講解，讓你清楚地知道每一句代碼的作用。自己開發(fā)完之后還可以玩玩，告訴你，你可以開發(fā)它，但是玩可不一定行哦~

網(wǎng)頁版掃雷

項(xiàng)目實(shí)現(xiàn)一個(gè)Web版本的掃雷游戲，通過該項(xiàng)目將學(xué)習(xí)并實(shí)踐 JavaScript 和 CSS 等基本的Web開發(fā)知識(shí)。

看著就有想玩的沖動(dòng)啊，有木有~

網(wǎng)頁版-別踩白塊游戲

項(xiàng)目用最基礎(chǔ)的html，css，以及原生的JavaScript實(shí)現(xiàn)一個(gè)網(wǎng)頁版本的“別踩白塊”游戲。

做完后可以試著玩玩，看看速度如何，太快或者太慢都可以隨時(shí)調(diào)整。

HTML5實(shí)現(xiàn)抓怪物小游戲

項(xiàng)目利用 HTML5 的 Canvas 特性，結(jié)合 js 來開發(fā)一個(gè)抓小怪物的小游戲。從中我們可以學(xué)習(xí)到如何用 HTML5 來構(gòu)建一個(gè) WebApp。

JavaScript打地鼠游戲

項(xiàng)目為打地鼠，是大家耳熟能詳?shù)囊豢罱?jīng)典的小游戲，用前端技術(shù)來實(shí)現(xiàn)這個(gè)游戲，簡單有趣。

JavaScript按鍵控制坦克移動(dòng)

項(xiàng)目使用javascript按鍵控制坦克在網(wǎng)頁上移動(dòng)，通過使用很簡單的，清晰明了的代碼使坦克在頁面上平滑的移動(dòng)，通過學(xué)習(xí)，可以掌握javascript的按鍵操作，從而讓頁面更好的與用戶互動(dòng)。

看效果圖很簡單，但是只要稍微發(fā)揮你的想象力，把坦克改成其他的物體，就可以變成其他的小游戲了，比如加一個(gè)迷宮，就是走出迷宮游戲了。

實(shí)用類

前面介紹了前端開發(fā)游戲的項(xiàng)目教程，當(dāng)然前端還可以開發(fā)一些非常實(shí)用的功能，比如小到網(wǎng)站的導(dǎo)航條啊，一個(gè)抽獎(jiǎng)頁面啊等等，這些在網(wǎng)頁上經(jīng)常看到的頁面展示功能，基本都是前端開發(fā)出來的，因此，下面介紹一些比較實(shí)用的前端項(xiàng)目教程。

CSS與JavaScript實(shí)現(xiàn)選項(xiàng)卡

這個(gè)項(xiàng)目實(shí)現(xiàn)前端網(wǎng)頁經(jīng)常用到的 Tab 選項(xiàng)卡效果。主要用到 HTML、CSS 和 JavaScript 技術(shù)，比較適合前端入門練習(xí)。

一起來抽獎(jiǎng)吧

一到各種節(jié)假日就各種的抽獎(jiǎng)活動(dòng)數(shù)不勝數(shù)，大獎(jiǎng)很豐厚，但是，你懂得。這個(gè)項(xiàng)目教大家使用CSS3來制作一個(gè)抽獎(jiǎng)轉(zhuǎn)盤，一窺抽獎(jiǎng)轉(zhuǎn)盤的秘密。

Java和WebSocket開發(fā)網(wǎng)頁聊天室

WebSocket是HTML5一種新的協(xié)議，它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，這個(gè)項(xiàng)目使用WebSocket來開發(fā)網(wǎng)頁聊天室，前端框架會(huì)使用AmazeUI，后臺(tái)使用Java，編輯器使用UMEditor。

瀑布流加載圖片墻

項(xiàng)目通過瀑布流加載圖片墻，實(shí)現(xiàn)無限圖片展示的效果，類似百度圖片一樣的加載方式，體現(xiàn)圖片的交錯(cuò)排列。從中學(xué)習(xí)在沒有后端開發(fā)者提供數(shù)據(jù)的背景下，由我們前端自己模擬數(shù)據(jù)及數(shù)據(jù)接口，自己就能給自己提供任何自己想要的數(shù)據(jù)。

canvas實(shí)現(xiàn)放大鏡效果

項(xiàng)目由 HTML5 的 canvas 實(shí)現(xiàn)放大鏡效果，和淘寶圖片放大器類似的效果，主要依靠 canvas 中的 drawImage() 函數(shù)，希望能通過實(shí)現(xiàn)這個(gè)簡單的項(xiàng)目來讓大家初步認(rèn)識(shí) canvas ，學(xué)會(huì)基本的 canvas 操作。

用CSS和jQuery打造一個(gè)簡單的圖片編輯器

項(xiàng)目利用 CSS 的 filter 和簡單的 Jquery 代碼來實(shí)現(xiàn)一個(gè)簡單的圖片編輯器包括對(duì)圖片的透明度，黑白，圖片亮度等調(diào)節(jié)。

120行代碼實(shí)現(xiàn)簡單的即時(shí)搜索

項(xiàng)目利用 Meteor 和 MongoDB 實(shí)現(xiàn)一個(gè)簡單的即時(shí)搜索服務(wù)。通過本項(xiàng)目將學(xué)習(xí)到 Mongodb 數(shù)據(jù)庫的操作，Meteor 快速制作 Web App。

純前端打造實(shí)時(shí)markdown編輯器

項(xiàng)目通過純前端打造一個(gè)實(shí)時(shí) markdown 編輯器，用到的庫或框架主要有 marked，Ace，highlight.js，Bootstrap。通過本實(shí)驗(yàn)學(xué)習(xí)如何編寫一個(gè) web 應(yīng)用程序的相關(guān)知識(shí)。

CSS3實(shí)現(xiàn)“紅包照片”模糊效果

微信朋友圈里的紅包照片，還有 ios7 帶來的“毛玻璃”菜單效果都很吸引眼球，該項(xiàng)目就嘗試用熟悉的 CSS3 來實(shí)現(xiàn)這個(gè)效果。

使用 Electron 編寫跨平臺(tái)桌面應(yīng)用

該項(xiàng)目主要學(xué)習(xí)如何用 Electron 配合 JavaScript 等 web 技術(shù)創(chuàng)建跨 Linux/Windows/macOS 平臺(tái)的桌面應(yīng)用。

好玩類

前端還可以用比較簡單的方式實(shí)現(xiàn)一些可愛的東西，比如暖男-大白，萌寵-小黃人等等，只要你能想到的，幾乎都可以用前端來實(shí)現(xiàn)，下面就介紹幾個(gè)項(xiàng)目教程。

打造網(wǎng)頁版「大白」

該項(xiàng)目利用 HTML 和 CSS 來打造《超能陸戰(zhàn)隊(duì)》里的 “暖男” -「大白」。學(xué)習(xí)如何用 HTML 結(jié)合 CSS 來設(shè)計(jì)高端大氣上檔次的圖，并了解 HTML 布局，CSS 構(gòu)建對(duì)象的樣式。

JavaScript實(shí)現(xiàn)玫瑰花

項(xiàng)目學(xué)習(xí)如何在網(wǎng)頁中如何使用JavaScript語言實(shí)現(xiàn)一朵漂亮的玫瑰花。其中會(huì)用到html，css，javascript等技術(shù)。

這個(gè)玫瑰花的最后效果是慢慢開放和顯現(xiàn)出來的，很浪漫的趕腳啊~

SCSS（SASS）畫小黃人

項(xiàng)目通過 SCSS（SASS）畫一個(gè)會(huì)眨眼睛的小黃人，主要學(xué)習(xí) CSS3。其中將涉及 SASS 安裝，代碼的編寫，以及繪制小黃人的相關(guān)結(jié)構(gòu)邏輯。

看完以上3個(gè)項(xiàng)目，你能想象都是用前端來實(shí)現(xiàn)的么，O(∩_∩)O~

源碼可以私信我哦

以上呢，介紹了那么多的前端開發(fā)項(xiàng)目，如果你還說你找不到項(xiàng)目，不知道做什么，沒有完整的教程，那么就是你的不對(duì)了，所以，挑選一個(gè)感興趣的項(xiàng)目開始學(xué)習(xí)吧！

在線咨詢

上一篇：給你看八個(gè)網(wǎng)頁特效，讓你的網(wǎng)站建設(shè)更加引人入勝！
下一篇：The Clock Mac版(世界時(shí)鐘工具)中文版

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商