謎解きゲーム作成

 今回は、謎解きの仕掛けとして、スイッチを押すとマップが切り替わる仕掛けをつくったので、そちらを紹介していきます。 マップ上に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/