【好站分享】「Flexbox Froggy」學習 Flexbox 的遊戲網站

最近飛肯小編發現了一個不錯的遊戲網站 – 「 Flexbox Froggy 」,所以來跟大家分享一下~
遊戲的主旨很簡單,就是利用輸入正確 Flexbox 語法指令, 來幫助畫面中的青蛙們回到荷葉上;很重要的一點是:有繁體中文版耶~ ^_^ (當然,語法指令還是需要用英文輸入的啦~)

如果同學們跟飛肯小編一樣,會寫基本的 CSS2 語法,又想要認識一下 Flexbox 這個 CSS3 新語法的排版方式,建議可以先從這個遊戲網站開始邁出第一步囉~
藉由遊戲的過程,除了可建立 Flexbox 所需要的邏輯觀念,同時也可以習得 Flexbox 排版中幾個重要的語法指令,輕鬆玩遊戲之餘又可以動動腦,
像飛肯小編這種初心者都可以靠著每個關卡所給的提示,最後成功破解了每個關卡,所以各位也不用擔心會太難~

底下就帶大家瀏覽一下網站架構,文章會包含部分關卡的破解版遊戲畫面,如果不想要被雷到的同學請記得繞道喔~ XD


【一】「 Flexbox Froggy 」網站介紹

網站的首頁,也是直接進入第一級關卡的遊戲畫面:

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】「Flexbox Froggy」學習 Flexbox 的遊戲網站 - 01-1

【二】遊戲關卡的文字說明

網頁的左半邊為目前遊戲關卡的文字說明,相當的淺顯易懂;
當滑鼠點至有反白效果的指令處,也會立刻出現提示對話框:

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】「Flexbox Froggy」學習 Flexbox 的遊戲網站 - 02-1

【三】輸入正確的 Flexbox 語法

只要根據提示,在下方空白欄位輸入正確的 Flexbox 語法,網頁右半邊的青蛙就會即時互動,完成關卡要求,按下「繼續」後就可以前進下一關了。

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】「Flexbox Froggy」學習 Flexbox 的遊戲網站 - 03-1

這是第2關的遊戲畫面:

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】「Flexbox Froggy」學習 Flexbox 的遊戲網站 - 04-1

【四】關卡等級

點開上方關卡等級處,這裡有方便大家跳關或者重置遊戲紀錄的功能,
細節請參考下方的圖示:

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】「Flexbox Froggy」學習 Flexbox 的遊戲網站 - 05-1

不解的是,第10關的介面不知為何,會跳成英文版?!
而且這一關有一個小陷阱,大家記得看清楚提示才能順利破關喔~
(提醒:下方圖示有雷!)

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】「Flexbox Froggy」學習 Flexbox 的遊戲網站 - 06-1

【五】注意關卡的重點備註

基本上,每關需注意的重點都會特別備註,大家只要照著指示打出語法,就沒那麼困難了~
(提醒:下方圖示有雷!)

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】「Flexbox Froggy」學習 Flexbox 的遊戲網站 - 07-1

第14關解答很簡單,但腦筋有時轉不過來就會卡住….
(提醒:下方圖示有雷!)

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】「Flexbox Froggy」學習 Flexbox 的遊戲網站 - 08-1

【六】魔王關卡

如果順利來到最後一關,就準備面對大魔王啦!

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】「Flexbox Froggy」學習 Flexbox 的遊戲網站 - 09-1

最後一關的正解如下,大家有順利答出正確語法嗎?
(提醒:下方圖示有雷!)

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】「Flexbox Froggy」學習 Flexbox 的遊戲網站 - 10-1

最後提供一張小編破關的畫面,哈!
假如想再玩一遍,只要按下「重置」按鈕就可以刪除破關紀錄了~
希望大家都可以藉由這個遊戲,輕鬆建立 Flexbox 相關語法的基本認識! ^_^

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】「Flexbox Froggy」學習 Flexbox 的遊戲網站 - 11-1

 

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

posted in CSS 教學 - 網頁排版, Free Resource 好康報報, Good Design 好站報報 and tagged , , , .

留言功能已關閉。