追加マップvol.2
東京経済大学のおみぬーです。
前回に引き続き追加マップの紹介になります。今回はvol.2です。
前回のブログでは、モンスターの動きを変えるつもりでしたが、先にモンスターの追加をすることに決めました。
以下が今回作成したマップ画像です。
今回のマップでは前回のマップからモンスターが1体増え、2体になりました。
マップのクリア条件は変わらず、モンスターのライフを0にすれば良いです。この際2体ともライフを0にしなくてはなりません。
マップのコードは以下になります。
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, 8, 8, 8, 8, 9, 9, 8, 8, 8, 8, 8, 8, 9, 8, 8],
[8, 8, 9, 9, 9, 9, 9, 9, 8, 9, 9, 8, 9, 9, 9, 9, 9, 9, 8, 8],
[8, 8, 9, 8, 8, 8, 8, 9, 8, 9, 9, 8, 9, 8, 8, 8, 8, 9, 8, 8],
[8, 8, 9, 9, 9, 9, 8, 9, 8, 9, 9, 8, 9, 8, 9, 9, 9, 9, 8, 8],
[8, 8, 9, 8, 8, 9, 8, 9, 8, 9, 9, 8, 9, 8, 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-3.html";
}
上記コードは前回のHTMLファイルから今回のHTMLファイルに移動するためのコードになります。
モンスター2体の初期位置とライフを定義するコードは、以下になります。
jelly1 = new monster(8, 2, 3, "imgJelly");
jelly2 = new monster(11, 2, 3, "imgJelly");
その後、tick関数内でモンスターのライフが0になった際に画面から消すように定義しています。以下がコードです。
if (jelly1.life != 0) {jelly1.move();}
else {jelly1.px = 21;}
if (jelly2.life != 0) {jelly2.move();}
else {jelly2.px = 21;}
モンスター2体のライフを0にすると7の隠し通路が出現し、location.hrefで次のHTMLファイルを読み込みます。以下がコードです。
if (jelly1.life == 0 && jelly2.life == 0 && map[slime.py-1][slime.px] == 7 && slime.dir == -2) {
location.href = "hitcheck8ex.html";
}
現状次のHTMLファイルを作成していないため、初期マップのHTMLファイルに移動するように定義しています。
モンスターの当たり判定を定義するコードは以下になります。
damagecheck(slime ,jelly1);damagecheck(slime ,jelly2);
if (slime.attack == true) {attackcheck(slime, jelly1);attackcheck(slime, jelly2);}
以下のコードで、モンスターと主人公を描画しています。
if (jelly1.life != 0) {jelly1.paint();}
if (jelly2.life != 0) {jelly2.paint();}
if (slime.life != 0) {slime.paint();}
}
モンスター、主人公それぞれがライフ0でない時に描画するように定義しています。
次回はモンスターの動きに変化を加えていこうと思います。
今回はここまでです。
参考文献
田中賢一郎『ゲームで学ぶJavaScript 入門』インプレス,2015年
田中賢一郎『ゲームで作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス,2017年
田中賢一郎『ゲームで学ぶJavaScript 入門 増補改訂版~ブラウザゲームづくりでHTML&CSSも身につく!』インプレス,2022年
コメント
コメントを投稿