謎解きゲーム作成

 今回は、また新しい謎解きの仕掛けを作ったので、紹介していきます。 今回作成した仕掛けは、正しいパターンで進んでいくとアイテムがある部屋にたどり着けるというものです。 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 ...

 今回は、謎解きの仕掛けとして、スイッチを押すとマップが切り替わる仕掛けをつくったので、そちらを紹介していきます。 マップ上に1つのスイッチが置いてあり、そのスイッチを押すと隣の部屋に入った時のマップが変わります。切り替わるマップは全部で3種類あります。 スイッチが置いてある部屋(map11) スイッチを押すと切り替わる部屋(map12) スイッチを押すと切り替わる部屋(map13) スイッチを押すと切り替わる部屋(map14) 以下が今回作成したソースコードです。 マップのコード 上が今回作成したそれぞれのマップのコードです。map11がスイッチの部屋、map12～14が切り替わる3種類の部屋になっています。 else if (mpt==132 && flag21==false && flag22==false && flag23==true) { px = dx; py = dy; flag21=true flag22=false flag23=false fieldpaint(); secondswitchpaint(); } else if (mpt==132 && flag21==true) { px = dx; py = dy; flag21=false flag22=true flag23=false fieldpaint(); secondswitchpaint(); } else if (mpt==132 && flag22==true) { px = dx; py = dy; flag21=false flag22=false flag23=true fieldpaint(); secondswitchpaint(); } else if (mpt==133 && flag23==true) { stage = 12; switch (e.keyCode) { case 37: ca...

 今回は、以前に少し紹介した中庭エリアにある穴に水を流してアイテムをとる仕掛けを作成したのでそちらを紹介します。 少年に話しかけたときの画面 中庭エリアの左隅に穴が開いている場所があり、その目の前には男の子が立っています。 そして、その男の子はそこにおもちゃを落としてしまったという設定にしています。 主人公がバケツを入手し、そのバケツに水を汲み、汲んだ水を穴に流し込んでおもちゃをゲットするという流れになります。 バケツに水を汲んで、穴に流す作業を三回繰り返すとおもちゃがゲットできます。 1.噴水で水を汲む 2.汲んだ水を穴に流す(1回目) 3.再び水を汲む 4.汲んだ水を穴に流す(2回目) 5.再び水を汲む 6.汲んだ水を穴に流す(3回目) 7.少年におもちゃを渡す おもちゃを取るステップは上の1～７の通りです。 水を汲んで流す作業は1回だけにしようか迷いましたが、なんとなく3回にしました。 この作業を3回にしたことで、穴に水を流したときのメッセージを切り替える必要があるので、ソースコードを書くのが少し大変になりました。 以下が中庭のマップと今回作成した部分のソースコードです。 中庭のマップのコード else if (mpt==120 && flag7==true && flag11==false) { px = dx; py = dy; flag11=true//バケツに水を汲んだ(1回目) fieldpaint(); waterpaint(); } バケツを入手した状態(flag7がtrue)で噴水の周り(mpt120)に移動すると「バケツに水を汲んだ」というメッセージが表示されます。メッセージはwaterpaint関数によって表示されます。また、水を汲むとflag11がtrueになります。 else if (mpt==119 && flag11==true && flag12==false) { px = dx; py = dy; flag12=true//穴に水を流した(1回目) fieldpaint(); holepaint(); } そして、flag11がtrueの状態...

 前回のブログでは、犬小屋のマップの紹介をしました。今回はその続きで、犬小屋の近くで大きな音を鳴らすと犬が壁を壊してくる仕掛けをつくりました。 まずは新しいマップを新設したので、そちらの説明からしていきます。 今回新たに作成したマップ 今回新たに小さな部屋のようなマップをつくりました。この部屋は犬小屋がある部屋の隣に位置しています。 この部屋の床に剣が落ちている場所があり、そこに金属探知機を手に入れた状態で移動すると金属探知機が音を鳴らし、犬がとなりの部屋から壁を壊して入ってきます。 金属探知機が剣に反応したときの画面 犬が入ってきたときのメッセージ 壁が壊された部分が通行可能になる 壁が壊された部分が通行可能になる 犬が壁を壊すことで、犬小屋の部屋と今回作成した小さな部屋が行き来可能になりました。 ここの壁を壊さないとゲームが進まないようになっているので、ここが通り抜けできるようになることには意味があります。 今回はこんな感じの仕掛けをつくってみました。 次回は、前回紹介した噴水のあるマップの穴に水を流す仕掛けを紹介します。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版～ブラウザゲームづくりで HTML&CSS も身につく！』インプレス, 2022年 使用した素材サイト ぴぽや倉庫 https://pipoya.net/sozai/ DOTOWN https://dotown.maeda-design-room.net/

就職活動で忙しく、前回の投稿からまた期間が空いてしまいました。 今回は、また新たにマップを追加したので、そちらを紹介していきます。 今回追加したマップは、犬小屋がある部屋と中庭です。 犬小屋がある部屋 犬小屋の画像は、フリー素材のサイトになかったので(たぶん)、自分でペイントアプリで描きました。 また、近くには注意書きの看板があり、それも自分で描きました。 注意書きの看板 設定としては、犬小屋の中に凶暴な犬が寝ていて、近くで大きな音を立てると中から犬が出てきて周囲の壁を壊す、という感じにしようかなと考えています。 そのため、今後大きな音を立てる物を追加して、音を鳴らすと犬が壁を壊すようにできたらいいなと思います。 そして、もう一つ追加したマップが中庭です。 真ん中に大きな噴水と、左下に地面に穴が開いてるところがあります。 中庭 穴の近くには男の子が立っていて、おもちゃを穴に落としてしまった、という設定にしています。 男の子に話しかけたときの画面 主人公がどこかでバケツのようなものを手に入れ、噴水で水を汲み、それを穴に流しておもちゃをゲットする、といった感じにしていこうかなと考えています。 今後は、今回追加したマップの設定に沿うようなアイテムやイベントを追加していきます。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版～ブラウザゲームづくりで HTML&CSS も身につく！』インプレス, 2022年 使用した素材サイト ぴぽや倉庫 https://pipoya.net/sozai/ DOTOWN https://dotown.maeda-design-room.net/