Javascriptでゲームを作りたい　その14（enchant.jsを使いたい5-マップ衝突判定とスプライト）

2020/7/2 2020/8/30 ゲーム, ゲーム制作

前回作成したマップで、キャラクターが動くようにしました。
タッチ（クリック）した方向にウサギが歩いていきます。

仕組みはまず画面全体に透明なスプライトを敷き詰めて、そのスプライトがタッチされたらイベントが発生するようにイベントリスナを設定。
タッチされた座標を取得して、その位置がウサギの位置より右ならウサギを右に移動、左なら左に移動、上なら上に…という感じでウサギをうごかすプログラムです。

↑さわってみてください！

それからマップ上にウサギが通れるところと通れないところを設定しています。
家など建物は通れないけど、何もない黒いところや草むらは通れる。

これには衝突判定という機能を使います。マップと同じで配列を使います。

マップの配列はこんな感じ。

map.loadData(
            [
                [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [ 4, 4, 4, 4,-1, 4, 4,-1, 8, 8],
                [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
                [ 0, 0, 8, 8,-1, 6,11,-1, 9, 0],
                [ 0, 1, 2, 3,-1, 6,11,-1, 6, 0],
                [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
                [ 4, 4,11, 5,-1,10, 7,-1, 0, 0],
                [ 4, 4,11, 8,-1, 5, 8,-1, 0, 0]
            ]

前回も書きましたが数字がマップチップの各ブロックに対応しています。

そしてこちらが衝突判定の配列。

map.collisionData = [
                [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                [ 1, 1, 1, 1, 0, 1, 1, 0, 1, 1],
                [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [ 1, 1, 1, 1, 0, 1, 1, 0, 1, 1],
                [ 1, 0, 1, 1, 0, 1, 1, 0, 1, 1],
                [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [ 1, 1, 1, 0, 0, 1, 1, 0, 1, 1],
                [ 1, 1, 1, 1, 0, 0, 1, 0, 1, 1]
            ]

上のマップに対応していて、通れるところは0、通れないところは1です。

これをあらかじめ設定したうえで