寓教於樂！11 個提升網頁設計和前端開發技能的趣味遊戲
自學網頁設計與前端開發的途徑很多，有人喜歡觀看視訊課程學習，有人則習慣閱讀書籍和文章掌握相應的知識點。當然，玩學習類趣味遊戲也是測試與提升技能的有效途徑之一。
今天我們將分享 11 個有趣的線上小遊戲，通過遊戲化場景提升你的網頁設計與前端開發技能。寓教於樂，其樂無窮。如果你正在學習相關知識，不妨試試哦。
1.Can’t Unsee
這是一款考驗你審美、洞察力的線上網頁遊戲。你需要從兩個 iOS 介面中選出更正確或恰當的設計，網站除了告訴你選項的對錯，還支援對比兩者之間的差異。 隨著遊戲難度的增加，介面的差異會越來越小。考驗你眼力和 iOS 介面敏感度的時候到了，速速來挑戰吧。
遊戲地址： https://cantunsee.space/
2.Kern Type
掌握字元間距是印刷師和設計師必學的技能之一，Kern Type 是一款幫助你線上練習調整字元間距的遊戲。你需要把字母移動到合適的位置，點選「Compare」即可瞭解正確的字元間距，並得到相應的分值。當你完成 10 個測試後，也會得到最終的測試總分。
遊戲地址： https://type.method.ac/
3.Shape Type
對於設計師來說，提升西文字型造型能力，能幫助你更深刻的理解字型設計與排版。Shape Type 這款遊戲基於鋼筆工具，你需要拖動滑竿使字型邊緣達到平滑與飽滿的狀態。在練習的過程中，你可以瞭解字型的起源，例如字型型別、字型設計師與年代等資訊，還能夠通過繪製比較加深對字型筆畫、結構的認知。
遊戲地址： https://shape.method.ac
4.The Bezier Game
在使用 PS 的時候，不免會用到鋼筆工具。對於剛接觸 PS 的萌新朋友來說，如何快速掌握鋼筆工具的使用方式呢？不妨試試 The Bézier Game 這款遊戲。
根據動畫演示，你需要利用鋼筆工具繪製圖形。當然如果你忘記了前面的步驟，系統會有相應的提示。但隨著難度的增加，你就要結合之前學到的方法，獨立繪製更復雜的圖形了。
遊戲地址： 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
最後
那麼，問題來了，你最喜歡哪款遊戲呢？歡迎在評論裡留言，也歡迎補充更多寓教於樂的線上遊戲。
感謝你的閱讀。若你有所收穫，歡迎點贊與分享。
注：
- 本文版權歸原作者所有，僅用於學習與交流；
- 如需轉載譯文，煩請按下方註明出處資訊，謝謝！
英文原文： Web Design & Development Games to Test Your Skills
作者：Brenda Stokes Barron
譯者：IT程式獅
譯文地址： https://zhuanlan.zhihu.com/p/62687494
同時也歡迎關注我的微信 【IT程式獅】 ，不定期分享 IT 學習文章與資源。