vue,ts, オブジェクト指向,canvas2d
デモ: https://blog.unrun.top/mctato/
1 月からのアイデア、最初は 7、8 つの js ファイルを順番に html の script タグに書いていたが、本当に疲れた。
後で vite,ts を使って再構築し、相互にインポートするだけで済むようになった。最後にパッケージ化する。
主なアイデア
プレイヤー、ゾンビクラス、エフェクトクラス、フライトオブジェクトクラスは、矩形クラスを継承しています。
矩形クラスには描画、移動などのメソッドがあります。
- キー入力を監視して移動する
- 衝突検出には広相撞検出を使用し、まず 1 つの次元の状況をチェックして一部をフィルタリングする
- モンスターの経路探索は、パスポイントに基づいて行われます
- モンスターとプレイヤーは、視覚的に最短のパスポイントを探し、それぞれ最も近いパスポイントを接続し、最短パス問題を解くための重み付き無向グラフです(開始と終了の距離も考慮に入れて、短いパスの計算に組み込まれます)
- 重み付き無向グラフの最短パス問題にはダイクストラのアルゴリズムを使用します(一部の計算結果をキャッシュすることもできますが、これは行っていませんが、影響はほとんどありません)
いくつかの画像
"最短パス"
衝突検出
アニメーションフレーム
再構築前
長い間書いたが、最終的な効果はあまり良くなかった。