大家好，我是Echa。

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

经典小游戏爱的那么痴迷

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

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

小霸王

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

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

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

Github：

体验：

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

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

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

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

Github：

体验：

backbone-game-engine - 超级马里奥

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

特性：

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

Github：

体验：

坦克大战 单人打

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

坦克大战 双人打

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

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

Github：

经典贪吃蛇小游戏

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

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

Github：

Win98 的风格扫雷小游戏

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

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

Github：

3D 俄罗斯方块游戏

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

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

Github：

RPG 角色扮演游戏

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

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

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

Github：

简单 2D 蛇游戏

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

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

Github：

体验：

3072 数字合并游戏

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

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

Github：

经典国际象棋游戏

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

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

Github：#concentration-or-memory-game

记忆翻牌游戏

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

最后

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