家好，我是Echa。

前段時(shí)間有00后前端程序員粉絲私信小編問道：小時(shí)候我們玩什么小游戲，用Vue和React可以開發(fā)簡(jiǎn)易的Web站點(diǎn)小游戲嗎？這一類的問題。立馬勾起了小編的小時(shí)候玩的那些經(jīng)典小游戲愛的那么癡迷。

作為80后的小編，雖然禿頭程序員沒有頭發(fā)，但是童心還是一直都在的。對(duì)于童年時(shí)玩過的那些經(jīng)典游戲，我們始終難以忘懷。回憶和懷念經(jīng)典最好的方式就是重新體驗(yàn)它們！GitHub作為程序員們的開源寶庫(kù)，有著很多非常好的項(xiàng)目。.其中有許多可以稱之為經(jīng)典，像《俄羅斯方塊》、《記憶翻牌》、《掃雷》、《貪吃蛇》、《坦克大戰(zhàn)》等等陪伴我們度過了兒時(shí)快樂的時(shí)光。

小霸王學(xué)習(xí)機(jī) 一句“小霸王其樂無窮啊”能夠勾起多少八零九零的集體回憶，曾經(jīng)靠一副手柄就能爽快打完魂斗羅、沙羅曼蛇、雪人兄弟、忍者神龜、超級(jí)瑪麗..。

借此機(jī)會(huì)，小編給大家好物分享10個(gè)經(jīng)典小游戲開源項(xiàng)目（Vue、React版），免費(fèi)送一個(gè)。希望忙碌的粉絲們勞逸結(jié)合，可以玩玩，放松放松，有利于身心健康。不過千萬(wàn)別成謎語(yǔ)游戲無法自拔的那種，玩也有一個(gè)度。

下面小編給一一介紹，看看哪款游戲是你們的最愛:你可以在試玩過程中自定義游戲關(guān)卡并學(xué)習(xí)源代碼。

全文大綱

1. react-tetris - 經(jīng)典俄羅斯方塊小游戲
2. backbone-game-engine - 超級(jí)馬里奧是比較經(jīng)典的GBA小游戲，紅帽子藍(lán)吊帶的大胡子工人陪伴著很多90后度過童年。
3. battle-city- 使用 React 將各類素材封裝為對(duì)應(yīng)的組件開發(fā)的坦克大戰(zhàn)小游戲。
4. snake-vue3 - 基于 Vue 3.3、Vite、Vuex 實(shí)現(xiàn)的經(jīng)典貪吃蛇小游戲。
5. minesweeper-react - 用 CSS 復(fù)制 Win98 的風(fēng)格掃雷小游戲。
6. threejs-tetris-react - 基于 Three.js、React、TypeScript 實(shí)現(xiàn)的 3D 俄羅斯方塊游戲
7. habitica - 它會(huì)將你培養(yǎng)習(xí)慣的過程，當(dāng)作一個(gè) RPG 角色扮演游戲。
8. game-application-using-react-and-typescript - 使用 React 和 TypeScript 構(gòu)建的簡(jiǎn)單 2D 蛇游戲。
9. 3072-是一款受流行游戲“2048”啟發(fā)的數(shù)字合并游戲.
10. 3d-chess-v2- 使用 React、Redux Toolkit、ThreeJS、React Three Fiber、ChessJS 和 ChakraUI 構(gòu)建的經(jīng)典國(guó)際象棋游戲。
11. frontend-concentration-or-memory - 使用 Vue3.3、Pinia、Webpack、TypeScript 開發(fā)的一款記憶翻牌游戲。

react-tetris - 經(jīng)典俄羅斯方塊小游戲

Github：https://github.com/chvin/react-tetris

體驗(yàn)：https://chvin.github.io/react-tetris/?lan=en

復(fù)刻經(jīng)典的俄羅斯方塊，該項(xiàng)目采用 React+Redux+Immutable 的技術(shù)棧。這款游戲的復(fù)刻程度堪稱像素級(jí)別，不僅體現(xiàn)在畫面上，還有流暢度、玩法、音效等方面都做到了極致。

俄羅斯方塊是一直各類程序語(yǔ)言熱衷實(shí)現(xiàn)的經(jīng)典游戲，JavaScript的實(shí)現(xiàn)版本也有很多，用React 做好俄羅斯方塊則成了我一個(gè)目標(biāo)。

backbone-game-engine - 超級(jí)馬里奧是比較經(jīng)典的GBA小游戲，紅帽子藍(lán)吊帶的大胡子工人陪伴著很多90后度過童年。

Github：https://github.com/martindrapeau/backbone-game-engine

體驗(yàn)：http://martindrapeau.github.io/backbone-game-engine/super-mario-bros/index.html

超級(jí)馬里奧是比較經(jīng)典的GBA游戲了，這個(gè)紅帽子藍(lán)吊帶的大胡子工人陪伴著很多90后度過童年。這個(gè)游戲支持游戲自定義道具，充分回味童年的樂趣。

特性：

• 基于Backbone。事件、模型、集合、繼承和RESTful持久性。為什么要重新發(fā)明輪子？
• 僅HTML5畫布。沒有jQuery，盡可能少的DOM操作。
• 移動(dòng)優(yōu)化。構(gòu)建為在支持透明觸摸和視口的移動(dòng)設(shè)備上運(yùn)行。一切都針對(duì)最大每秒幀數(shù)（FPS）進(jìn)行了優(yōu)化。
• 使用CocoonJS實(shí)現(xiàn)原生。。專為在魯?shù)碌腃ocoonJS canvas+中運(yùn)行而構(gòu)建。在iOS和Android上部署本機(jī)。
• 2D平臺(tái)生成器。內(nèi)置側(cè)面滾動(dòng)條。內(nèi)置精靈類，精靈表，角色，英雄，四叉樹碰撞檢測(cè)，世界和編輯器。
• 沒有匯編。您不需要安裝node、grunt或其他任何東西。只需編碼并按F5即可運(yùn)行。
• 不需要服務(wù)器。Fork這個(gè)repo，你的Github網(wǎng)站就開始運(yùn)行了。創(chuàng)建你自己的游戲，并將你的朋友指向它。返利以獲取最新的引擎更新。
• 專為移動(dòng)設(shè)備打造。設(shè)想在平板電腦上運(yùn)行。與媽媽分享你的URL，這樣她就可以把它添加到iPad的主屏幕上。
• 如果脫機(jī)，則Take。使用HTML5應(yīng)用程序緩存，您的游戲可以離線運(yùn)行。非常適合在路上或釣魚時(shí)使用。
• 保存狀態(tài)。使用HTML5本地存儲(chǔ)，保存您所在的位置。
• 世界編輯。專為基于瓦片的游戲設(shè)計(jì)，配有世界編輯器。放置你的互動(dòng)程序和角色，然后點(diǎn)擊play進(jìn)行嘗試。點(diǎn)擊保存來拯救你的世界。

battle-city- 使用 React 將各類素材封裝為對(duì)應(yīng)的組件開發(fā)的坦克大戰(zhàn)小游戲。

Github：https://github.com/shinima/battle-city

體驗(yàn)：https://battle-city.js.org

《坦克大戰(zhàn)》是由日本南夢(mèng)宮Namco游戲公司開發(fā)的一款平面射擊游戲，于1985年發(fā)售。游戲以坦克戰(zhàn)斗及保衛(wèi)基地為主題，屬于策略型聯(lián)機(jī)類。 這個(gè)項(xiàng)目在很大程度上還原了坦克大戰(zhàn)游戲。圖標(biāo)、音效和界面等方面，各個(gè)細(xì)節(jié)的幾乎一模一樣。

該 GitHub 倉(cāng)庫(kù)的版本是經(jīng)典坦克大戰(zhàn)的復(fù)刻版本，基于原版素材，使用 React 將各類素材封裝為對(duì)應(yīng)的組件。素材使用 SVG 進(jìn)行渲染以展現(xiàn)游戲的像素風(fēng)，可以先調(diào)整瀏覽器縮放再進(jìn)行游戲，1080P 屏幕下使用 200% 縮放為最佳。此游戲使用網(wǎng)頁(yè)前端技術(shù)進(jìn)行開發(fā)，主要使用 React 進(jìn)行頁(yè)面展現(xiàn)，使用 Immutable.js 作為數(shù)據(jù)結(jié)構(gòu)工具庫(kù)，使用 redux 管理游戲狀態(tài)，以及使用 redux-saga/little-saga 處理復(fù)雜的游戲邏輯。

snake-vue3 - 基于 Vue 3.3、Vite、Vuex 實(shí)現(xiàn)的經(jīng)典貪吃蛇小游戲。

Github：https://github.com/ekinkaradag/snake-vue3

snake-vue3 基于 Vue 3.3、Vite、Vuex 實(shí)現(xiàn)的經(jīng)典貪吃蛇游戲。

minesweeper-react - 用 CSS 復(fù)制 Win98 的風(fēng)格掃雷小游戲。

Github：https://github.com/laoqiu233/minesweeper-react

一個(gè)掃雷游戲，作者嘗試使用老式字體和經(jīng)典的 Win98 圖標(biāo)，用 CSS 復(fù)制 Win98 的風(fēng)格，使這個(gè)項(xiàng)目盡可能真實(shí)。該項(xiàng)目使用的技術(shù)棧包括：TypeScript、Webpack、React、Redux、React Router。

threejs-tetris-react - 基于 Three.js、React、TypeScript 實(shí)現(xiàn)的 3D 俄羅斯方塊游戲

Github：https://github.com/RylanBot/threejs-tetris-react

基于 Three.js、React、TypeScript 實(shí)現(xiàn)的 3D 俄羅斯方塊游戲，可以拖動(dòng)旋轉(zhuǎn)頁(yè)面進(jìn)行觀察。

habitica - 它會(huì)將你培養(yǎng)習(xí)慣的過程，當(dāng)作一個(gè) RPG 角色扮演游戲。

Github：https://github.com/HabitRPG/habitica

這是一個(gè)培養(yǎng)習(xí)慣的開源應(yīng)用，那它為什么會(huì)出現(xiàn)在游戲集合里呢？因?yàn)樗鼤?huì)將你培養(yǎng)習(xí)慣的過程，當(dāng)作一個(gè) RPG 角色扮演游戲。

你需要根據(jù)設(shè)定的習(xí)慣，創(chuàng)建對(duì)應(yīng)現(xiàn)實(shí)中需要完成的任務(wù)，當(dāng)你完成一個(gè)任務(wù)時(shí)會(huì)獲得相應(yīng)的經(jīng)驗(yàn)和金幣，這些東西可以用來提升虛擬人物的等級(jí)以及購(gòu)買裝備。但當(dāng)任務(wù)失敗時(shí)，對(duì)應(yīng)的將失去血量作為懲罰。隨著你的等級(jí)提升，將會(huì)開啟更多的玩法，比如：孵化寵物、職業(yè)、專屬技能、組隊(duì)打副本等。

game-application-using-react-and-typescript - 使用 React 和 TypeScript 構(gòu)建的簡(jiǎn)單 2D 蛇游戲。

Github：https://github.com/Aklilu-Mandefro/game-application-using-react-and-typescript

使用 React 和 TypeScript 構(gòu)建的簡(jiǎn)單 2D 蛇游戲。可以使用 w、a、s 和 d 鍵來移動(dòng)蛇。當(dāng)吃掉水果時(shí)，得分和蛇的長(zhǎng)度會(huì)動(dòng)態(tài)增加，使用 canvas 元素構(gòu)建。其用到的技術(shù)包括：React、Chakra-UI、Redux、Redux-saga。

3072-是一款受流行游戲“2048”啟發(fā)的數(shù)字合并游戲.

Github：https://github.com/WeiChongDevelops/3072

體驗(yàn)：https://3072.vercel.app/

3072 是一款受流行游戲“2048”啟發(fā)的數(shù)字合并游戲，但游戲玩法與2048截然不同，使用的是 3 的倍數(shù)而不是 2，這真的是一種非常深刻和令人振奮的用戶體驗(yàn)改變。這個(gè)項(xiàng)目使用 TypeScript、React 和 Tailwind CSS 構(gòu)建，確保高性能的交互性和令人驚艷的響應(yīng)式設(shè)計(jì)。

3d-chess-v2- 使用 React、Redux Toolkit、ThreeJS、React Three Fiber、ChessJS 和 ChakraUI 構(gòu)建的經(jīng)典國(guó)際象棋游戲。

Github：https://github.com/Kirill2603/3d-chess-v2

使用 React、Redux Toolkit、ThreeJS、React Three Fiber、ChessJS 和 ChakraUI 構(gòu)建的經(jīng)典國(guó)際象棋游戲。

frontend-concentration-or-memory - 使用 Vue3.3、Pinia、Webpack、TypeScript 開發(fā)的一款記憶翻牌游戲。

Github：https://github.com/LAxBANDA/frontend-concentration-or-memory#concentration-or-memory-game

使用 Vue3.3、Pinia、Webpack、TypeScript 開發(fā)的一款記憶翻牌游戲。

最后

粉絲們，有沒有勾起你們兒童對(duì)回憶？喜歡哪款經(jīng)典小游戲呢？

歡迎在評(píng)論區(qū)分享討論。

一臺(tái)電腦,一個(gè)鍵盤,盡情揮灑智慧的人生;

幾行數(shù)字,幾個(gè)字母,認(rèn)真編寫生活的美好;

一 個(gè)靈感,一段程序,推動(dòng)科技進(jìn)步,促進(jìn)社會(huì)發(fā)展。

創(chuàng)作不易，喜歡的老鐵們加個(gè)關(guān)注，點(diǎn)個(gè)贊，打個(gè)賞，后面會(huì)不定期更新干貨和技術(shù)相關(guān)的資訊，速速收藏，謝謝！你們的一個(gè)小小舉動(dòng)就是對(duì)小編的認(rèn)可，更是創(chuàng)作的動(dòng)力。

創(chuàng)作文章的初心是：沉淀、分享和利他。既想寫給現(xiàn)在的你，也想貪心寫給 10 年、20 年后的工程師們，現(xiàn)在的你站在浪潮之巔，面對(duì)魔幻的互聯(lián)網(wǎng)世界，很容易把一條河流看成整片大海。未來的讀者已經(jīng)知道了這段技術(shù)的發(fā)展歷史，但難免會(huì)忽略一些細(xì)節(jié)。如果未來的工程師們真的創(chuàng)造出了時(shí)間旅行機(jī)器，可以讓你回到現(xiàn)在。那么小編的創(chuàng)作就是你和當(dāng)年工程師們的接頭暗號(hào)，你能感知到他們?cè)谶@個(gè)時(shí)代的鍵盤上留下的余溫。

速開發(fā)一款微信小程序游戲需要經(jīng)過一系列詳細(xì)的步驟，確保每個(gè)環(huán)節(jié)都得到充分考慮和處理。以下是每一點(diǎn)的詳細(xì)闡述：

## 1. 學(xué)習(xí)基礎(chǔ)知識(shí)：

首先，掌握基礎(chǔ)知識(shí)是關(guān)鍵。學(xué)習(xí)JavaScript語(yǔ)言，作為小程序的邏輯層，它將負(fù)責(zé)處理用戶交互和游戲的邏輯。WXML和WXSS是用于描述小程序結(jié)構(gòu)和樣式的兩個(gè)重要語(yǔ)言。此外，了解JSON格式，因?yàn)樾〕绦蚺渲煤蛿?shù)據(jù)傳輸通常采用JSON格式。深入學(xué)習(xí)微信官方文檔，了解小程序的整體架構(gòu)和各項(xiàng)API的使用方式。

## 2. 設(shè)計(jì)游戲：

在基礎(chǔ)知識(shí)的基礎(chǔ)上，展開游戲設(shè)計(jì)工作。繪制游戲草圖，包括界面布局、元素位置等。然后，詳細(xì)描述游戲的規(guī)則、玩法和交互方式。考慮用戶體驗(yàn)，確保游戲設(shè)計(jì)既吸引人又易于操作。

## 3. 搭建開發(fā)環(huán)境：

下載并安裝微信開發(fā)者工具，這是小程序的官方開發(fā)環(huán)境。該工具提供了一個(gè)集成開發(fā)的平臺(tái)，可以實(shí)時(shí)編輯代碼、預(yù)覽效果和調(diào)試。配置好開發(fā)者工具，確保與微信賬號(hào)的關(guān)聯(lián)和小程序的創(chuàng)建。

## 4. 編寫代碼：

根據(jù)游戲設(shè)計(jì)，開始編寫游戲代碼。使用JavaScript處理游戲的邏輯，WXML定義頁(yè)面結(jié)構(gòu)，WXSS定義頁(yè)面樣式，JSON配置小程序的各項(xiàng)屬性。根據(jù)需要，可以考慮使用游戲開發(fā)框架，如Cocos Creator或LayaAir，它們提供了更高層次的封裝和更便捷的工具。

## 5. 測(cè)試游戲：

在微信開發(fā)者工具中，對(duì)游戲進(jìn)行全面測(cè)試。檢查游戲規(guī)則、界面布局和交互是否符合設(shè)計(jì)要求。解決潛在的問題和BUG。此外，邀請(qǐng)朋友和團(tuán)隊(duì)成員參與測(cè)試，收集用戶體驗(yàn)反饋，進(jìn)行適時(shí)的優(yōu)化和調(diào)整。

## 6. 發(fā)布游戲：

當(dāng)確保游戲質(zhì)量達(dá)到要求后，準(zhǔn)備將小程序提交到微信平臺(tái)進(jìn)行審核。在提交之前，確保遵循微信的規(guī)范和標(biāo)準(zhǔn)，填寫相關(guān)的發(fā)布信息。通過審核后，小程序就可以在微信平臺(tái)上線。跟蹤上線后的反饋，進(jìn)行后續(xù)的維護(hù)和更新。

以上步驟構(gòu)成了一個(gè)相對(duì)完整的開發(fā)流程。在每個(gè)步驟中，都要注重細(xì)節(jié)，確保游戲的質(zhì)量和用戶體驗(yàn)達(dá)到預(yù)期。隨時(shí)準(zhǔn)備根據(jù)實(shí)際情況進(jìn)行調(diào)整和優(yōu)化。

開啟數(shù)字未來：元宇宙、AR和VR數(shù)字科技的革命正在重新定義我們的現(xiàn)實(shí)。元宇宙、增強(qiáng)現(xiàn)實(shí)（AR）和虛擬現(xiàn)實(shí)（VR）正帶來前所未有的體驗(yàn)。這些技術(shù)改變了教育、宣傳、科普和社交娛樂的方式。如果您尋求Unity、虛擬現(xiàn)實(shí)或元宇宙方面的解決方案，歡迎聯(lián)系我們。

者：Tam Hanna

轉(zhuǎn)發(fā)鏈接：https://www.creativebloq.com/how-to/21-ways-to-optimise-your-css-and-speed-up-your-site