謎解きゲーム作成

 今回がおそらくブログの最終回になります。 謎解きの仕掛けは前回のブログで紹介したものが最後になります。そのあとにゲームのクリア画面を作成したり、マップなどを少し修正して完成となりました。 クリア画面の様子 これまでの活動を振り返って、仕掛けづくりで悩んだり、試行錯誤を繰り返したりしたこともありましたが、それがプログラミング学習において大切なことだと感じました。このゲーム制作を経て、よりプログラミングの奥深さや楽しさを実感できたなと思いました。 ということで、これにて謎解きゲームの作成は以上になります。 ここまで御覧いただき、ありがとうございました。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版～ブラウザゲームづくりで HTML&CSS も身につく！』インプレス, 2022年 使用した素材サイト ぴぽや倉庫 https://pipoya.net/sozai/ DOTOWN https://dotown.maeda-design-room.net/

 今回は、また新しい謎解きの仕掛けを作ったので、紹介していきます。 今回作成した仕掛けは、正しいパターンで進んでいくとアイテムがある部屋にたどり着けるというものです。 1～10までの部屋があり、それぞれの部屋に黒と白の扉があります。この2つの扉を正しいパターンで入らないと次のアイテムがゲットできないような仕掛けになっています。 1番目の部屋 2番目の部屋 10番目の部屋 黒い扉、白い扉のどちらを選んでも次の番号の部屋に進みます。そして、10番目の部屋で最後の2択を選ぶと、アイテムがある正解の部屋か、不正解の部屋のどちらかに進みます。 正解の部屋 不正解の部屋 1～10までのすべての部屋で正しい扉を選ぶと正解の部屋に進みます。一方、一つでも扉を間違えると最後は不正解の部屋に進みます。不正解の部屋には「不正解」と書かれた看板が立っています。 この仕掛けもflagを使って作りました。flag79というflagを用意し、初期状態ではtrueになっています。正しいパターンで進めばflag79はtrueのままですが、ひとつでも間違いの扉に進むとflag79にfalseが代入されます。 最終的に、10番目の部屋の扉に入った時にflag79がtrueであれば正解の部屋、flag79がfalseであれば不正解の部屋が描画されます。 今回の仕掛けの大まかな解説はこんな感じです。 今回のゲーム制作ではすべての仕掛けでflagを使いました。使い方によっていろんな仕掛けが作れるので、flagはゲーム作りにおいて重要だなと個人的に感じました。 謎解きゲームはこれである程度完成したので、今回の仕掛けがもしかしたら最後になるかもしれません。 そのため、次回のブログはどんな内容になるかはわかりませんが、また何か進捗があれば投稿していきます。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版～ブラウザゲームづくりで HTML&CSS も身につく！』インプレス, 2022年 使用した素材サイト ぴぽや倉庫 https://pipoya.net/sozai/ DOTOWN h...

 今回は、また新しい謎解きの仕掛けを作ったので、そちらを紹介していきます。 今回作った仕掛けは、床のパネルを踏むと色が変わり、決められた場所に色を塗るとドアが開くというものです。 初期状態 パネルを踏んだ後の様子 マップの初期状態では、すべてのパネルが白い状態になっており、プレイヤーがパネルを踏むと、踏んだパネルが赤くなります。 赤くなったパネルをもう一度踏むと白いパネルに戻ります。 特定のパネルのみを赤にしてマップ右端のスイッチを押すと、別のマップのドアが開きます。 以下がソースコードの解説です。                               else if (mpt==143 && flag26==false && flag78==false) { px = dx; py = dy; flag26=true;//赤に塗る fieldpaint(); } else if (mpt==143 && flag26==true && flag78==false) { px = dx; py = dy; flag26=false;//白に塗る fieldpaint(); }                               if (mpt==143 && flag26==false) {                     gc.drawImage(imgWhitefloor, x * 40, y * 40, 40, 40); } if (mpt==143 ...