謎解きの仕掛け4
今回は、以前に少し紹介した中庭エリアにある穴に水を流してアイテムをとる仕掛けを作成したのでそちらを紹介します。
 |
| 少年に話しかけたときの画面 |
中庭エリアの左隅に穴が開いている場所があり、その目の前には男の子が立っています。
そして、その男の子はそこにおもちゃを落としてしまったという設定にしています。
主人公がバケツを入手し、そのバケツに水を汲み、汲んだ水を穴に流し込んでおもちゃをゲットするという流れになります。
バケツに水を汲んで、穴に流す作業を三回繰り返すとおもちゃがゲットできます。
 |
| 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の状態で穴の横(mpt119)に移動すると「穴に水を流した」というメッセージが表示されます。メッセージはholepaint関数によって表示されます。また、水を流すとflag12がtrueになります。
else if (mpt==120 && flag12==true && flag13==false) {
px = dx;
py = dy;
flag13=true//バケツに水を汲んだ(2回目)
fieldpaint();
waterpaint();
}
1回目に水を流した状態(flag12がtrue)で再び水を汲みに行くとflag13がtrueになります。
else if (mpt==119 && flag13==true && flag14==false) {
px = dx;
py = dy;
flag14=true//穴に水を流した(2回目)
fieldpaint();
secondholepaint();
}
そして、flag13がtrueの状態で水を流すとflag14がtrueになり、2回目の水を流したことになります。2回目に水を流した時にはsecondholepaint関数が実行され、1回目とは違うメッセージが表示されます。
else if (mpt==120 && flag14==true && flag15==false) {
px = dx;
py = dy;
flag15=true//バケツに水を汲んだ(3回目)
fieldpaint();
waterpaint();
}
else if (mpt==119 && flag15==true && flag16==false) {
px = dx;
py = dy;
flag16=true//穴に水を流した(3回目)
fieldpaint();
thirdholepaint();
}
同じようにもう一度水を汲んでflag15がtrueになり、最後に水を流してflag16がtrueになります。この時にthirdholepaint関数が実行され、おもちゃを手に入れたことを伝えるメッセージが表示されます。
今回意識したポイントは細かくflagを設定したことです。
細かくflagを設定したことにより状況を細かく分け、段階的に表示されるメッセージを分けられるようにしました。
かなり説明がわかりずらかったと思いますが、今回はこんな感じの仕掛けを作りました。
次回はまた別の仕掛けをつくっていきたいと思います。
参考文献
田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年
田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年
田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版～ブラウザゲームづくりで HTML&CSS も身につく！』インプレス, 2022年
使用した素材サイト
ぴぽや倉庫
https://pipoya.net/sozai/
DOTOWN
https://dotown.maeda-design-room.net/
.png)
