Screenshots
Overview
概要
敵の進路が固定されておらず、タワーを置くほど通路が変わって敵が迂回する『迷路構築型』のタワーディフェンスです。タワー配置が攻撃であると同時に地形操作でもあるため、どこに何を置くかが二重の意思決定になります。アロー・キャノン・フロスト・ライトニング・スナイパーの5種×3レベル、ノーマルからボスまで敵6種、20ウェーブの通常モードとその後のエンドレスを収録。描画はCanvas 2Dのみで、外部エンジンは使いません。
How to use
遊び方・使い方
グリッド上にタワーを配置して、左のスポーンから右のゴールへ向かう敵を迎撃します。タワーは壁にもなり敵の経路を変えますが、ゴールを完全に塞ぐ配置は禁止で不可表示になります。敵到達でライフが減り、0で終了。得た資金でタワーを建設・売却・レベルアップし、早送りで残クールダウン分のボーナス金を得られます。フロストで減速させライトニングで連鎖、スナイパーで高HPを狙撃——と役割を組み合わせて、20ウェーブ突破やエンドレスの到達記録に挑みます。
Tech stack
技術スタック
TypeScriptNext.js 16React 19Canvas 2DTailwind CSS v4
追加npm依存はなく、効果音はWebAudioで手続き合成しGainNodeプールで同時発音を制限。canvasはdevicePixelRatioに対応し、UIはDOM+Tailwind、盤面のみCanvasで描画します。OG画像はnext/ogで生成しています。
Highlights
工夫した点
- 経路はゴール起点のBFSフローフィールドを1回計算して全敵で共有し(敵数に対しほぼO(1))、再計算はタワーの配置・売却時のみ。斜め移動は両隣が空きの時だけ許して角抜けを防止
- ゴール到達可能性をBFSで常時チェックし、塞ぎきる配置を禁止。飛行敵はフィールドを無視してゴールへ直進、弾は追尾式で命中させる
- requestAnimationFrame＋固定タイムステップのaccumulator方式で倍速や復帰時のズレに対応。entitiesはオブジェクトプール、HUDは100msスロットルのuseSyncExternalStoreで公開し、盤面のみCanvasの二層構成
To improve
改善したい点
- タワー・敵の種類やアップグレードのバリエーションをさらに増やしたい
- エンドレスの難易度カーブとスコア設計の調整に伸びしろがある
- モバイルでの配置操作(ドラッグ・誤タップ)の快適性に課題
What's next
今後の展望
- マップ複数化やステージエディタの追加
- 特殊能力・アクティブスキルなど能動的な操作要素
- 日替わりシードやスコアランキングの実装