GitHub上10个有趣的开源小游戏（附加在线演示）

拼搏现实的明天。 2022-09-10 04:11 538阅读 0赞

# 前言 #

GitHub作为程序员们的开源宝库，有着很多非常好的项目。对于初学者来说，游戏有着一种特殊的魅力。今天统计了GitHub上比较有趣的10个开源小游戏，其中有许多可以称之为经典。笔者是一名90后，《贪吃蛇》、《坦克大战》、《超级马里奥》和《太空侵略者》作为儿时的玩伴，陪伴笔者度过了很多时光，给笔者带来了非常多的回忆。

# 1、Pacman（吃豆人游戏） #

--------------------

项目演示地址：[ https://passer-by.com/pacman/][https_passer-by.com_pacman]

GitHub项目链接：[ https://github.com/mumuy/pacman][https_github.com_mumuy_pacman]

作者GitHub主页：[ https://github.com/mumuy][https_github.com_mumuy]

《吃豆人》（Pac-Man）是一部由同名街机游戏移植至Atari 2600平台的游戏，最早由南梦宫公司于1980年在街机上推出，后由雅达利公司于1982年3月中旬发售Atari 2600版。 《吃豆人》算是比较经典的游戏了，笔者小时候并没有接触过这个游戏，最初的接触还是在迪士尼动画电影《无敌破坏王》中认识到的。这个项目使用HTML和js很好的还原了这个游戏，其中作者内置了12个关卡，游戏还是十分流畅的。项目效果图如下：

![吃豆人第一关][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70]

# 2 、React Tetris（俄罗斯方块） #

--------------------

项目演示地址：[ https://chvin.github.io/react-tetris/?lan=zh][https_chvin.github.io_react-tetris_lan_zh]

GitHub项目链接：[ https://github.com/chvin/react-tetris][https_github.com_chvin_react-tetris]

作者GitHub主页：[ https://github.com/chvin][https_github.com_chvin]

《俄罗斯方块》（Tetris， 俄文：Тетрис）是一款由俄罗斯人**阿列克谢·帕基特诺夫**于1984年6月发明的休闲游戏。 在笔者小的时候，《俄罗斯方块》可以算是笔者最喜欢的游戏之一了。那个时候拿着一个按键机，无止境的玩着《俄罗斯方块》，真是一种享受。如今看到这个项目又想起了那段日子。这个项目也是用Html和js实现的，项目效果如下：

![俄罗斯方块界面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 1]

# 3、Battle City Remake（坦克大战） #

--------------------

项目演示地址：[ https://battle-city.js.org/\#/][https_battle-city.js.org]

GitHub项目连接：[ https://github.com/shinima/battle-city][https_github.com_shinima_battle-city]

作者GitHub主页：[ https://github.com/shinima][https_github.com_shinima]

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

![坦克大战游戏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 2]

# 4、国际象棋 #

--------------------

项目演示地址：[ https://lichess.org/][https_lichess.org]

GitHub项目链接：[ https://github.com/ornicar/lila][https_github.com_ornicar_lila]

作者GitHub主页：[ https://github.com/ornicar ][https_github.com_ornicar]（此项目贡献者比较多）

《国际象棋》是一项比较考验智力与策略的棋牌小游戏。此项目是款基于 Scala 语言，完全免费、开源、没有广告、支持多语言的《在线版国际象棋游戏》。 因为笔者不管是对国际象棋还是Scala语言，都没有很多了解，所以在此不赘述什么了，项目效果图如下：

![国际象棋][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 3]

# 5、Star Battle（星战） #

--------------------

项目演示地址：[ https://4ark.me/star-battle/][https_4ark.me_star-battle]

GitHub项目链接：[ https://github.com/gd4Ark/star-battle][https_github.com_gd4Ark_star-battle]

作者GitHub主页：[ https://github.com/gd4Ark][https_github.com_gd4Ark]

曾经有一段时间，太空游戏风靡全球，一大批飞行射击类游戏涌入我们的视线。笔者小时候也加入了这个潮流，那个时候用着大头电脑玩着飞机大战。虽然现在一些网络游戏成为潮流，但是对于笔者来说，单机游戏仍有着不可动摇的魅力。项目的效果图如下：

![星球大战游戏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 4]

# 6、 Alien Invasion（太空侵略者） #

--------------------

项目演示地址：[ http://cykod.github.io/AlienInvasion/][http_cykod.github.io_AlienInvasion]

GitHub项目链接：[ https://github.com/StrykerKKD/SpaceInvaders][https_github.com_StrykerKKD_SpaceInvaders]

作者GitHub主页：[ https://github.com/StrykerKKD][https_github.com_StrykerKKD]

这个小游戏也是一款飞行射击类游戏，玩法非常简单。这款游戏同笔者小时候玩的，在玩法上十分相似。效果图如下：

![太空侵略者][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 5]

# 7、Snake Game（贪吃蛇） #

--------------------

项目演示地址：[ https://rabiroshan.github.io/snake\_game/][https_rabiroshan.github.io_snake_game]

GitHub项目链接：[ https://github.com/RabiRoshan/snake\_game][https_github.com_RabiRoshan_snake_game]

作者GitHub主页：[ https://github.com/RabiRoshan][https_github.com_RabiRoshan]

毋庸置疑，贪吃蛇在游戏史上占据了非常重要的地位，它曾伴随着诺基亚度过了一段辉煌时期。由于当时诺基亚的火爆，而且几乎每部诺基亚都内置了贪吃蛇游戏。所以几乎那个年代的人多少对贪吃蛇都有些了解，而且在诺基亚没落之后，贪吃蛇依旧存活在我们的视野当中。这个项目继承了贪吃蛇的规则，在界面上不同于传统的贪吃蛇：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 6]

# 8、 Super Mario Bros（超级马里奥） #

--------------------

项目演示地址：[ http://martindrapeau.github.io/backbone-game-engine/super-mario-bros/index.html][http_martindrapeau.github.io_backbone-game-engine_super-mario-bros_index.html]

GitHub项目链接：[ https://github.com/martindrapeau/backbone-game-engine][https_github.com_martindrapeau_backbone-game-engine]

作者GitHub主页：[ https://github.com/martindrapeau][https_github.com_martindrapeau]

超级马里奥和坦克大战都是比较经典的GBA游戏了，这个红帽子蓝吊带的大胡子工人陪伴着很多90后度过童年。那时候笔者在其中一关卡住了，一直无限循环至今还未真正通过关，也确实是一个遗憾。这个项目作者在画面上很好的还原的原作，但是在操作上稍微有些反应迟钝：

![超级马里奥][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 7]

# 9、2048 #

--------------------

项目演示地址：[ https://play2048.co/][https_play2048.co]

GitHub项目链接：[ https://github.com/gabrielecirulli/2048][https_github.com_gabrielecirulli_2048]

作者GitHub主页：[ https://github.com/gabrielecirulli ][https_github.com_gabrielecirulli]（此项目贡献者比较多）

2048是前几年流行的一款益智类单机游戏， 游戏的规则十分简单 。简单易上手，但又十分虐心。笔者至今还未成功通关过一次，虽然没玩多久，着实惭愧。效果图如下：

![2048游戏][2048]

# 10、Sliding Puzzle（滑动拼图） #

--------------------

项目演示地址：[ https://www.sandeepnambiar.com/sliding\_puzzle/][https_www.sandeepnambiar.com_sliding_puzzle]

GitHub项目链接：[ https://github.com/gamedolphin/sliding\_puzzle][https_github.com_gamedolphin_sliding_puzzle]

作者GitHub主页：[ https://github.com/RotMGNambiar ][https_github.com_RotMGNambiar]和[ https://github.com/gamedolphin][https_github.com_gamedolphin]

拼图游戏也是之前比较流行的，这个项目用数字取代了图片，玩法和拼图游戏是一样的，还是十分有趣的。喜欢拼图游戏和华容道的伙伴们可以尝试以下，效果图如下：

![用数字代替的拼图游戏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 8]

除此之外，再给大家介绍一个开源项目。这个不是游戏，而是一个非常炫酷的城市图。

# 0、City Vein（城市静脉） #

项目演示地址：[ https://96486d9b.github.io/city-vein/][https_96486d9b.github.io_city-vein]

GitHub项目地址：[ https://github.com/96486d9b/city-vein][https_github.com_96486d9b_city-vein]

作者GitHub主页：[ https://github.com/96486d9b][https_github.com_96486d9b]

用公交路线数据，还原城市结构。通过数据可视化手段，还原了 30 多个城市的城市结构。该项目中有数据获取和处理的脚本，而且该项目充分体现了数据可视化带来的便利和效果，易于激发学习编程的热情。 效果图如下：  
![杭州公交线路图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 9]

[https_passer-by.com_pacman]: https://passer-by.com/pacman/
[https_github.com_mumuy_pacman]: https://github.com/mumuy/pacman
[https_github.com_mumuy]: https://github.com/mumuy
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70]: /images/20220829/027029cb0681498dbacc1f37b8a9b8ce.png
[https_chvin.github.io_react-tetris_lan_zh]: https://chvin.github.io/react-tetris/?lan=zh
[https_github.com_chvin_react-tetris]: https://github.com/chvin/react-tetris
[https_github.com_chvin]: https://github.com/chvin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 1]: /images/20220829/bad5a047198c40899294b2e953fe4491.png
[https_battle-city.js.org]: https://battle-city.js.org/#/
[https_github.com_shinima_battle-city]: https://github.com/shinima/battle-city
[https_github.com_shinima]: https://github.com/shinima
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 2]: /images/20220829/a2ca24249db04e75a8531eea5f7a4bca.png
[https_lichess.org]: https://lichess.org/
[https_github.com_ornicar_lila]: https://github.com/ornicar/lila
[https_github.com_ornicar]: https://github.com/ornicar
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 3]: /images/20220829/1fb91a74427d451898be28f47d7c4745.png
[https_4ark.me_star-battle]: https://4ark.me/star-battle/
[https_github.com_gd4Ark_star-battle]: https://github.com/gd4Ark/star-battle
[https_github.com_gd4Ark]: https://github.com/gd4Ark
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 4]: /images/20220829/cd552ee6243b47c68372b09551be22e8.png
[http_cykod.github.io_AlienInvasion]: http://cykod.github.io/AlienInvasion/
[https_github.com_StrykerKKD_SpaceInvaders]: https://github.com/StrykerKKD/SpaceInvaders
[https_github.com_StrykerKKD]: https://github.com/StrykerKKD
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 5]: /images/20220829/f30c5ded9a9a436d973cb537c5e7b79d.png
[https_rabiroshan.github.io_snake_game]: https://rabiroshan.github.io/snake_game/
[https_github.com_RabiRoshan_snake_game]: https://github.com/RabiRoshan/snake_game
[https_github.com_RabiRoshan]: https://github.com/RabiRoshan
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 6]: /images/20220829/26b0bc1f3e65456e824eb30210a4a5c7.png
[http_martindrapeau.github.io_backbone-game-engine_super-mario-bros_index.html]: http://martindrapeau.github.io/backbone-game-engine/super-mario-bros/index.html
[https_github.com_martindrapeau_backbone-game-engine]: https://github.com/martindrapeau/backbone-game-engine
[https_github.com_martindrapeau]: https://github.com/martindrapeau
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 7]: /images/20220829/aa0632055660458ba84700918137fee2.png
[https_play2048.co]: https://play2048.co/
[https_github.com_gabrielecirulli_2048]: https://github.com/gabrielecirulli/2048
[https_github.com_gabrielecirulli]: https://github.com/gabrielecirulli
[2048]: /images/20220829/62e5303a224b48ff840bd59078401614.png
[https_www.sandeepnambiar.com_sliding_puzzle]: https://www.sandeepnambiar.com/sliding_puzzle/
[https_github.com_gamedolphin_sliding_puzzle]: https://github.com/gamedolphin/sliding_puzzle
[https_github.com_RotMGNambiar]: https://github.com/RotMGNambiar
[https_github.com_gamedolphin]: https://github.com/gamedolphin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 8]: /images/20220829/14d1afa87f4d477bb24a41c9d57e2af3.png
[https_96486d9b.github.io_city-vein]: https://96486d9b.github.io/city-vein/
[https_github.com_96486d9b_city-vein]: https://github.com/96486d9b/city-vein
[https_github.com_96486d9b]: https://github.com/96486d9b
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70 9]: /images/20220829/bea0595b309c4c6baf452962e8f721e2.png