ヒントの絵本

 今回は、謎解きを解くためのヒントとなる絵本を追加したので、それを紹介します。

絵本が置いてある場所に移動すると、絵本の本文が表示されるようになっています。

左下に赤い絵本があります

絵本の1ページ目

絵本の2ページ目

絵本の3ページ目

主人公が絵本の場所まで移動すると、絵本の文章が1ページ目から順に表示されます。

絵本のページは全部で3ページです。

以下が今回作成したソースコードです。

else if (mpt==67) {

px = dx;

py = dy;

fieldpaint();

bookpaint();

}

絵本が置いてある場所(mpt67)に移動すると、関数bookpaintが実行され、絵本の文章が表示されます。

function bookpaint() {

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

gc.fillStyle = "Black";

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

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

gc.fillStyle = "White";

gc.font = "12px serif";

window.removeEventListener("keydown", fieldkeydown);

gc.fillText("絵本「幸運な執事」", 250, 200);

gc.fillText("むかしむかしあるところに", 250, 260);

gc.fillText("短気な王様と うっかり者の執事がおりました", 250, 290);

gc.fillText("王様はケーキが大好きで　毎日3時のおやつに", 250, 320);

gc.fillText("ケーキを食べていました", 250, 350);

setTimeout(bookpaint2, 20000);

}

function bookpaint2() {

gc.fillStyle = "Black";

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

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

gc.fillStyle = "White";

gc.font = "12px serif";

gc.fillText("ところがある日　うっかり者の執事は", 250, 230);

gc.fillText("王様にケーキを出すのを忘れてしまいました", 250, 260);

gc.fillText("王様は激怒して　執事をお城から追い出してしまいました", 250, 290);

gc.fillText("執事が城の前で途方に暮れていると", 250, 320);

gc.fillText("目の前に天使が現れました", 250, 350);

setTimeout(bookpaint3, 20000);

}

function bookpaint3() {

gc.fillStyle = "Black";

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

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

gc.fillStyle = "White";

gc.font = "12px serif";

gc.fillText("天使は執事にこう言いました", 250, 230);

gc.fillText("「ここから東に向かってまっすぐ進みなさい」", 250, 260);

gc.fillText("執事が言われた通りに東に進むと", 250, 290);

gc.fillText("そこには金銀財宝が入った宝箱がありました", 250, 320);

gc.fillText("そして執事は億万長者になりました", 250, 350);

gc.fillText("～ めでたしめでたし ～", 250, 380);

window.addEventListener("keydown", fieldkeydown);

}

関数bookpaintは絵本の1ページ目の文章を表示させています。タイマー処理を使い、20秒後に関数bookpaint2を実行させます。

関数bookpaint2には絵本の2ページ目の文章を表示させています。こちらもタイマー処理を使って20秒後に関数bookpaint3を実行させます。

関数bookpaint3には絵本の3ページ目を表示させています。

今回は、絵本のページの移行をタイマー処理を使いましたが、ユーザー目線で考えるとユーザーが文章を読み終えたら各自でキーを押してページ移行させるほうがいいと感じているので、時間に余裕があればそちらの方式に変えたいと思っています。

今回作成した絵本は前回紹介したケーキを置く仕掛けや別の仕掛けのヒントになっています。

次回以降も仕掛けやマップなどを紹介していきたいと思います。

参考文献

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

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

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

使用した素材サイト

ぴぽや倉庫

https://pipoya.net/sozai/

DOTOWN

https://dotown.maeda-design-room.net/