マップデータの管理

公開日:2020-08-30
最終更新日:2020-09-14

カウントダウン終了後,いよいよゲームが開始されます.その処理を実装していきましょう.前回,カウントダウン終了後にphase = 2としましたので,まず,mainLoop()関数にphase = 2に対応する処理を追加しましょう.

つづいて,main.jsput()関数を追加してください.

そして,描画関連の処理として,main.jsdrawMap()関数を追加してください.

ブラウザで下記のURLにアクセスしてみましょう.

http://localhost:8000/touch/

すると,カウントダウン終了後,2秒に1回のタイミングで青いセルが表示されることがわかります.この青いセルをターゲットとよぶことにします.本来は,このターゲットをクリックしていくのですが,まだクリックされたときの処理は実装していません.

このターゲットを出現させる位置はマップデータによって管理されています.マップデータは定数とグローバル変数で定義したmapです.以下にマップデータをリセットするresetMap()関数を再掲します.

このように,マップデータmapは2次元配列として定義されています.ここでは,マップデータのサイズを3×4としています.このマップデータがキャンバス上のセルの位置関係に対応します.横方向をx,縦方向をyとすると,位置座標(x, y)はmap[y][x]で参照できます.位置座標(x, y)について,ターゲットの出現/非出現の状態をmap[y][x]で表します.ここでは,map[y][x] = 1のときターゲットが出現,map[y][x] = 0のときターゲットが非出現を表すと定義しています.リスト4のとおり,最初はすべての要素が0ですので,ターゲットは出現していない状態でゲームが開始されることになります.

リスト1のmainLoop()関数のタッチフェーズに対応する処理では,2秒に1回のタイミングでput()関数を呼び出しています.リスト2のput()関数では,一旦mapをリセットしたうえで,セルごとに40%の確率でターゲットを配置,すなわちmax[y][x] = 1としています.リスト3のdrawMap()関数はマップを描画する関数です.ここでは,max[y][x] = 0のとき何もしない,map[y][x] = 1のとき青い矩形を描画しています.こうすることでターゲットが出現したり,しなかったりしているように見せています.