自學網頁設計與前端開發的途徑很多，有人喜歡觀看視頻課程學習，有人則習慣閱讀書籍和文章掌握相應的知識點。當然，玩學習類趣味游戲也是測試與提升技能的有效途徑之一。
今天我們將分享 11 個有趣的在線小游戲，通過游戲化場景提升你的網頁設計與前端開發技能。寓教于樂，其樂無窮。如果你正在學習相關知識，不妨試試哦。
1.Can’t Unsee
這是一款考驗你審美、洞察力的在線網頁游戲。你需要從兩個 iOS 界面中選出更正確或恰當的設計，網站除了告訴你選項的對錯，還支持對比兩者之間的差異。 隨著游戲難度的增加，界面的差異會越來越小?？简災阊哿?iOS 界面敏感度的時候到了，速速來挑戰吧。
2.Kern Type
掌握字符間距是印刷師和設計師必學的技能之一，Kern Type 是一款幫助你在線練習調整字符間距的游戲。你需要把字母移動到合適的位置，點擊「Compare」即可了解正確的字符間距，并得到相應的分值。當你完成 10 個測試后，也會得到最終的測試總分。
3.Shape Type
對于設計師來說，提升西文字體造型能力，能幫助你更深刻的理解字體設計與排版。Shape Type 這款游戲基于鋼筆工具，你需要拖動滑竿使字體邊緣達到平滑與飽滿的狀態。在練習的過程中，你可以了解字體的起源，例如字體類型、字體設計師與年代等信息，還能夠通過繪制比較加深對字體筆畫、結構的認知。
4.The Bezier Game
在使用 PS 的時候，不免會用到鋼筆工具。對于剛接觸 PS 的萌新朋友來說，如何快速掌握鋼筆工具的使用方式呢？不妨試試 The Bézier Game 這款游戲。
根據動畫演示，你需要利用鋼筆工具繪制圖形。當然如果你忘記了前面的步驟，系統會有相應的提示。但隨著難度的增加，你就要結合之前學到的方法，獨立繪制更復雜的圖形了。
5.Color
準備好訓練你的色彩辨識和感知技巧了嗎？那么，快來試試在線交互游戲 Color 吧。在這款游戲中，你需要快速完成常見的配色測試，例如色調、飽和度、互補色、三色、四色等模式測試。分值越能達到「Perfect」，你的顏色感知能力也就越出眾哦。
6.Pixactly
Pixactly 是一個在線測試像素尺寸的網站，通過互動體驗幫助你直觀的了解像素的尺寸大小。你需要根據像素的寬、高提示來繪制畫框，并能及時得到反饋。通過 5 項測試，能夠提高你對像素尺寸的把控能力。
游戲地址：http://pixact.ly/
7.Hex Invaders
前端開發過程中，會接觸到各種類型的編碼，了解 Hex（十六進制）編碼是前端開發者需要掌握的知識之一。Hex Invaders 這款游戲則通過互動的方式，幫助你直觀的掌握 Hex 編碼。你需要根據頁面上方出現的 Hex 編碼，選擇正確的顏色來完成游戲。隨著難度的增加，關卡敵人會越來越多，挑戰也變得更加燒腦哦。
8.Flexbox Froggy
這是一款相當有趣的小青蛙跳荷葉游戲，你可以邊玩游戲邊學習 Flex 布局的相關知識。你需要使用justify-content屬性，幫助青蛙跳到荷葉上。隨后你需要按照游戲提示，完成其他屬性的學習。游戲共有 24 個關卡，將幫助你更直觀的掌握 Flex 布局。
9.Flexbox Defense
如果你想提升 Flexbox 技能熟練度，可以嘗試 Flexbox Defense 這款游戲。這是一款經典的塔防游戲，你必須使用 CSS 定位塔樓的位置，并抵御敵人的進攻。如果你通關了 Flexbox Froggy，再嘗試下這款游戲，你的 Flex 布局技能勢必能更上一層樓。
10.Grid Garden
還再利用枯燥的文檔學習網格布局嗎？不如嘗試下 Grid Garden 在線游戲。在這款游戲中，你需要利用網格布局的相應屬性，完成胡蘿卜澆水的任務。游戲共 28 個關卡，你可以掌握網格布局屬性的全部用法，幫助你入門網格布局。
11.CSS Diner
如果你是前端萌新，正在學習 CSS 選擇器相關知識，那么這款游戲一定適合你。通過這款游戲，你可以學習到各種 CSS 選擇器的用法，例如 CSS 類選擇器、子元素選擇器、偽類選擇器等。挑戰 32 個關卡，幫助你更好的掌握 CSS 選擇器。
最后
那么，問題來了，你最喜歡哪款游戲呢？歡迎在評論里留言，也歡迎補充更多寓教于樂的在線游戲。
感謝你的閱讀。若你有所收獲，歡迎點贊與分享。
注：
- 本文版權歸原作者所有，僅用于學習與交流；
- 如需轉載譯文，煩請按下方注明出處信息，謝謝！
英文原文：Web Design & Development Games to Test Your Skills
作者：Brenda Stokes Barron
譯者：IT程序獅
譯文地址：https://zhuanlan.zhihu.com/p/62687494
同時也歡迎關注我的微信【IT程序獅】，不定期分享 IT 學習文章與資源。
