🎮 11 个让你沉迷其中、通过游戏学习编程的网站

寓教于乐，通过玩游戏学习编程！

学习编程应该是一件有趣的事，但说实话，大多数现有的编程教程都枯燥乏味，毫无启发性。

在 YouTube 视频上看别人编写代码，或者阅读没完没了的文档，很快就会让人感到无聊！

人们常说学习编程的最佳方法是边做边学，但如果可以一边玩游戏一边编程呢？

那肯定很棒很有趣，对吧？

幸运的是，很多聪明人也这么认为，所以现在有很多资源可以通过游戏来学习编程。

我精选了一些最好玩、最让人上瘾的网站，让你通过玩游戏来学习编程。

一号玩家，准备好了吗？

#1 - CodeCombat

CodeCombat是一个创新的平台，它将学习编程的过程游戏化。

它拥有趣味十足、引人入胜的游戏化环境，使初学者更容易理解编程概念。

首先，你需要选择一个角色，然后逐步闯过各个关卡，每个关卡都旨在教授编程的不同方面。

在此过程中，你将通过编写代码来引导你的角色应对挑战和战斗，从而学习 Python、JavaScript 和其他编程语言。

CodeCombat 是一种让编程变得有趣且易于上手的好方法，适合所有年龄段和技能水平的人。

#2 -编程游戏

如果你正在寻找一种有趣且引人入胜的学习编程的方式，CodinGame就是最适合你的平台。

它包含类似游戏的挑战和谜题，让你在享受乐趣的同时学习编程概念。

该平台提供一系列以游戏形式呈现的编程挑战，您可以在其中解决谜题、编写算法并与其他用户竞争。它支持多种编程语言，例如 Python、Java 和 C++。

随着你不断升级，你将接触到更高级的编程技能，这将有助于你成为一名更优秀的程序员。

无论你是编程新手还是经验丰富的程序员，CodinGame 都能满足你的需求。

#3 - CSS Diner

CSS Diner是一个很棒的平台，它提供了一种简单有趣的学习 CSS 的方式。

游戏共有 32 个难度递增的关卡，你将在类似游戏的环境中学习 CSS 选择器的基础知识。

每个关卡都以前一个关卡为基础，让你能够运用所学知识，并在游戏结束时成为 CSS 选择器专家。

最棒的是，CSS Diner 完全免费，任何想以有趣且引人入胜的方式学习 CSS 的人都可以使用它。

#4 - Flexbox Froggy

继续学习CSS，接下来是Flexbox Froggy。Flexbox Froggy是一款有趣且互动性强的游戏，旨在帮助初学者学习如何使用CSS Flexbox。

游戏共有 24 个关卡，每个关卡都挑战你使用 Flexbox 来定位一组青蛙。

随着关卡的推进，你将学习新的 Flexbox 属性以及如何应用它们来创建复杂的布局。

Flexbox Froggy 凭借其色彩鲜艳的画面和直观的游戏玩法，使学习 CSS Flexbox 成为一种有趣且引人入胜的体验。

#5 - CheckiO

CheckiO是一个在线平台，它以游戏化的方式教授 Python 或 TypeScript。

该平台提供各种编程挑战和谜题，用户必须使用 Python 或 TypeScript（取决于你选择的语言）来解决。

用户还可以在该平台上与其他用户互动，这使得该平台成为在社交和协作环境中学习编程的绝佳途径。

CheckiO 上的挑战难度从基础到高级不等，因此既适合初学者，也适合经验丰富的程序员。

CheckiO 拥有趣味十足且引人入胜的界面，是学习 Python 和 TypeScript 的绝佳方式，同时还能享受学习的乐趣。

#6 - VIM 冒险

Vim Adventures是一款在线游戏，它提供了一种独特而有趣的方式来学习如何使用 Vim 文本编辑器。

游戏设定在一个奇幻世界，玩家必须使用 Vim 命令闯过各个关卡并解决谜题。

游戏从 Vim 的基础知识开始，随着关卡的推进，你将学习到更多高级功能和命令。

Vim Adventures 通过其直观的游戏玩法和沉浸式的世界，以一种有趣且引人入胜的方式教授 Vim 语言。

#7 - JS 机器人

JS Robot是一款旨在教你如何编写 JavaScript 代码的在线游戏。游戏设定在一个虚拟世界（类似于超级马里奥！），你需要编写程序控制机器人穿越迷宫并完成各种挑战。

你将编写 JavaScript 代码来控制机器人的运动，并引导它通过各个关卡来收集金币、避开障碍物，并到达每个阶段的终点旗。

该游戏还提供代码性能的实时反馈，这对于跟踪您的进度非常有帮助。

JS Robot 的互动式游戏玩法让学习 JavaScript 编程概念变得有趣而令人兴奋。

#8 -精通游戏

Mastery Games是一个在线平台，它提供了一种独特且引人入胜的编程技能学习方法。

该网站有三款游戏可供玩和学习：Grid Critters、Flexbox Zombies和服务工人。

前两节课将教你如何掌握 CSS Grid 和 Flexbox 的概念，而 Service Workers 将教你 Service Workers 的所有奥秘。

每款游戏都旨在通过练习和重复来促进熟练掌握，并且设计精美，画面生动有趣。

总而言之，Mastery Games 提供了一些非常独特且有趣的方式来提升你的编程技能。

#9 -编程幻想

告别枯燥乏味的编程视频、课程和文章，选择Coding Fantasy。

这个创新平台将传统的基于实践的编程学习方法与有趣且引人入胜的学习环境相结合，让学习过程如同玩游戏一般。

Coding Fantasy 的游戏涵盖了 HTML、CSS 和 JavaScript 的不同方面，提供了一种独特的学习体验，可以帮助所有技能水平的用户提高他们的编程技能。

此外，每隔一到两个月就会有新游戏发布，总有新的东西可以学习和探索。

Coding Fantasy 的使命是让学习编程更高效、更有趣，最重要的是，更有趣！

#10 -雅尔

Yare 将传统即时战略 (RTS) 游戏的刺激感与编写自己的代码的快感结合起来。

在这个游戏中，你拥有独特的机会，可以通过编写真正的代码来控制你的单位的行动，从而获得其他游戏中无法找到的自定义和控制水平。

不仅如此，你还可以使用 HTML/CSS/JS 创建自己的游戏用户界面，甚至可以探索语音控制​​机制的可能性。

有了 Yare，可能性无穷无尽，您可以尽情发挥创造力，打造极致的游戏体验。

#11 - WarriorJS

WarriorJS是一款激动人心的游戏，它将以前所未有的方式挑战你的 JavaScript 技能。

作为一名战士，你的任务是攀登一座高塔，到达顶层，在那里，传说中的 JavaScript 之剑正等着你。

然而，这段旅程绝非易事，你必须在每一层与敌人战斗、解救俘虏，并避开致命陷阱。但别担心，你将拥有强大的 JavaScript 功能，它将帮助你顺利穿越这座高塔。

无论你是编程新手还是经验丰富的 JavaScript 专家，WarriorJS 都是一款能够考验你技能的游戏。

总而言之，这 11 个网站提供了一种有趣且引人入胜的方式，通过玩游戏来学习编程。

通过这些游戏，你可以提升技能、练习编程概念，最重要的是，还能从中获得乐趣。

不妨去看看，说不定你会找到自己最喜欢的编程学习方式。

游戏开始！

来自你同样在不断成长的开发者同伴，

切尔洛克密码

💙如果你喜欢这篇文章……

我每周都会向一个不断壮大的开发者社区发布新闻简报，旨在提高编程技能、提升生产力，并在令人兴奋的科技、人工智能和 Web3 领域分享知识。

订阅即可将更多类似文章直接发送到您的邮箱。

让我们一起成长🌱

也欢迎关注我们的推特账号 🐦 @evergrowingdev