11 个提升网页设计和前端开发技能的趣味游戏，附源码地址

对于设计师来说，提升西文字体造型能力，能帮助你更深刻的理解字体设计与排版。Shape Type 这款游戏基于钢笔工具，你需要拖动滑竿使字体边缘达到平滑与饱满的状态。在练习的过程中，你可以了解字体的起源，例如字体类型、字体设计师与年代等信息，还能够通过绘制比较加深对字体笔画、结构的认知。

网页设计有没有好玩的游戏

掌握字符间距是印刷师和设计师必学的技能之一，Kern Type 是一款帮助你在线练习调整字符间距的游戏。你需要把字母移动到合适的位置，点击「Compare」即可了解正确的字符间距，并得到相应的分值。当你完成 10 个测试后，也会得到最终的测试总分。

这是一款考验你审美、洞察力的在线网页游戏。你需要从两个 iOS 界面中选出更正确或恰当的设计，网站除了告诉你选项的对错，还支持对比两者之间的差异。 随着游戏难度的增加三国游戏单机火凤凰下载，界面的差异会越来越小。考验你眼力和 iOS 界面敏感度的时候到了，速速来挑战吧。

给大家推荐五个好玩又有趣的在线设计小游戏

Color 这个工具主要是让用户匹配对应颜色，有色调、饱和度、互补色、三色、四色等常见的配色测试，越后面的关卡难度越高，如果能达到「Perfect」表示匹配完美哦！通过这个游戏，可以锻炼你在短时间内对颜色的感知能力。

与钢笔游戏不同的是，在这个游戏中，你只需要拖动杠杆来使字母边缘变得圆润饱满。调整完成后，游戏会判断匹配度给出分数，并且每个字体右边会出现该字体的名字、设计师以及发布年份。通过这个游戏，可以锻炼你的西文字体造型能力，并熟悉字体笔画的转折结构。

Loxapp 是一款测试色感的小游戏，你需要在 60 秒内，从相似的色块中找出颜色不同的一个，越往后色块的差别会越小，需要的识别时间就越长，会一直到你看不出到底哪一个方块是颜色不同的，非常具有挑战性。

Supremo 是一款通过视觉判断中心点的小游戏，设计师如果想锻炼自己的眼力，可以来试一试。Supremo 会生成 10 款带小黑点的随机图形，只需通过选择代表 “是 “的笑脸表情符号或代表 “否 “的粑粑符号，来猜测小黑点是否在每个形状的中心。猜出正确的答案就能得到一分，从而进入下一关。错了一个问题，它会给你扔一坨粑粑。是不是燃起了挑战的欲望！

Bezier 是一款帮助设计师掌握钢笔工具的小游戏，设计师需要根据指定的形状轮廓，绘制出对应的形状曲线，在这个过程中就能逐渐提升对曲线锚点角度的控制能力并熟悉一些快捷键。绘制结束后，你可以看到自己绘制的锚点数量以及标准绘制需要的锚点数量，如果数量不一致，网站会提示你再试一次或者跳到下一个。

Color 是一个测试对颜色感知能力的小游戏，通过颜色搭配来提升自己对配色的敏感度。网站有 5 种模式：色调、饱和度、互补色、三色、四色，越到后面越难。设计师要根据它给出的颜色找到相对应的颜色，全部通关的话，就说明你有很好的色感！操作方法十分的简单，你只需要拉动鼠标在规定时间内选出正确的颜色即可得分，十分考验眼力！怎么样，要来接受挑战吗！

除此之外，Kern Type 能展示字体笔画的轮廓细节，并提供字体名称、设计者和设计年代的相关信息，对我们拓展西文字体的知识也有帮助。

Kern Type 是一款调整文字间距的小游戏，可以提升设计师对文字排版的敏感度。网站会给出一组间距混乱的词语，设计师根据自己的视觉将字母调整为均衡的间距，完成后点击 Done 可以查看自己的调整是否到位并获得相应的评分，还是非常有意思的。

30 个纯 HTML5 实现的游戏

浏览器和 JavaScript 的功能逐年不断的变强变大。曾几何时，任何类型的游戏都需要Flash。但随着 HTML5 发展，HTML5 + WebGL 游戏式就慢慢占领着这个舞台。以下是30款流行的游戏，它们可以在所有现代浏览器中运行，并且只使用web技术构建。

Color Claim是一个非常好用的懒人配色网站，120种双色的搭配方式，直接拿过来就能用，不知道怎么配色的时候，照着这个网站来看，绝对没有错！

这个游戏用过关的方式来帮助新手设计师们学习钢笔工具的使用方法，从简单的直角线到复杂的贝塞尔曲线，你只要跟着它的路径调整位置就可以画出一条完美的闭合路径。

基于HTML5打造的一款别踩白板小游戏

这 15 款编程游戏，你玩过吗？

Human Resource Machine 是一款非常有意思的移动端游戏。这款游戏由粘粘世界（World of Goo）的设计者和制作小小炼狱（Little Inferno）的团队共同制作，游戏虽是走解谜路线，但玩法相当新颖：玩家将扮演一个从基层做起的员工，需要通过指令代码来编写一条条程序世界战争英雄下载游戏盒子，完成每个阶段的任务，最终走上职场巅峰。

Code Hunt 是一个由Microsoft Research开发的 HTML5 科幻主题游戏。在这个游戏中，你扮演一个代码猎人，负责修复代码，并使它它返回预期的结果。Code Hunt支持 Java 和 C# 两种语言。你可以学习到包括算法、循环和条件表达式等编程概念。

html实现神墓逃亡小游戏（自适应）

寓教于乐！11 个提升网页设计和前端开发技能的趣味游戏

如果你想提升 Flexbox 技能熟练度，可以尝试 Flexbox Defense 这款游戏。这是一款经典的塔防游戏，你必须使用 CSS 定位塔楼的位置，并抵御敌人的进攻。如果你通关了 Flexbox Froggy，再尝试下这款游戏，你的 Flex 布局技能势必能更上一层楼。

前端开发过程中，会接触到各种类型的编码，了解 Hex（十六进制）编码是前端开发者需要掌握的知识之一。Hex Invaders 这款游戏则通过互动的方式，帮助你直观的掌握 Hex 编码。你需要根据页面上方出现的 Hex 编码，选择正确的颜色来完成游戏。随着难度的增加，关卡敌人会越来越多，挑战也变得更加烧脑哦。

准备好训练你的色彩辨识和感知技巧了吗？那么，快来试试在线交互游戏 Color 吧。在这款游戏中，你需要快速完成常见的配色测试，例如色调、饱和度、互补色、三色、四色等模式测试。分值越能达到「Perfect」，你的颜色感知能力也就越出众哦。