CSS 小遊戲:Flexbox Froggy

不會 CSS Flexbox ? 那你一定要來玩。

Jane Lin
JL's note
5 min readFeb 7, 2019

--

Flexbox Froggy 遊戲畫面

這是前幾天透過 FB 的前端社團輾轉連結發現的小遊戲。總共有 24 個關卡,從 justify-content 開始,運用 CSS Flexbox 語法,想辦法將青蛙移到荷葉上,就可以過關了。

Flexbox Froggy:https://flexboxfroggy.com/

大部分的關卡都不難,基本上一個關卡可能會使用至少一組、至多四組(最後一關) CSS Flexbox 的屬性跟值來搭配應用。

這關需要兩組 Flexbox 語法才能破關
這關需要三組 Flexbox 語法才能破關

▎我看到英文就不想玩怎麼辦

在開始遊戲之前,我來分享一個我全部破關之後才發現的功能,就是原來這遊戲是可以切換語言的!(沒切換就順便練英文囉)

編輯區下方 settings 可切換語言

在遊戲畫面,編輯區下方有很多小字,最右邊有個 settings 可以將語言切換成繁體中文或者其它國家的語言。這樣即使是對於英文不熟悉的人,也能享受到遊戲跟學習的樂趣~

▎我沒學過 CSS Flexbox 怎麼辦

這個遊戲很棒的是,如果會 CSS,但沒學過 Flexbox 語法,透過遊戲關卡的說明,就能同時學習 Flexbox 的屬性有哪些、可以怎麼用、有什麼值、這些值又能達到什麼樣的效果。

介紹新的屬性
介紹新的屬性和值能達到的效果
介紹縮寫屬性 (看到一排被壓扁的青蛙覺得畫面有趣 XD)
說明 align-items 和 align-content 之間的差異
最後一關,綜合運用前面所學。如果忘記屬性怎麼用、有哪些值,將滑鼠移到屬性上會有提示。

破關所需要的程式碼,一定會是之前有提過的屬性跟值。如果前面沒提過,那這關他就會教你(笑)。只要照著上面 Flexbox 語法的說明跟提示去想,這一關青蛙跟荷葉的位置適用什麼屬性、什麼值能夠達到我們要的效果,然後將程式碼輸入在下面的編輯區白色區域。

如果成功,下方的按鈕顏色會變鮮豔,點擊可到下一關。要是失敗,那就再試試其他的值,看看差異在哪裡、為什麼答案不是我原本那一個。整個玩過一輪之後,相信對於 CSS Flexbox 至少會有基礎認識並能夠知道怎麼使用。

換句話說,不會 Flexbox 的人最適合玩這個遊戲!

如果是已經知道 Flexbox 語法的人,也能透過 settings 設定遊戲的難度進行挑戰。

最後附上破關畫面,為了寫這篇文章跟截取遊戲畫面,邊寫又邊玩了一次。

破關畫面,開心跳躍的青蛙們

學完這些 CSS Flexbox 屬性之後,自己用 codepen 簡單練習排版:

用 CSS Flexbox 屬性進行排版練習

▎小提醒

  1. 如果需要兩組或兩組以上語法才能破關,你發現你英文都打對,青蛙卻沒反應,可以檢查一下前面的程式碼結束時,是否忘記打分號 (;)。
  2. 最後一關打三組 Flexbox 語法也可以破關,不一定要湊滿四組。(這樣提示應該很明顯?)
  3. 如果真的想不到怎麼破關,網路上有別人分享,可以搜尋看看。(可以的話,還是自己想出來比較有成就感啦 XD)
  4. 作者還有個姊妹作 ─ CSS Grid Garden,大家也可以去玩玩喔。
CSS Grid Garden 遊戲畫面

▎延伸閱讀

點擊 LikeButton 可幫助作者得到回饋
透過街口支付小額支持作者

--

--

Jane Lin
JL's note

迷上網頁與程式,學到新東西都會開心好一陣子,想著要怎麼拿去改以前寫過的 code 。