ゲームを通じて技術を学ぶのは興味深い手法です。体験する人も楽しみながらプログラミングが学べます。書籍やオンライン情報を元に自分だけで学んでいくのは困難ですが、ゲームで対話を楽しみながらできれば継続できそうです。 今回紹介するFlexbox DefenseはCSS3のFlexboxをタワーディフェンスゲームをベースに学ぶソフトウェアです。

Flexbox Defenseの使い方

一番最初の問題。左側にスタイルシートの設定を記述します。

できあがったらゲーム開始です。正しく書けていればクリアできるはず。

クリアしました。

さらにこんなステージも。

Flexbox DefenseはCSSのFlexboxに関する記述をすることで大砲の位置を調整します。そしてゲームを開始すると敵キャラが進んできますので、大砲から発射してやっつけていきます。通常のタワーディフェンスゲームとは異なり戦略性はありませんが、その代わりにCSSに関する知識が手に入ります。

Flexbox DefenseはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Flexbox Defense channingallen/tower-defense: Tower Defense with a twist: all towers must be positioned with CSS Flexbox.