謎解きの仕掛け2
前回に引き続き、今回も謎解きの仕掛けを紹介します。
まず、新たにマップを追加したのでそちらを紹介します。
.png) |
| 食堂 |
.png) |
| キッチン |
今回作成したマップは上の2つです。
お城にあるような食堂をイメージしてつくりました。
食堂の隣には小さなキッチンのような部屋もつくりました。
食堂には7つのイスが並んでいて、それぞれテーブルの上にパンが乗った皿が置いてありますが、真ん中の赤いイスのところには何も置いていません。また、一番左端の席は皿だけ置いてあります。
食堂のとなりのキッチンに移動すると、テーブルの上にケーキが置いてあるので、まずそのケーキを入手します。
そして、その状態で食堂の赤いイスに移動すると、テーブルの上にケーキを置くことができます。
.png) |
| ケーキを置いたときの画面 |
すると、画面上側のカーテンが開き、新しいマップに移動できるようになります。
以下は今回作成したソースコードです
else if (mpt==85 && flag5==false) {
px = dx;
py = dy;
flag5=true
fieldpaint();
cakepaint();
}
キッチンでケーキを入手すると、flag5がtrueになるようにしています。
else if (mpt==72 && flag5==true && flag6==false) {
px = dx;
py = dy;
flag6=true//テーブルにケーキを置いた
fieldpaint();
kingpaint();
}
function kingpaint() {
document.getElementById("sound").play();
gc.fillStyle = "Black";
gc.fillRect(200, 300, 400, 400);
gc.fillStyle = "White";
gc.font = "12px serif";
gc.fillText("テーブルの上にケーキを置いた", 250, 350);
}
そして、flag5がtrueの状態で赤いイス(mpt72)に移動すると、kingpaintという関数が実行され、「テーブルにケーキを置いた」というメッセージが表示されます。また、flag6がtrueになります。
if (mpt==86 && flag6==true) {
gc.drawImage(imgCake, x * 40, y * 40, 40, 40);
}
else if (mpt==87 && flag6==true) {
stage = 8;
switch (e.keyCode) {
case 37: case 39: px = 19-dx; py = dy; break; //左or右
case 38: case 40: px = dx; py = 10-dy; break; //上or下
}
fieldpaint();
}
else if (mpt==88 && flag6==true) {
px = dx;
py = dy;
fieldpaint();
}
そして、flag6がtrueになると、赤いイスの前(mpt86)にケーキの画像が描画されます。
また、カーテンが開いた部分(mpt87,88)が通行可能になります。
以上が今回作成した仕掛けです。
次回も新しいマップなどを紹介していきます。
参考文献
田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年
田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年
田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版～ブラウザゲームづくりで HTML&CSS も身につく！』インプレス, 2022年
使用した素材サイト
ぴぽや倉庫
https://pipoya.net/sozai/
DOTOWN
https://dotown.maeda-design-room.net/
.png)
