ストーリーの追加

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

今回から、研究ノートで作成したゲームと前回まで作成していたマップを繫げていく作業を行っていきます。

以前研究ノートで作成したゲームの詳細については以下から確認いただけます。

https://hajimetenoprogramming.blogspot.com/

前回までに作成してきたゲームと研究ノートで作成したゲームを、違和感なくひとつの物語にしていく必要があるため、研究ノートで作成したゲームのシナリオを少し変更していくことから始めます。

研究ノートのゲームはエンド分岐がありますが、トゥルーエンドから今回作成したゲームに繫げます。以前作成したトゥルーエンドの内容は、ジェリー状のスライムから固形のスライムに変化してクリアでしたが、そこにストーリーを追加します。追加する内容としては、「ジェリー状になってしまった他のスライムを倒してほしいとお願いされる」などで良いかなと思っています。

ということで以下のコードを追加しました。

function requestpaint() {

window.removeEventListener("keydown", fieldkeydown);

gc.fillStyle = "Black";

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

gc.fillStyle = "White";

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

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

gc.fillStyle = "White";

gc.font = "12px serif";

gc.fillText("ようせい「きみにお願いがあるんだ」", 250, 200);

setTimeout(continuepaint, 3000);

}

function continuepaint() {

window.removeEventListener("keydown", fieldkeydown);

gc.fillStyle = "Black";

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

gc.fillStyle = "White";

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

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

gc.fillStyle = "White";

gc.font = "12px serif";

gc.fillText("ようせい「にせもののスライムをたおしてほしいんだ！", 250, 200);

gc.fillText("きみにしかたのめないんだ！」", 310, 230);

setTimeout(warppaint, 3000);

}

function warppaint() {

window.removeEventListener("keydown", fieldkeydown);

gc.fillStyle = "Black";

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

gc.fillStyle = "White";

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

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

gc.fillStyle = "White";

gc.font = "12px serif";

gc.fillText("ようせい「きみをワープさせる！", 250, 200);

gc.fillText("たのんだよ!」", 310, 230);

setTimeout(dungeonpaint, 3000);

}

function dungeonpaint(){

location.href = "hitcheck8ex.html";

}

スライムの姿が変化した後に会話を追加、location.hrefでhitcheck8exのhtmlファイルに遷移します。ほかにも細々した箇所を変更しましたが、割愛させてもらいます。

最後に今回追加した会話の画像です。

今回はここまでです。次回はクリア後のストーリーを追加したいと考えています。

参考文献

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

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

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