クリア後のストーリー追加

お疲れ様です、おみぬーです。

私用で忙しかったり、季節の変わり目で体調を崩していたため、前回の更新からだいぶ時間が空いてしまいました。

今回は予定通りクリア後のストーリーを追加しました。ストーリーとは言っても、ようせいやその他のキャラクターから感謝されるというものです。

マップは以前研究ノートで作成したものを使用します。今回はフラグなどは使用しないシンプルなものになっているので、マップの詳細は割愛します。興味のある方は、以前作成した研究ノートのブログをチェックしてください。前回のブログにURLがあります。

ということで以下に、今回追加したストーリー（会話）と画像を載せます。

function eventpaint(evnum) {

document.getElementById("sound").play();

gc.fillStyle = "Black";

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

var imgev = document.getElementById("Event"+evnum+"");

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

gc.fillStyle = "White";

gc.font = "12px serif";

switch (evnum) {

case 93:

gc.fillText("農民「きみが魔物をたおしてくれたんだね", 250, 200);

gc.fillText("ほんとうに　ありがとう！", 285, 230);

break;

case 94:

gc.fillText("勇者「おまえがまものを倒したのか！？", 250, 200);

gc.fillText("ここはすなおに感謝しよう", 285, 230);

gc.fillText("おまえのことを侮っていた", 285, 260);

gc.fillText("すまない！！」", 285, 290);

break;

case 96:

gc.fillText("農民「ま、まものを倒してくれて", 250, 200);

gc.fillText("あ、ありがとう、、、」", 285, 230);

break;

case 97:

gc.fillText("ようせい「きみのおかげで", 250, 200);

gc.fillText("もりに平和がもどったよ！！", 310, 230);

gc.fillText("ほんとうに　ありがとう！！", 310, 260);

gc.fillText("きみの活躍は一生語り継いでいくよ！！」", 310, 290);

window.removeEventListener("keydown", fieldkeydown);

setTimeout(ENDpaint, 3000);

break;

case 98:

gc.fillText("盲目の男性「森を救ってくれてありがとう」", 250, 200);

break;

case 99:

gc.fillText("少年「ぼくにだって魔物をたおせたよ！", 250, 200);

gc.fillText("次はぼくがたおしてやる！！」", 285, 230);

break;

}

}

以上がコードと画像になります。

ようせいと会話することで、ENDpaintを呼び出します。ENDpaintのコードと画像は以下になります。

function ENDpaint(){

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("END", 380, 200);

buttonok.style.display = "";

buttonok.style.position = "absolute";

buttonok.style.left = "500px";

buttonok.style.top = "330px";

buttonok.style.width = "100px";

buttonok.style.height = "50px";

buttonok.onclick = function(){returntitlepaint(); buttonok.style.display = "none";}

}

ENDpaint内で、OKボタンをクリックすることでreturntitlepaintを呼び出します。

以上がコードです。

function returntitlepaint(){

location.href = "slimeadventuretitle.html";

}

returntitlepaintが実行されることでタイトル画面のHTMLファイルへ遷移します。

今回はクリア後のストーリーを作成しました。次回は未定です。

お疲れ様でした。

参考文献

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

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

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