CSS 遊戲,邊玩邊學,包含 flex, grid 的遊戲

CSS Dinner

CSS Dinner 是一款關於 CSS 選擇器套用語法的遊戲。

要通過關卡你可能需要這一篇裡面的 CSS 知識:選擇器 class 與 id 以及階層關係

 

Flexbox Defense

Flexbox Defense 是一款關於 flex 的各種排列宣告遊戲。要用 CSS 來重新佈置砲塔的位置,佈置好後按Strt wave 就會有一些圈圈跑進來,砲塔會自動攻擊。
砲塔只有排在路徑的旁邊才會有作用。如果你沒耐心看那些圈圈慢慢跑,建議你玩下一個遊戲。
要通過關卡你可能需要這一篇的CSS知識:彈性排版 flex

 

FLEXBOX FROGGY

FLEXBOX FROGGY 跟上一個遊戲一樣是關於 flex 的排列,包含 justify-content, align-items, align-content, order, wrap 等等語法。
只要讓青蛙排列到荷葉上就可以了。

要通過關卡你可能需要這一篇的CSS知識:彈性排版 flex

 

GRID GARDEN

GRID GARDEN 是關於 grid 的CSS 語法遊戲,必須把水移到紅蘿蔔上面、把毒藥移到雜草上面。
內容需要用到 grid-template, grid-column-start, grid-row-start, fr, grid-auto-flow, order 等屬性。
如果對 grid 的語法還不是很熟,可以參考這一篇:格線 grid, 單位 fr