はじめてのフラグ③

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

今回は既存のイベントコードの書き換えを行っていきます。

以下が書き換えを行うマップです。

今回は画面上の人型アイコン2つのイベントの書き換えを行っていきます。

マップのコードは以下の通りとなります。

var map2 = [
[08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 11, 08, 08, 08, 08, 08, 08],
[08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 09, 08, 08, 08, 08, 08, 08],
[08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 09, 08, 08, 08, 08, 08, 08],
[08, 08, 08, 09, 09, 08, 08, 08, 08, 08, 08, 08, 09, 09, 08, 08, 08, 08, 08, 08],
[08, 08, 09, 09, 09, 09, 07, 07, 96, 08, 08, 09, 09, 09, 08, 08, 08, 08, 08, 08],
[08, 09, 09, 09, 09, 09, 09, 08, 08, 08, 09, 09, 09, 09, 08, 08, 08, 08, 08, 08],
[08, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 09, 08, 08, 08, 08, 08, 08],
[08, 08, 09, 09, 09, 09, 08, 08, 08, 08, 08, 09, 09, 09, 09, 09, 09, 09, 09, 13],
[08, 08, 99, 09, 09, 09, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08],
[08, 08, 08, 09, 09, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08],
[08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08, 08],

];

このマップのイベントは99と96の2つになります。
99ではすでにフラグ、エンディングが設定されているため、手は加えません。
以下がコードになります。

case 99:
if(flag1==true && flag2==true && flag3==true) {
gc.fillText("少年「ぼくが　もとめているスライムは", 250, 200);
gc.fillText("そういうのじゃないんだ　さよなら」", 285, 230);
setTimeout(fendingpaint, 3000);
}
else {
gc.fillText("少年「きみはスライムに　にているね", 250, 200);
gc.fillText("りゅうに　おねがいすれば", 285, 230);
gc.fillText("りっぱなスライムに　してくれるだろう", 285, 260);
gc.fillText("スライムになれたら　ぼくのなかまにしてやる」", 285, 290);
}

break;

コードの上部はフラグ1~3を回収した状態で起こるイベントを設定しています。また、setTimeoutでfendingpaintを呼び出しています。fendingpaintのコードは以下になります。

function fendingpaint() {

window.removeEventListener("keydown", fieldkeydown);

gc.fillStyle = "Black";

gc.fillRect(200, 20, 400, 400);

gc.fillStyle = "White";

gc.fillRect(350, 50, 100, 100);

gc.drawImage(imgSlime, 350, 50, 100, 100);

gc.fillStyle = "White";

gc.font = "24px serif";

gc.fillText("FIN?", 380, 200);

}

fendingpaintは既存のendingpaintの一部を書き換えました。fはfalseの頭文字のfです。ゲームのコンセプト上複数のエンディングが必要になってくるため、バッドエンドとは別に通常エンディング、偽エンディング、真エンディングを最低限用意したいと考えています。作成過程でこれらとは別のエンディングも追加できればしたいと思っています。

gc.fillTextでは「FIN?」と表示せるように設定しています。

以下が画面です。

このエンディングはfendingつまり偽エンディングのため、「?」を付けました。現状endingpaintを実行した後は画面が動かなくなってしみますが、今後タイトル画面を追加しクリックでタイトル画面に戻ることができるようにしたいと考えています。

続いて96のイベントです。以下がコードになります。

case 96:

if(flag1==true && flag2==true && flag3==true) {

gc.fillText("農民「ひぃ！！魔物だ！！", 250, 200);

gc.fillText("こんなところに来んじゃなかった、、、」", 285, 230);

}

else {

gc.fillText("農民「木のあいだを　とおって", 250, 200);

gc.fillText("もりのおくに　きてみたんだが", 285, 230);

gc.fillText("みちに　まよってしまった」", 285, 260);

}

break;

99のイベント同様、コードの上部はフラグ1~3を回収した状態で起こるイベントを設定しています。96のイベントではエンディングを設定していません。以下が画面です。

以下がコード下部に設定されているイベント画面です。

今回は99と96のイベントを設定しました。現段階でアイデアが浮かんでいないため、次回の内容は未定です。

参考文献

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

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

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