謎解きゲーム作成

 今回は、謎解きを解くためのヒントとなる絵本を追加したので、それを紹介します。 絵本が置いてある場所に移動すると、絵本の本文が表示されるようになっています。 左下に赤い絵本があります 絵本の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); ...

 前回に引き続き、今回も謎解きの仕掛けを紹介します。 まず、新たにマップを追加したのでそちらを紹介します。 食堂 キッチン 今回作成したマップは上の2つです。 お城にあるような食堂をイメージしてつくりました。 食堂の隣には小さなキッチンのような部屋もつくりました。 食堂には7つのイスが並んでいて、それぞれテーブルの上にパンが乗った皿が置いてありますが、真ん中の赤いイスのところには何も置いていません。また、一番左端の席は皿だけ置いてあります。 食堂のとなりのキッチンに移動すると、テーブルの上にケーキが置いてあるので、まずそのケーキを入手します。 そして、その状態で食堂の赤いイスに移動すると、テーブルの上にケーキを置くことができます。 ケーキを置いたときの画面 すると、画面上側のカーテンが開き、新しいマップに移動できるようになります。 以下は今回作成したソースコードです else if (mpt==85 && flag5==false) { px = dx; py = dy; flag5=true fieldpaint(); cakepaint(); } キッチンでケーキを入手すると、flag5がtrueになるようにしています。 else if (mpt==72 && flag5==true && flag6==false) { px = dx; py = dy; flag6=true//テーブルにケーキを置いた fieldpaint(); kingpaint(); } function kingpaint() { document.getElementById("sound").play(); gc.fillStyle = "Black"; gc.fillRect(200, 300, 400, 400); gc.fillStyle = "White"; gc.font = "12px serif"; gc.fillText("テーブルの上にケーキを置いた", 2...

 今回は1番最初に作成した謎解きの仕掛けについて紹介します。 今回は、床に設置された4つのスイッチを決められた順番で押すとドアが開くという仕掛けをつくりました。 ソースコードは以下の通りです。 function switchpaint(mpt) { document.getElementById("sound2").play(); gc.fillStyle = "Black"; gc.fillRect(200, 300, 400, 400); gc.fillStyle = "White"; gc.font = "12px serif"; gc.fillText("スイッチを押した", 250, 350); switch (mpt) { case 61: if(flag1==true && flag2==false && flag3==false && flag4==false){ flag2=true; } else if(flag2==true || flag3==true){ flag2=false; } break; case 62: if(flag1==true && flag2==true && flag3==false && flag4==false){ flag3=true; } else if(flag3==true){ flag3=false; } break; case 63: if(flag1==false && flag2==false && flag3==false && flag4==false){ flag1=true; } else if(flag1==true || flag2==true || ...

 前回の投稿からだいぶ期間が空いてしまいました。ゲーム作成の方が少し進んだので、何回かに分けて進捗状況を投稿しようと思います。 今回は、マップを新たに増やしたので、その画像を載せていきます。 こんな感じにしてみました。 マップに配置してあるものの中には謎解きの要素と関係するものがあります。 ほとんどは素材サイトからダウンロードしたものですが、一部は自分のパソコンで描いたものもあります。 次回から、謎解きの仕掛けについて紹介していきます。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版～ブラウザゲームづくりで HTML&CSS も身につく！』インプレス, 2022年 使用した素材サイト ぴぽや倉庫 https://pipoya.net/sozai/ DOTOWN https://dotown.maeda-design-room.net/