自学网页设计和前端开发的方法有很多，有的人喜欢看视频课程，有的人习惯通过阅读书籍和文章来掌握相应的知识点，当然，玩一些好玩的学习游戏也是测试和提高技能的有效方法。
今天我们分享11款有趣的在线游戏，通过游戏化的场景来提高你的网页设计和前端开发技能。既有趣又有教育意义。如果你正在学习相关知识，不妨尝试一下。
01. 无法忘记
这是一款考验你的审美和洞察力的在线网页游戏。你需要从两个 iOS 界面中选出更正确或更合适的设计。网站除了告诉你选项是对是错，还支持比较两者的差异。随着游戏难度的增加，界面的差异会越来越小。是时候考验你的眼力和 iOS 界面灵敏度了，快来挑战自己吧。
地址：
2. 字距类型
掌握字符间距是排版师和设计师必须学习的技能之一。Kern Type 是一款帮助你在线练习调整字符间距的游戏。你需要将字母移动到合适的位置，点击“比较”了解正确的字符间距，并获得相应的分数。当你完成 10 次测试时，你还将获得最终的测试分数。
地址：
3. 形状类型
对于设计师来说，提高西文字体塑造能力可以帮助你对字体设计和排版有更深入的理解。Shape Type 是一款基于钢笔工具的游戏，你需要拖动滑块让字体的边缘变得圆滑饱满。在练习过程中，你可以了解字体的起源，例如字体类型、字体设计师、时代等，还可以通过画图比较加深对字体笔触和结构的理解。
地址：
4.贝塞尔游戏
使用PS的时候，免不了会用到钢笔工具。对于刚接触PS的小伙伴来说，如何才能快速掌握钢笔工具的使用呢？不妨试试贝塞尔游戏这个游戏。
根据动画演示，你需要使用钢笔工具来绘制形状。当然，如果你忘记了前面的步骤，系统也会给你相应的提示。但随着难度的增加，你将需要结合之前学过的方法，独立绘制出更复杂的形状。
地址：
5. 颜色
你准备好训练你的色彩认知和感知能力了吗？那就来试试在线互动游戏《色彩》。游戏中，你需要快速完成常见的配色测试，如色相、饱和度、补色、三色、四色等模式测试。得分越高，你的色彩感知能力就越强。
地址：
6. Pixactly
Pixactly 是一个在线像素大小测试网站，通过交互式体验帮助你直观了解像素的大小。你需要根据像素宽高提示绘制边框并及时获得反馈。通过 5 个测试，你可以提高对像素大小的掌控能力。
地址：
7. 六角入侵者
在前端开发过程中，你会接触到各种类型的编码。了解 Hex 编码是前端开发人员需要掌握的知识之一。游戏 Hex Invaders 通过交互方式帮助你直观地掌握 Hex 编码。你需要根据页面顶部出现的 Hex 代码选择正确的颜色来完成游戏。随着难度的增加，关卡中的敌人会越来越多，挑战也会变得更加烧脑。
地址：
8. 弹性框青蛙
这是一款非常有趣的小青蛙跳荷叶游戏，在玩游戏的同时，还可以学习Flex布局，你需要使用justify-content属性帮助青蛙跳到荷叶上，然后根据游戏提示完成其他属性的学习。游戏一共有24个关卡，可以帮助你更直观的掌握Flex布局。
地址：
9. 弹性框防御
如果您想提高 Flexbox 技能，请尝试 Flexbox Defense。这是一款经典的塔防游戏，您必须使用 CSS 来定位塔并防御敌人的攻击。如果您打败了 Flexbox Froggy，那么请尝试这款游戏，您的 Flex 布局技能肯定会更上一层楼。
地址：
10. 网格花园
还在用枯燥的文档学习网格布局吗？为什么不试试 Grid Garden 在线游戏呢？在这个游戏中，您需要使用网格布局的相应属性来完成浇灌胡萝卜的任务。游戏共有 28 个关卡。您可以掌握网格布局属性的所有用法，帮助您入门网格布局。
地址：
11.CSS餐厅
如果你是前端新手，正在学习 CSS 选择器，那么这款游戏绝对适合你。通过这款游戏，你可以学习各种 CSS 选择器的用法，例如 CSS 类选择器、子元素选择器、伪类选择器等。挑战 32 个关卡，帮助你更好地掌握 CSS 选择器。
地址：
唐人“诺亚方舟”项目全面启动
新型冠状病毒感染的肺炎疫情导致线下校园停课，学生们不敢出门，就业实习无法开展，家长和学生都心急如焚，只能宅在家里……
在此关键时刻，唐人设计学院推出“诺亚方舟”计划——我们为在职场人士、大学生、失业朋友等提供长达2个月的免费线上VIP直播课程；为所有想学设计的朋友提供优质免费UI设计、室内设计、平面设计等课程及配套实战、讲解服务。请用QQ号扫描下方二维码，登录唐人“诺亚方舟”，修炼内心的力量，利用好疫情期间的个人提升时间！
武汉加油！
