追加マップvol.1

  東京経済大学大学のおみぬーです。

作成中のゲームでは、計5つのマップになる予定です。今回は追加マップvol.1の紹介です。

今回作成したマップの画像です。

以下がコードです。

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, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 8, 8],

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

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

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

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

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

[8, 8, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 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],

];

8が壁、9が通路、7はクリア前は壁、クリア後に隠し通路が出るように定義しています。

このマップには前回のブログに載せたマップのクリア後に移動できるようになっています。

マップ移動に使ったコードは以下になります。

if (jelly.life == 0 && map[slime.py-1][slime.px] == 7 && slime.dir == -2) {

location.href = "hitcheck8ex-2.html";

}

モンスターを撃破、つまりライフが0になった際に7の隠し通路が出現し、location.hrefで 次のマップを読み込んでいます。

今回のマップではモンスターの動きはそのままで、壁を追加しました。次のマップではモンスターの動きにも変化をつけたいと考えています。

今回はここまでです。

参考文献

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

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

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