寓教于樂!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

最后

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


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

注:

  1. 本文版權歸原作者所有,僅用于學習與交流;
  2. 如需轉載譯文,煩請按下方注明出處信息,謝謝!

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


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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,627評論 1 45
  • 膽小慎入 絕對真實 昨夜發生了一件離奇的事!整個世界都莫名其妙 所以有好多用常識無法解釋的事~ 然后又覺得很愧疚 ...
    新芽趙閱讀 560評論 0 1
  • 路走了36年,第一次認真回過頭去看看自己的過往,卻發現并不能看清楚,看不清過往,也看不清前路。 那就理一理我能夠記...
    沐沐_2557閱讀 182評論 0 1
  • 愛,可遇不可求的情感。既期待又害怕。美好而又詭異。可以讓你開心,也可以讓你痛徹心扉。沒有真正愛過的人,是不是不應該...
    f006b9bcd3b0閱讀 215評論 0 0
  • 導語:命運像一個個禮盒,你不知道你想要的東西究竟放在哪個盒子里,但你的努力能讓你打開更多的盒子。 —— 菜貓...
    菜菜的流浪貓閱讀 1,042評論 1 4