웹 디자인 및 프런트 엔드 개발을 학습 많은 방법이, 어떤 사람들은 책과 기사를 읽는 데 사용 어떤 사람들은 적절한 지식 포인트를 획득, 비디오 과정을 시청하는 것을 선호합니다. 물론, 재미를 학습 재생 같은 게임도 테스트 할 수있는 효과적인 방법이며, 자신의 능력을 업그레이드 할 수 있습니다.
오늘 우리는 11 재미있는 온라인 게임을 공유 장면의 게임을 통해 웹 디자인 및 프런트 엔드 개발 능력을 향상하게 될 것입니다. 재미, 오락. 당신이 지식을 학습하는 경우, 오보십시오.
01, 수 없습니다 Unsee
이것은 당신의 미적, 통찰력있는 온라인 웹 게임의 테스트입니다. 또한 둘 사이의 명암 차이를 지원 사이트에 추가로 당신에게 옳고 그름 옵션을 말해, 두 아이폰 OS 인터페이스에서 더 정확한 또는 적절한 디자인을 선택해야합니다. 게임의 난이도가 증가함에 따라, 인터페이스 차이는 점점 작아집니다. IOS 인터페이스 시험 시간에 시력과 감도는, 그것을 도전 빨리 온다.
주소 : HTTPS : //cantunsee.space/
2, 컨 유형
문자 간격은 마스터 인쇄 및 배울 디자이너 기술 중 하나가, 컨 유형은 당신이 게임의 문자 간격을 조정 지원에 대한 온라인 교육입니다. 당신은 적절한 위치에 문자를 이동 "비교"이해하는 올바른 문자 간격 및 해당 점수를 클릭해야합니다. 당신이 10 개 테스트를 완료하면, 우리는 마지막 시험 점수를 얻을 것이다.
주소 : HTTPS : //type.method.ac/
3, 모양 유형
디자이너를 들어, 라틴 글꼴 스타일을 향상 할 수있는 기능, 당신은 더 깊은 타이포그래피와 레이아웃의 이해를 도울 수있다. 펜 도구를 기반으로 형상 유형 게임, 당신은 부드럽고 전체 상태를 달성하기 위해 글꼴의 가장자리를 만들 수있는 슬라이더를 드래그해야합니다. 실천의 과정에서, 당신은 구조를 그림으로써, 뇌졸중 글꼴에 대한 인식을 심화 비교 또한 정보 글꼴 유형, 글꼴 디자이너와 수십 년 같은 글꼴의 기원에 대해 배울 수 있습니다.
주소 : HTTPS : //shape.method.ac
4, 베 지어 게임
PS를 사용하는 경우, 필연적으로 그것은 펜 도구를 사용합니다. PS 사랑스러운 새로운 친구를 처음 들어 펜 도구를 사용하는 방법?를 잡고 베 지어 게임 게임을 시도합니다.
根据动画演示，你需要利用钢笔工具绘制图形。当然如果你忘记了前面的步骤，系统会有相应的提示。但随着难度的增加，你就要结合之前学到的方法，独立绘制更复杂的图形了。
地址：https://bezier.method.ac/
5、Color
准备好训练你的色彩辨识和感知技巧了吗?那么，快来试试在线交互游戏 Color 吧。在这款游戏中，你需要快速完成常见的配色测试，例如色调、饱和度、互补色、三色、四色等模式测试。分值越能达到「Perfect」，你的颜色感知能力也就越出众哦。
地址：https://color.method.ac/
6、Pixactly
Pixactly 是一个在线测试像素尺寸的网站，通过互动体验帮助你直观的了解像素的尺寸大小。你需要根据像素的宽、高提示来绘制画框，并能及时得到反馈。通过 5 项测试，能够提高你对像素尺寸的把控能力。
地址：http://pixact.ly/
7、Hex Invaders
前端开发过程中，会接触到各种类型的编码，了解 Hex(十六进制)编码是前端开发者需要掌握的知识之一。Hex Invaders 这款游戏则通过互动的方式，帮助你直观的掌握 Hex 编码。你需要根据页面上方出现的 Hex 编码，选择正确的颜色来完成游戏。随着难度的增加，关卡敌人会越来越多，挑战也变得更加烧脑哦。
地址：http://www.hexinvaders.com/
8、Flexbox Froggy
这是一款相当有趣的小青蛙跳荷叶游戏，你可以边玩游戏边学习 Flex 布局的相关知识。你需要使用justify-content属性，帮助青蛙跳到荷叶上。随后你需要按照游戏提示，完成其他属性的学习。游戏共有 24 个关卡，将帮助你更直观的掌握 Flex 布局。
地址：https://flexboxfroggy.com/
9、Flexbox Defense
如果你想提升 Flexbox 技能熟练度，可以尝试 Flexbox Defense 这款游戏。这是一款经典的塔防游戏，你必须使用 CSS 定位塔楼的位置，并抵御敌人的进攻。如果你通关了 Flexbox Froggy，再尝试下这款游戏，你的 Flex 布局技能势必能更上一层楼。
地址：http://www.flexboxdefense.com/
10、Grid Garden
还再利用枯燥的文档学习网格布局吗?不如尝试下 Grid Garden 在线游戏。在这款游戏中，你需要利用网格布局的相应属性，完成胡萝卜浇水的任务。游戏共 28 个关卡，你可以掌握网格布局属性的全部用法，帮助你入门网格布局。
地址：http://cssgridgarden.com
11、CSS Diner
如果你是前端萌新，正在学习 CSS 选择器相关知识，那么这款游戏一定适合你。通过这款游戏，你可以学习到各种 CSS 选择器的用法，例如 CSS 类选择器、子元素选择器、伪类选择器等。挑战 32 个关卡，帮助你更好的掌握 CSS 选择器。
地址：http://flukeout.github.io
