11 個提升網頁設計和前端開發技能的趣味游戲，附源碼地址

作者：唐人設計學校 2020-02-12 14:03:29

自學網頁設計與前端開發的途徑很多，有人喜歡觀看視頻課程學習，有人則習慣閱讀書籍和文章掌握相應的知識點。當然，玩學習類趣味游戲也是測試與提升技能的有效途徑之一。

今天我們將分享 11 個有趣的在線小游戲，通過游戲化場景提升你的網頁設計與前端開發技能。寓教于樂，其樂無窮。如果你正在學習相關知識，不妨試試哦。

01、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