タワーディフェンスを攻略しながらCSSのFlexboxを習得できるWebサービス 『FLEXBOX DEFENSE』

CSSのFlexboxを学習しながら
タワーディフェンスゲームを楽しめる
面白いWebサービス。分かりづらい配置を
楽しみながら学習が可能です。

リンク先

FLEXBOX DEFENSE リンク先はこちらから

遊び方

画面左側がコーディングスペースとなります。
画面右側がタワーディフェンスのゲーム画面となります。砲台みたいなものが２つ設置されています。
この砲台は白いBOX内に上手く配置して、道の上からやってくる敵を倒すように
上手く配置してあげます。

「justify-content」プロパティを使って真ん中に配置するように「justify-content:center;」と
入力すると砲台が真ん中に移動します。
Webシーンでよく使うセンタリングですね。

無事に全ての敵を倒すことが出来たら、１００ポイントもらえます。

次は３つのBOXがあるのでそれぞれのBOX内で配置していきます。
道に沿って上手く配置すると敵を撃退できます。

space-betweenなど少しずつ複雑になってきますが、
実際にWeb制作場面ではよく使うので、学習に繋がっていると思います。

Wave、ステージが進むと今度はBox内で上下の配置も出てきます。
今までFloatを使っていた人も、柔軟に配置できるFlexboxの学習に、ぜひ
このWebサービスで学習してみてはいかがでしょうか。