謎解きの仕掛け5
今回は、謎解きの仕掛けとして、スイッチを押すとマップが切り替わる仕掛けをつくったので、そちらを紹介していきます。
マップ上に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: case 39: px = 19; py = 4; break; //左or右
}
fieldpaint();
}
else if (mpt==133 && flag21==true) {
stage = 13;
switch (e.keyCode) {
case 37: case 39: px = 19; py = 4; break; //左or右
}
fieldpaint();
}
else if (mpt==133 && flag22==true) {
stage = 14;
switch (e.keyCode) {
case 37: case 39: px = 19; py = 4; break; //左or右
}
fieldpaint();
}
- mpt132:スイッチ
- mpt133:スイッチのある部屋の通路の左端の部分
今回は、flag21～23までの3つのflagを使います。flag23のみ初期状態ではtrueになっています。
初期状態からスイッチ(mpt132)を1回押すとflag21がtrueになり、他のflag22、23はfalseになります。その状態で隣の部屋に移動すると変数stageに13が代入され、stage13が描画されます。
もう一度スイッチを押すと、今度はflag22がtrueになり、flag21、23はfalseになります。その状態で隣の部屋に移動すると変数stageに14が代入され、マップがstage14に切り替わります。
さらにもう一度スイッチを押すとflag23がtrueになる、flag21、22はfalseになります。その状態で隣の部屋に移動すると変数stageに12が代入され、マップがstage12に切り替わります。
そして、次にスイッチを押すとまたflag21がtrueになり、stage13に切り替わります。
このようにして、スイッチを押すと3種類の部屋が順番に切り替わっていきます。
今回は、マップを切り替える仕掛けを作りました。今後も、もっといろんな仕掛けをつくっていきたいと思います。
参考文献
田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年
田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年
田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版～ブラウザゲームづくりで HTML&CSS も身につく！』インプレス, 2022年
使用した素材サイト
ぴぽや倉庫
https://pipoya.net/sozai/
DOTOWN
https://dotown.maeda-design-room.net/
.png)
