英文 | https://javascript.plainenglish.io/17-exciting-games-on-codepen-you-can-learn-from-about-game-coding-5417d90f2490

翻译 | web前端开发

对我来说，向他人学习编码是提高我的编程技能的另一种方式。像CodePen和Github之类的网站上就有很多优秀的程序员在那里与世界各国的程序员公开分享了他们的项目。

如果你打算使用CSS，JavaScript和HTML创建迷你小游戏，那我今天的内容，应该可以给你一些帮助。你可以通过查看CodePen上的源码来进行编程技能的学习，同时还可以创建自己的小游戏。

1、记忆游戏

这个游戏有点令人兴奋。你必须配对编程语言（Java-Java），直到游戏结束。没有时间限制，但是，你需要敏锐的记忆才能完成整个游戏。

这个游戏由Nate Wiley创建，如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/natewiley/pen/HBrbL

2、RGB彩色游戏

在这个游戏中，你将不得不猜测哪种颜色组合是正确的。你有五次尝试完成每个回合。你不必着急，因为没有时间限制，很可能会失败几次。

这个由Michelle Huang创建，如果你想查看源码，可以到在CodePen上查看完整代码，代码地址：https://codepen.io/itsmhuang/pen/oxaReK

3、使用JavaScript的Pong游戏

这是一个简单的乒乓球游戏，至少有五轮。你与机器人对战并得分直到获胜。该游戏是由键盘控制的，因此你会感觉像在玩一个真实的游戏。

这个游戏由加百利·杜贝（GabrielDubé）创建，如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/gdube/pen/JybxxZ

4、冠状病毒入侵者

这是一个令人兴奋的游戏，但会累人。为了赢得游戏，你必须多次单击才能杀死冠状病毒。现在，我建议你使用鼠标进行硬式单击。

这个游戏由 Elad Shechter创建，如果你想查看源码，可以到在CodePen上查看完整代码，代码地址：https://codepen.io/elad2412/pen/wvabjXy

5、冠状病毒射击游戏

这与上面的以前的冠状病毒游戏有很大的不同。你需要射击将看到的每一个病毒，直到清除游戏为止。你玩游戏的时间越长，获得的能量就越多。将光标指向所有这些对象并完成游戏。

这个游戏的创建者是Faisal Jawed，如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/faisal-jawed/pen/NWqeRNZ

6、迷宫游戏

如果你有更多时间玩，这个游戏适合您。游戏分为几个关卡。初级水平，很容易成功，但是，你需要花费很长时间才能完成极端和艰巨的任务。如果你无法完成艰难的关卡，那么你始终可以玩简单和中等的关卡。每当你重新启动时，它们的迷宫总是会改变。

这个游戏的创建者是马丁，如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/TheCodeDepository/pen/jKBaoN

7、射击打靶游戏

通过用弓箭击中靶心目标来玩这个游戏。你必须仔细瞄准才能达到目标。没有时间限制。你的箭头是无限的。你可以发射任意数量的箭。

这个游戏的创建者是 Elliot Geno，如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/pyrografix/pen/qrqpJN

8、火柴人大战

需要两名玩家才能玩这个游戏。你需要有人与之抗衡才能享受这场比赛。游戏是通过互相击打来进行的，无论谁先耗尽生命，都将输掉游戏。

这个游戏的创建者是Laïsa， 如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/LERUS/pen/rNaZPJv

9、蛇游戏

我们都熟悉，我们的首批3210手机上的这款游戏。该游戏可能是受到该游戏启发的，并且你的蛇会一直向前推进，直到你击中自己。

这个游戏的创建者是 Jack Rugile， 如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/jackrugile/pen/IHbvh

10、僵尸混乱大战

这场比赛是关于时间准确性。你必须通过逐个射击僵尸来防止它们进入另一侧。每个回合中有六个子弹，子弹用完时需要重新加载。

这个游戏的创建者是 Elior Tabeka，如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/eliortabeka/pen/RoNgzR

11、Lingo游戏

我从来没有清除过这个游戏。我尝试了几次，但没有成功。你必须猜出黄色方块后面的单词。我不知道这些词是什么，因为我回答正确了。

这个游戏的创建者是KS，如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/KSayrs/pen/KgObm。

12、箭防游戏

这个游戏很简单。只要射向你的箭头，就不要让自己受到打击。

这个游戏的创建者是Faisal Jawed，如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/faisal-jawed/pen/xxKBgBo

13、倾斜迷宫游戏

这款游戏一开始就非常有创意，也很容易。这是一个迷宫游戏，但与我上面提到的不同。在此游戏中，你必须使所有圆点彼此碰撞，当下降到一个圆点时，将其置于迷宫中的虚线圆形状。

这个游戏的创建者是Hunor Marton Borbely，如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/HunorMarton/pen/VwKwgxX

14、井字游戏

这个游戏是我的童年游戏。我学会了用纸和笔玩，现在，我可以在线玩了。在此游戏中，第一个成功将其三个标记成功放置在对角线，水平或垂直行中的玩家是获胜者。

这个游戏的创建者是freeCodeCamp，如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/freeCodeCamp/pen/KzXQgy

15、避免小行星

在这个游戏中，你需要不惜一切代价避免被小行星击中。

这个游戏的创建者是Sagee Conway，如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/saconway/pen/VwvyVpx

16、国际象棋游戏

所有人都知道这个游戏。与另一位国际象棋棋手一起玩可以享受这个游戏。

这个游戏的创建者是Harold Bell，如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/hbellatcodepen/pen/GxqmaJ

17、HTML5赛车游戏

这是一个简单的赛车游戏，这款游戏可以让你想起你的童年时代的旧式赛车游戏。

这个游戏的创建者是洛根（Logan），如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/HRLRies/pen/GpqGWr

18、游戏逻辑

该游戏类似于水果忍者游戏。剪掉掉落在地上的气球-错过了三个气球，比赛结束了。

这个游戏的创建者是法比奥·奥塔维亚尼（Fabio Ottaviani），如果你想查看源码，可以到在CodePen上查看完整代码。

代码地址：https://codepen.io/supah/pen/vYKYKGd

总结

我希望您喜欢这个清单，也希望您在无聊时会喜欢上面的游戏。但是，不要只是玩这些游戏。您可以阅读它们的代码，对其进行研究，并创建自己的游戏。

学习更多技能

请点击下方web前端开发