寓教于樂！11 個提升網(wǎng)頁設(shè)計和前端開發(fā)技能的趣味游戲

時間：2023-10-09 03:54:01 | 來源：網(wǎng)站運營

時間：2023-10-09 03:54:01 來源：網(wǎng)站運營

寓教于樂！11 個提升網(wǎng)頁設(shè)計和前端開發(fā)技能的趣味游戲：自學網(wǎng)頁設(shè)計與前端開發(fā)的途徑很多，有人喜歡觀看視頻課程學習，有人則習慣閱讀書籍和文章掌握相應(yīng)的知識點。當然，玩學習類趣味游戲也是測試與提升技能的有效途徑之一。

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

---

1.Can’t Unsee

這是一款考驗?zāi)銓徝?、洞察力的在線網(wǎng)頁游戲。你需要從兩個 iOS 界面中選出更正確或恰當?shù)脑O(shè)計，網(wǎng)站除了告訴你選項的對錯，還支持對比兩者之間的差異。 隨著游戲難度的增加，界面的差異會越來越小?？简?zāi)阊哿?iOS 界面敏感度的時候到了，速速來挑戰(zhàn)吧。

游戲地址：https://cantunsee.space/

2.Kern Type

掌握字符間距是印刷師和設(shè)計師必學的技能之一，Kern Type 是一款幫助你在線練習調(diào)整字符間距的游戲。你需要把字母移動到合適的位置，點擊「Compare」即可了解正確的字符間距，并得到相應(yīng)的分值。當你完成 10 個測試后，也會得到最終的測試總分。

游戲地址：https://type.method.ac/

3.Shape Type

對于設(shè)計師來說，提升西文字體造型能力，能幫助你更深刻的理解字體設(shè)計與排版。Shape Type 這款游戲基于鋼筆工具，你需要拖動滑竿使字體邊緣達到平滑與飽滿的狀態(tài)。在練習的過程中，你可以了解字體的起源，例如字體類型、字體設(shè)計師與年代等信息，還能夠通過繪制比較加深對字體筆畫、結(jié)構(gòu)的認知。

游戲地址：https://shape.method.ac

4.The Bezier Game

在使用 PS 的時候，不免會用到鋼筆工具。對于剛接觸 PS 的萌新朋友來說，如何快速掌握鋼筆工具的使用方式呢？不妨試試 The Bézier Game 這款游戲。

根據(jù)動畫演示，你需要利用鋼筆工具繪制圖形。當然如果你忘記了前面的步驟，系統(tǒng)會有相應(yīng)的提示。但隨著難度的增加，你就要結(jié)合之前學到的方法，獨立繪制更復雜的圖形了。

游戲地址：https://bezier.method.ac/

5.Color

準備好訓練你的色彩辨識和感知技巧了嗎？那么，快來試試在線交互游戲 Color 吧。在這款游戲中，你需要快速完成常見的配色測試，例如色調(diào)、飽和度、互補色、三色、四色等模式測試。分值越能達到「Perfect」，你的顏色感知能力也就越出眾哦。

游戲地址：https://color.method.ac/

6.Pixactly

Pixactly 是一個在線測試像素尺寸的網(wǎng)站，通過互動體驗幫助你直觀的了解像素的尺寸大小。你需要根據(jù)像素的寬、高提示來繪制畫框，并能及時得到反饋。通過 5 項測試，能夠提高你對像素尺寸的把控能力。

游戲地址：http://pixact.ly/

7.Hex Invaders

前端開發(fā)過程中，會接觸到各種類型的編碼，了解 Hex（十六進制）編碼是前端開發(fā)者需要掌握的知識之一。Hex Invaders 這款游戲則通過互動的方式，幫助你直觀的掌握 Hex 編碼。你需要根據(jù)頁面上方出現(xiàn)的 Hex 編碼，選擇正確的顏色來完成游戲。隨著難度的增加，關(guān)卡敵人會越來越多，挑戰(zhàn)也變得更加燒腦哦。

游戲地址：http://www.hexinvaders.com/

8.Flexbox Froggy

這是一款相當有趣的小青蛙跳荷葉游戲，你可以邊玩游戲邊學習 Flex 布局的相關(guān)知識。你需要使用justify-content屬性，幫助青蛙跳到荷葉上。隨后你需要按照游戲提示，完成其他屬性的學習。游戲共有 24 個關(guān)卡，將幫助你更直觀的掌握 Flex 布局。

游戲地址：https://flexboxfroggy.com/

9.Flexbox Defense

如果你想提升 Flexbox 技能熟練度，可以嘗試 Flexbox Defense 這款游戲。這是一款經(jīng)典的塔防游戲，你必須使用 CSS 定位塔樓的位置，并抵御敵人的進攻。如果你通關(guān)了 Flexbox Froggy，再嘗試下這款游戲，你的 Flex 布局技能勢必能更上一層樓。

游戲地址：http://www.flexboxdefense.com/

10.Grid Garden

還再利用枯燥的文檔學習網(wǎng)格布局嗎？不如嘗試下 Grid Garden 在線游戲。在這款游戲中，你需要利用網(wǎng)格布局的相應(yīng)屬性，完成胡蘿卜澆水的任務(wù)。游戲共 28 個關(guān)卡，你可以掌握網(wǎng)格布局屬性的全部用法，幫助你入門網(wǎng)格布局。

游戲地址：http://cssgridgarden.com

11.CSS Diner

如果你是前端萌新，正在學習 CSS 選擇器相關(guān)知識，那么這款游戲一定適合你。通過這款游戲，你可以學習到各種 CSS 選擇器的用法，例如 CSS 類選擇器、子元素選擇器、偽類選擇器等。挑戰(zhàn) 32 個關(guān)卡，幫助你更好的掌握 CSS 選擇器。

游戲地址：http://flukeout.github.io

最后

那么，問題來了，你最喜歡哪款游戲呢？歡迎在評論里留言，也歡迎補充更多寓教于樂的在線游戲。

---

感謝你的閱讀。若你有所收獲，歡迎點贊與分享。

注：

1. 本文版權(quán)歸原作者所有，僅用于學習與交流；
2. 如需轉(zhuǎn)載譯文，煩請按下方注明出處信息，謝謝！

英文原文：Web Design & Development Games to Test Your Skills
作者：Brenda Stokes Barron
譯者：IT程序獅
譯文地址：https://zhuanlan.zhihu.com/p/62687494

---

同時也歡迎關(guān)注我的微信【IT程序獅】，不定期分享 IT 學習文章與資源。

推薦文章