Canvas APIでタワーディフェンスを作ってみた
ライブラリなし、Canvas APIだけで挑む
数字パズルの次は、より動きのある「タワーディフェンス」に挑戦しました。今回はReactなどのフレームワークをあえて使わず、HTML5 Canvas API と Vanilla TypeScript だけで一から構築しています。
こだわったポイント
1. 「◯△▢」の幾何学的なデザイン
絵心や権利関係を気にせず作れるよう、敵は「赤い円」、タワーは「青い四角」といったシンプルな図形だけで構成しました。背景にグリッドを敷き、発光エフェクト（shadowBlur）を加えることで、ネオン風のサイバーな雰囲気に仕上げています。
2. オブジェクト指向なクラス設計
Entity というベースクラスを作り、それを継承して Enemy (敵), Tower (塔), Projectile (弾) を定義しました。
これにより、例えば「もっと速い敵」や「射程が長い塔」などを簡単に追加できる拡張性を確保しています。
3. 誘導弾のアルゴリズム
弾がターゲットの敵を自動で追いかける（ホーミング）ロジックを実装しました。ベクトル計算を使って、毎フレーム弾の進行方向を敵の位置へ補正しています。
遭遇したトラブル：デプロイ時の404
GitHub Actionsでの自動デプロイ設定中に、リポジトリを作成した直後だとGitHub Pagesの設定が自動で反映されない問題に遭遇しました。API経由で強制的にPagesを有効化することで解決。自動化の裏側にある「初期設定」の重要性を再認識しました。
まとめ
Canvas APIを使うと、ライブラリの制約を受けずに自由な描画ができるのが非常に楽しいです。タワーのアップグレード機能や、新しい敵のタイプなど、まだまだ拡張の余地があるので少しずつアップデートしていきたいと思います！