謎解きの仕掛け6
今回は、また新しい謎解きの仕掛けを作ったので、そちらを紹介していきます。
今回作った仕掛けは、床のパネルを踏むと色が変わり、決められた場所に色を塗るとドアが開くというものです。
初期状態 |
パネルを踏んだ後の様子 |
マップの初期状態では、すべてのパネルが白い状態になっており、プレイヤーがパネルを踏むと、踏んだパネルが赤くなります。
赤くなったパネルをもう一度踏むと白いパネルに戻ります。
特定のパネルのみを赤にしてマップ右端のスイッチを押すと、別のマップのドアが開きます。
以下がソースコードの解説です。
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 && flag26==true) {
gc.drawImage(imgRedfloor, x * 40, y * 40, 40, 40);
}
パネルは全部で52枚あり、それぞれのパネルに異なるmptと、それに対応するflagが与えられています。
パネルに与えられたmptは143~194で、対応するflagは26~77です。上のコードはmpt143のパネルのコードです。
プレイヤーが白いパネルを踏むと、そのパネルに対応するflagがtrueになり、赤いパネルの画像(imgRedfloor)が描画されます。
その状態でもう一度同じパネルを踏むと、flagがtrueからfalseになり、白いパネルの画像(imgWhitefloor)が描画されます。
function checkpaint() {
if (flag26==false && flag27==true && flag28==true && flag29==true && flag30==true &&
flag31==true && flag32==true && flag33==true && flag34==true && flag35==true && flag36==true &&
flag37==true && flag38==true && flag39==true && flag40==true && flag41==true && flag42==true &&
flag43==true && flag44==true && flag45==true && flag46==true && flag47==true && flag48==true &&
flag49==true && flag50==true && flag51==true && flag52==true && flag53==true && flag54==true &&
flag55==true && flag56==true && flag57==true && flag58==true && flag59==true && flag60==true &&
flag61==true && flag62==true && flag63==true && flag64==true && flag65==true && flag66==true &&
flag67==true && flag68==true && flag69==true && flag70==true && flag71==true && flag72==true &&
flag73==true && flag74==false && flag75==false && flag76==false && flag77==false) {
doorpaint();
flag78=true;//パネル正解
}
}
マップ右端のスイッチを押すと、checkpaint関数が実行され、それぞれのパネルに対応するfalgがtrueかfalseかを確かめます。すべてのflagが正しい状態であればdoorpaint関数が実行され、別のマップのドアが開きます。
今回作成した仕掛けの大まかな解説はこんな感じです。
次回はまた別の仕掛けを作っていく予定です。
参考文献
田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年
田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年
田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版~ブラウザゲームづくりで HTML&CSS も身につく!』インプレス, 2022年
使用した素材サイト
ぴぽや倉庫
https://pipoya.net/sozai/
DOTOWN
https://dotown.maeda-design-room.net/