前回マップの画像を作成している際、ドット絵を作成するのは以外と面倒ということに気が付きました。そしてファイナルファンタジータクティクス系のゲームだとドット絵のキャラもたくさん作成しなければ行けないことに躊躇したのです。
今回作成したのはサンプル(sample/02_move.html)です。マップ上に配置された赤い戦車をクリックすると、移動範囲が明示されます。次に移動したい場所をクリックしてください、するとクリックした位置に向かって戦車が移動します。
移動範囲が確定すれば移動は簡単だと思っていたのですが違いました。演出上、どの様な経路で移動したかを示さねばならず目的地までの道順を調べなければならないのです。
しかし前回デバッグ用にマスに残りの移動量を表示していたことで、以外と早く解決策が見つかりました。
左図のように選択した位置からスタートして、数値の多いマスを辿るのです。そして数値の一番多い点(周りが自分の数値より小さい点)まで来たら終了。マスの情報は配列に入れて、移動の際のアニメに利用します。
この数値の多いマスを辿る部分に再帰処理が必要になりました。仕組みは前回の移動範囲を探るのと非常に似ています。
この段階で移動に関する難しい部分は完了したと思います。しかし現状ではユニットを管理しておらず1つのユニットしか操作できません。次はユニットを管理する仕組みを作成し、複数のユニットを移動できるようにしたいと思います。
配置するユニットはdiv要素なので、これにidを設定すれば「とりあえず」複数のユニットに対応できます。
サンプルでは「船」を追加しており、移動範囲が相容れないため重複することはありません。ゲームにするためには重複を防ぐ仕組みを追加する必要があり、ポイントなのは陣営によって扱いが変わる点です。
敵陣営のユニットがある場合、そのマスは通過不可になり、また同じ場所に停止することもできない。
同じ陣営のユニットでも同じ場所に停止する事ができないのは同じだが、通過は可能となる。
ユニットは同じマスに移動できないようにしなければなりません。なのでユニットの配置されているマップにもマスクをかけるようにしました。
今回はここまで、次回は敵ユニットを追加しようと思います。敵ユニットの場合は通過できないようにするため色々と配列を操作しなければならなそうです...。