CSS 小遊戲：Flexbox Froggy
這是前幾天透過 FB 的前端社團輾轉連結發現的小遊戲。總共有 24 個關卡，從 justify-content 開始，運用 CSS Flexbox 語法，想辦法將青蛙移到荷葉上，就可以過關了。
Flexbox Froggy：https://flexboxfroggy.com/
大部分的關卡都不難，基本上一個關卡可能會使用至少一組、至多四組(最後一關) CSS Flexbox 的屬性跟值來搭配應用。
▎我看到英文就不想玩怎麼辦
在開始遊戲之前，我來分享一個我全部破關之後才發現的功能，就是原來這遊戲是可以切換語言的！(沒切換就順便練英文囉)
在遊戲畫面，編輯區下方有很多小字，最右邊有個 settings 可以將語言切換成繁體中文或者其它國家的語言。這樣即使是對於英文不熟悉的人，也能享受到遊戲跟學習的樂趣~
▎我沒學過 CSS Flexbox 怎麼辦
這個遊戲很棒的是，如果會 CSS，但沒學過 Flexbox 語法，透過遊戲關卡的說明，就能同時學習 Flexbox 的屬性有哪些、可以怎麼用、有什麼值、這些值又能達到什麼樣的效果。
破關所需要的程式碼，一定會是之前有提過的屬性跟值。如果前面沒提過，那這關他就會教你(笑)。只要照著上面 Flexbox 語法的說明跟提示去想，這一關青蛙跟荷葉的位置適用什麼屬性、什麼值能夠達到我們要的效果，然後將程式碼輸入在下面的編輯區白色區域。
如果成功，下方的按鈕顏色會變鮮豔，點擊可到下一關。要是失敗，那就再試試其他的值，看看差異在哪裡、為什麼答案不是我原本那一個。整個玩過一輪之後，相信對於 CSS Flexbox 至少會有基礎認識並能夠知道怎麼使用。
換句話說，不會 Flexbox 的人最適合玩這個遊戲！
如果是已經知道 Flexbox 語法的人，也能透過 settings 設定遊戲的難度進行挑戰。
最後附上破關畫面，為了寫這篇文章跟截取遊戲畫面，邊寫又邊玩了一次。
學完這些 CSS Flexbox 屬性之後，自己用 codepen 簡單練習排版：
▎小提醒
- 如果需要兩組或兩組以上語法才能破關，你發現你英文都打對，青蛙卻沒反應，可以檢查一下前面的程式碼結束時，是否忘記打分號 (;)。
- 最後一關打三組 Flexbox 語法也可以破關，不一定要湊滿四組。(這樣提示應該很明顯？)
- 如果真的想不到怎麼破關，網路上有別人分享，可以搜尋看看。(可以的話，還是自己想出來比較有成就感啦 XD)
- 作者還有個姊妹作 ─ CSS Grid Garden，大家也可以去玩玩喔。
▎延伸閱讀
- CSS 小遊戲：Flex Pirate
- 深入解析 CSS Flexbox | oxxo.studio
- A Complete Guide to Flexbox | css-tricks
如果想看更多文章，點擊以下連結可以看到我的文章清單：
* 所有文章清單如果您喜歡這篇文章，或覺得這篇文章有幫到您，想給我一些支持，可以這麼做：
1. 登入 Liker 點擊下方 LikeButton 免費按讚(按5下)，或直接打賞 LikeCoin
2. 透過街口支付請我喝杯咖啡！
3. 拍拍手(1~50下) 給我一些鼓勵。
