Flexbox Froggy青蛙遊戲全記錄(上)

flexbox froggy是一款免費的flexbox線上遊戲,非常推薦flex新手學習,共有24關。遊戲目標是讓青蛙們乖乖回家。

遊戲網址:https://flexboxfroggy.com

遊戲設定

下方有設定settings可做語系、難易度、色盲模式調整:

1. 支援多國語系,可以切換繁體中文噢

提示文字會全部變中文

2. 可切換難易模式,預設是beginner模式有詳盡的提示說明,intermediate就沒有提示說明,expert會是無說明+關卡順序隨機。

beginner模式提示很詳細,即使是沒接觸過flex的菜鳥,也可一步一步跟著提示走完成全部關卡呦。

3. 切換色盲模式,有需要的朋友可以開啓這個設定

4. 按下關卡可以直接快速跳轉到指定關卡

一切準備就緒就可以開始啦~!!

Level 1

青蛙的家在右邊,目標是把青蛙移到右邊。

第一關先從主軸線justify-content開始,提示區有寫到他後面可接5種屬性:flex-start/ flex-end/ center/ space-between/ space-around。

justify-content: flex-end; //主軸線靠右

Level 2

第二關的青蛙變兩隻了,他們的家在正中間,目標是讓青蛙們移動到中央。

justify-content: center; //主軸線置中

Level 3

青蛙變三隻了,他們很怕生喜歡保持安全範圍,目標是讓他們的間距與周圍保持相等的距離。

一樣都是平均分配,space-between與space-around的差別在於,前者會貼齊容器邊緣,後者比較像是在容器左右內縮的感覺。

justify-content: space-around; //主軸線等距

Level 4

這群青蛙們個性不和靠太近會打架要隔開,目標是讓他們的保持等距。為了方便記憶,我都會把between記成齊頭齊尾跟word裡面的文字排版一樣。

justify-content: space-between; //主軸線齊頭齊尾

Level 5

第五關來到了align-items交錯軸,青蛙們同心協力一口氣跳到最底(青蛙跳)。提示區塊說明可搭配5種屬性:flex-start/ flex-end/ center/ baseline/ stretch。

align-items: flex-end; //置底

Level 6

這隻青蛙想唱solo站c位(center),要讓他移動畫面正中央。

justify-content: center; //主軸線置中
align-items: center; //交錯軸置中

Level 7

這三隻蛙想一口氣跳到最下面,但他們怕生不敢太靠近,要跟周圍保持距離。

justify-content: space-around; //主軸線等距
align-items: flex-end; //交錯軸置底

Level 8

這三隻蛙排隊排錯方向了,要重新排隊囉~起始位置就會變成從右到左。

flex-direction: row-reverse; //水平反轉

Level 9

青蛙們發現水流方向改變,他們家變成直直一排了,讓他們趕緊跳過去吧。

flex-direction: column; //直排

Level 10

紅蛙跟綠蛙走錯棚跑錯家,順序要調換一下,因為反轉的關係,起始點改變會從左到右變成右到左,要使用flex-end修正(使用flex-start會變成靠右)。

flex-direction: row-reverse; //水平反轉
justify-content: flex-end; //主軸線置左

Level 11

讓青蛙們直行排隊並靠齊底部的角落,因為column的關係,交錯軸變成主軸線,所以使用的是justify-content屬性。

flex-direction: column; //直排
justify-content: flex-end; //主軸線置底

Level 12

這三隻蛙要排成直的且順序調換,但不能靠太近會打架呢~要保持等距。

flex-direction: column-reverse; //直排反轉
justify-content: space-between; //主軸線齊頭齊尾

還有下集 Level 13~24 喔 (´・ω・`)