CSSのFlexboxを学習しながら
タワーディフェンスゲームを楽しめる
面白いWebサービス。分かりづらい配置を
楽しみながら学習が可能です。
目次
リンク先
遊び方
画面左側がコーディングスペースとなります。
画面右側がタワーディフェンスのゲーム画面となります。砲台みたいなものが2つ設置されています。
この砲台は白いBOX内に上手く配置して、道の上からやってくる敵を倒すように
上手く配置してあげます。
「justify-content」プロパティを使って真ん中に配置するように「justify-content:center;」と
入力すると砲台が真ん中に移動します。
Webシーンでよく使うセンタリングですね。
無事に全ての敵を倒すことが出来たら、100ポイントもらえます。
次は3つのBOXがあるのでそれぞれのBOX内で配置していきます。
道に沿って上手く配置すると敵を撃退できます。
space-betweenなど少しずつ複雑になってきますが、
実際にWeb制作場面ではよく使うので、学習に繋がっていると思います。
Wave、ステージが進むと今度はBox内で上下の配置も出てきます。
今までFloatを使っていた人も、柔軟に配置できるFlexboxの学習に、ぜひ
このWebサービスで学習してみてはいかがでしょうか。
コメント