大家好，我是Echa。

前段时间有00后前端程序员粉丝私信小编问道：小时候我们玩什么小游戏，用Vue和React可以开发简易的Web站点小游戏吗？这一类的问题。立马勾起了小编的小时候玩的那些经典小游戏爱的那么痴迷。

经典小游戏爱的那么痴迷

作为80后的小编，虽然秃头程序员没有头发，但是童心还是一直都在的。对于童年时玩过的那些经典游戏，我们始终难以忘怀。回忆和怀念经典最好的方式就是重新体验它们！GitHub作为程序员们的开源宝库，有着很多非常好的项目。.其中有许多可以称之为经典，像《俄罗斯方块》、《记忆翻牌》、《扫雷》、《贪吃蛇》、《坦克大战》等等陪伴我们度过了儿时快乐的时光。

小霸王学习机 一句“小霸王其乐无穷啊”能够勾起多少八零九零的集体回忆，曾经靠一副手柄就能爽快打完魂斗罗、沙罗曼蛇、雪人兄弟、忍者神龟、超级玛丽..。

小霸王

借此机会，小编给大家好物分享10个经典小游戏开源项目（Vue、React版），免费送一个。希望忙碌的粉丝们劳逸结合，可以玩玩，放松放松，有利于身心健康。不过千万别成谜语游戏无法自拔的那种，玩也有一个度。

下面小编给一一介绍，看看哪款游戏是你们的最爱:你可以在试玩过程中自定义游戏关卡并学习源代码。

全文大纲

1. react-tetris - 经典俄罗斯方块小游戏
2. backbone-game-engine - 超级马里奥是比较经典的GBA小游戏，红帽子蓝吊带的大胡子工人陪伴着很多90后度过童年。
3. battle-city- 使用 React 将各类素材封装为对应的组件开发的坦克大战小游戏。
4. snake-vue3 - 基于 Vue 3.3、Vite、Vuex 实现的经典贪吃蛇小游戏。
5. minesweeper-react - 用 CSS 复制 Win98 的风格扫雷小游戏。
6. threejs-tetris-react - 基于 Three.js、React、TypeScript 实现的 3D 俄罗斯方块游戏
7. habitica - 它会将你培养习惯的过程，当作一个 RPG 角色扮演游戏。
8. game-application-using-react-and-typescript - 使用 React 和 TypeScript 构建的简单 2D 蛇游戏。
9. 3072-是一款受流行游戏“2048”启发的数字合并游戏.
10. 3d-chess-v2- 使用 React、Redux Toolkit、ThreeJS、React Three Fiber、ChessJS 和 ChakraUI 构建的经典国际象棋游戏。
11. frontend-concentration-or-memory - 使用 Vue3.3、Pinia、Webpack、TypeScript 开发的一款记忆翻牌游戏。

react-tetris - 经典俄罗斯方块小游戏

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

体验：
https://chvin.github.io/react-tetris/?lan=en

react-tetris - 经典俄罗斯方块小游戏

复刻经典的俄罗斯方块，该项目采用 React+Redux+Immutable 的技术栈。这款游戏的复刻程度堪称像素级别，不仅体现在画面上，还有流畅度、玩法、音效等方面都做到了极致。

俄罗斯方块是一直各类程序语言热衷实现的经典游戏，JavaScript的实现版本也有很多，用React 做好俄罗斯方块则成了我一个目标。

backbone-game-engine - 超级马里奥是比较经典的GBA小游戏，红帽子蓝吊带的大胡子工人陪伴着很多90后度过童年。

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

体验：
http://martindrapeau.github.io/backbone-game-engine/super-mario-bros/index.html

backbone-game-engine - 超级马里奥

超级马里奥是比较经典的GBA游戏了，这个红帽子蓝吊带的大胡子工人陪伴着很多90后度过童年。这个游戏支持游戏自定义道具，充分回味童年的乐趣。

特性：

• 基于Backbone。事件、模型、集合、继承和RESTful持久性。为什么要重新发明轮子？
• 仅HTML5画布。没有jQuery，尽可能少的DOM操作。
• 移动优化。构建为在支持透明触摸和视口的移动设备上运行。一切都针对最大每秒帧数（FPS）进行了优化。
• 使用CocoonJS实现原生。。专为在鲁德的CocoonJS canvas+中运行而构建。在iOS和Android上部署本机。
• 2D平台生成器。内置侧面滚动条。内置精灵类，精灵表，角色，英雄，四叉树碰撞检测，世界和编辑器。
• 没有汇编。您不需要安装node、grunt或其他任何东西。只需编码并按F5即可运行。
• 不需要服务器。Fork这个repo，你的Github网站就开始运行了。创建你自己的游戏，并将你的朋友指向它。返利以获取最新的引擎更新。
• 专为移动设备打造。设想在平板电脑上运行。与妈妈分享你的URL，这样她就可以把它添加到iPad的主屏幕上。
• 如果脱机，则Take。使用HTML5应用程序缓存，您的游戏可以离线运行。非常适合在路上或钓鱼时使用。
• 保存状态。使用HTML5本地存储，保存您所在的位置。
• 世界编辑。专为基于瓦片的游戏设计，配有世界编辑器。放置你的互动程序和角色，然后点击play进行尝试。点击保存来拯救你的世界。

battle-city- 使用 React 将各类素材封装为对应的组件开发的坦克大战小游戏。

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

体验：
https://battle-city.js.org

坦克大战 单人打

《坦克大战》是由日本南梦宫Namco游戏公司开发的一款平面射击游戏，于1985年发售。游戏以坦克战斗及保卫基地为主题，属于策略型联机类。 这个项目在很大程度上还原了坦克大战游戏。图标、音效和界面等方面，各个细节的几乎一模一样。

坦克大战 双人打

该 GitHub 仓库的版本是经典坦克大战的复刻版本，基于原版素材，使用 React 将各类素材封装为对应的组件。素材使用 SVG 进行渲染以展现游戏的像素风，可以先调整浏览器缩放再进行游戏，1080P 屏幕下使用 200% 缩放为最佳。此游戏使用网页前端技术进行开发，主要使用 React 进行页面展现，使用 Immutable.js 作为数据结构工具库，使用 redux 管理游戏状态，以及使用 redux-saga/little-saga 处理复杂的游戏逻辑。

snake-vue3 - 基于 Vue 3.3、Vite、Vuex 实现的经典贪吃蛇小游戏。

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

经典贪吃蛇小游戏

snake-vue3 基于 Vue 3.3、Vite、Vuex 实现的经典贪吃蛇游戏。

minesweeper-react - 用 CSS 复制 Win98 的风格扫雷小游戏。

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

Win98 的风格扫雷小游戏

一个扫雷游戏，作者尝试使用老式字体和经典的 Win98 图标，用 CSS 复制 Win98 的风格，使这个项目尽可能真实。该项目使用的技术栈包括：TypeScript、Webpack、React、Redux、React Router。

threejs-tetris-react - 基于 Three.js、React、TypeScript 实现的 3D 俄罗斯方块游戏

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

3D 俄罗斯方块游戏

基于 Three.js、React、TypeScript 实现的 3D 俄罗斯方块游戏，可以拖动旋转页面进行观察。

habitica - 它会将你培养习惯的过程，当作一个 RPG 角色扮演游戏。

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

RPG 角色扮演游戏

这是一个培养习惯的开源应用，那它为什么会出现在游戏集合里呢？因为它会将你培养习惯的过程，当作一个 RPG 角色扮演游戏。

你需要根据设定的习惯，创建对应现实中需要完成的任务，当你完成一个任务时会获得相应的经验和金币，这些东西可以用来提升虚拟人物的等级以及购买装备。但当任务失败时，对应的将失去血量作为惩罚。随着你的等级提升，将会开启更多的玩法，比如：孵化宠物、职业、专属技能、组队打副本等。

game-application-using-react-and-typescript - 使用 React 和 TypeScript 构建的简单 2D 蛇游戏。

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

简单 2D 蛇游戏

使用 React 和 TypeScript 构建的简单 2D 蛇游戏。可以使用 w、a、s 和 d 键来移动蛇。当吃掉水果时，得分和蛇的长度会动态增加，使用 canvas 元素构建。其用到的技术包括：React、Chakra-UI、Redux、Redux-saga。

3072-是一款受流行游戏“2048”启发的数字合并游戏.

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

体验：https://3072.vercel.app/

3072 数字合并游戏

3072 是一款受流行游戏“2048”启发的数字合并游戏，但游戏玩法与2048截然不同，使用的是 3 的倍数而不是 2，这真的是一种非常深刻和令人振奋的用户体验改变。这个项目使用 TypeScript、React 和 Tailwind CSS 构建，确保高性能的交互性和令人惊艳的响应式设计。

3d-chess-v2- 使用 React、Redux Toolkit、ThreeJS、React Three Fiber、ChessJS 和 ChakraUI 构建的经典国际象棋游戏。

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

经典国际象棋游戏

使用 React、Redux Toolkit、ThreeJS、React Three Fiber、ChessJS 和 ChakraUI 构建的经典国际象棋游戏。

frontend-concentration-or-memory - 使用 Vue3.3、Pinia、Webpack、TypeScript 开发的一款记忆翻牌游戏。

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

记忆翻牌游戏

使用 Vue3.3、Pinia、Webpack、TypeScript 开发的一款记忆翻牌游戏。

最后

粉丝们，有没有勾起你们儿童对回忆？喜欢哪款经典小游戏呢？

欢迎在评论区分享讨论。

一台电脑,一个键盘,尽情挥洒智慧的人生;

几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。

创作文章的初心是：沉淀、分享和利他。既想写给现在的你，也想贪心写给 10 年、20 年后的工程师们，现在的你站在浪潮之巅，面对魔幻的互联网世界，很容易把一条河流看成整片大海。未来的读者已经知道了这段技术的发展历史，但难免会忽略一些细节。如果未来的工程师们真的创造出了时间旅行机器，可以让你回到现在。那么小编的创作就是你和当年工程师们的接头暗号，你能感知到他们在这个时代的键盘上留下的余温。