追加マップvol.4

 お疲れ様です、東京経済大学のおみぬーです。

今回も追加マップの紹介です。今回もモンスターの動きに変化を加えます。

今回作成したマップ画像は以下になります。

今回のマップもモンスターの動きを活かすための構造にしました。

以下がコードです。

var map = [

[8, 8, 8, 8, 8, 8, 8, 8, 8, 7, 7, 8, 8, 8, 8, 8, 8, 8, 8, 8],

[8, 8, 8, 8, 8, 8, 8, 8, 8, 7, 7, 8, 8, 8, 8, 8, 8, 8, 8, 8],

[8, 8, 9, 9, 8, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 8, 9, 8, 8],

[8, 8, 9, 9, 8, 9, 8, 9, 9, 8, 8, 9, 9, 8, 9, 9, 8, 9, 8, 8],

[8, 8, 9, 9, 8, 9, 8, 9, 9, 8, 8, 9, 9, 8, 9, 9, 8, 9, 8, 8],

[8, 8, 9, 9, 8, 9, 8, 9, 9, 8, 8, 9, 9, 8, 9, 9, 8, 9, 8, 8],

[8, 8, 9, 9, 8, 9, 8, 9, 9, 8, 8, 9, 9, 8, 9, 9, 8, 9, 8, 8],

[8, 8, 9, 9, 8, 9, 8, 9, 9, 8, 8, 9, 9, 8, 9, 9, 8, 9, 8, 8],

[8, 8, 9, 9, 9, 9, 8, 9, 9, 9, 9, 9, 9, 8, 9, 9, 9, 9, 8, 8],

[8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],

[8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],

];

今回のモンスターは一度の移動で横方向では2マス飛ばし、縦方向では1マス飛ばしに移動します。そのため移動先以外の壁を無視して動くことが可能になっています。壁をすり抜けているように見えるので、このモンスターはGhostJellyという名前で定義しています。

このような動きをさせるために改造した箇所はmoveメソッドのみになります。

以下がコードです。

this.move = function () {

this.movecounter();

if (this.movecnt > 0) {

return;

}

this.dx = 0;

this.dy = 0;

var nx = 0, ny = 0;

switch (Math.floor(Math.random() *40)) {

case 0: nx = -3; ny = 0; this.dir = -1; break;

case 1: nx = 0; ny = -2; this.dir = -2; break;

case 2: nx = 3; ny = 0; this.dir = 1; break;

case 3: nx = 0; ny = 2; this.dir = 2; break;

default: nx = 0; ny = 0; break;

}

if (map[this.py + ny][this.px + nx] == 9) {

this.dx = nx;

this.dy = ny;

}

}

基本的には通常のモンスターとほとんど同じコードになります。switch文内のcase0、2のnxの値をそれぞれ-3、3にすることで横方向では2マス飛ばしで移動します。case1、3のnyの値をそれぞれ-2、2にすることで縦方向では1マス飛ばしで移動します。

今回はここまでです。次回については未定です。

参考文献

田中賢一郎『ゲームで学ぶJavaScript 入門』インプレス,2015年

田中賢一郎『ゲームで作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス,2017年

田中賢一郎『ゲームで学ぶJavaScript 入門　増補改訂版~ブラウザゲームづくりでHTML&CSSも身につく!』インプレス,2022年