スクラッチで謎解き脱出ゲームの作り方

今回つくるゲーム

難易度

今回は謎解き脱出ゲームを作っていきます。用意された３つの部屋に隠された謎を解明して部屋から脱出できればクリアです。今回は練習用に簡単なトリックを使っています。今回のプログラムが理解できると自分だけの脱出ゲームを作ることができるようになりますので頑張って取り組んでみてください。

まずは実際にゲームをプレイしてみてください。５分もあれば謎が解けると思います。

脱出ゲームの全容

では、答え合わせです下の動画のように謎を解いていきます。

1.ぞうきんをゲット
2.カレンダーの汚れをぞうきんで拭く
3.花びらをクリックしてカレンダーと同じ色に合わせる
4.ゲットしたカギを使ってドアを解錠する

はじめに

まず、以下をリミックスしてください。今回作るゲームに必要な素材が揃っています。
背景は３種類でスクラッチに初めから用意されている背景をベースに少し加工しています。

謎解き脱出ゲーム_素材

基本設定をする

背景の下部分にはアイテムが配置される３つの窓に加えて丸矢印と三角矢印があります。これらはそれぞれ戻る機能と次背景に移動する機能になっています。

戻る機能

まずは戻る機能についてコードを書いていきます。まず戻るのスプライトを選択します。

戻るのスプライトのコードに以下のように書きます。このスプライトが押されると戻るのメッセージを送るだけのシンプルなコードです。これから様々なシーンで戻るボタンが押されると一つ前に戻れるようにコードを書いていきます。

次背景に移動する機能

次に３つの背景を切り替えられるようにしていきます。次背景のスプライトにコードを書いていきます。

緑の旗を押した時に、最初は背景１に設定され、次背景の矢印を押していく度に次の背景に切り替わっていきます。背景は６つ用意していますが、まずここでは背景１〜３までを使います。背景が１なら次は２、２なら次は３、３なら次は１に切り替わっていきます。

実際に次背景の矢印を押すと背景が正しく切り替わるか確認してください。
背景４〜６は後ほど使います。

ぞうきんをゲットする

ここからは答えの順番にプログラムを組んでいきます。まず最初にぞうきんを取るところのプログラムを組んでいきます。ぞうきんは背景１のベッドの上に置いてありますが、背景に描かれているのでクリックすることができません。ですので、まずクリックできるエリアを設定します

クリックエリアを設定

クリックエリア設定用に新しいスプライトを作ります。四角の描画ツールを使用し、ぞうきんの絵にかぶさるように位置と大きさを調整します。色は何色でも構わないです。このとき座標は必ず(0,0)にしておきましょう。

クリックエリアのコード

次にクリックエリアのコードを書いていきます。ステージが背景１のときに表示をしますが、幽霊効果を99にすることで透明にしながらもクリックできる状態にします。

そして、このスプライトが押された時に”ぞうきん拡大”のメッセージが送られるようにします。

ぞうきんを拡大する

次にぞうきんのスプライトに移動します。このスプライトが表示されることでぞうきんが拡大されたように見せます。最初は隠しておいて、ぞうきん拡大のメッセージを受け取った時に表示されて、２秒たったらまた隠します。そしてその時にぞうきんゲットのメッセージを新たに送ります。

また「ぞうきんゲット済み？」という変数を用意しておいて、ぞうきんをゲットしたら変数の値が１になるようにしておきましょう。こちらの変数は最後の背景の設定時に活用します。

ぞうきんをゲットする

次にアイテム２のスプライトに移動します。このスプライトの２つ目のコスチュームにぞうきんが設定されています。ここは単純に最初はコスチュームを１に設定し、ぞうきんゲットのメッセージを受け取るとコスチューム２に変更します。

動きを確認する

これでぞうきんをゲットする一連の動きが完成です。以下のような動きになれば成功です。

カレンダーからヒントを得る

次にカレンダーからヒントを得る部分のプログラミングを行なっていきます。カレンダーを拡大し、そこについた汚れを先ほどゲットしたぞうきんで拭くとヒントが現れます。

クリックエリアを設定

先ほど同様、スプライトを追加してクリックエリアを設定していきます。

クリックエリアのコード

クリックエリアのコードも先ほどのぞうきんと同じ考え方です。以下のように書いてください。

カレンダーを拡大する

次にカレンダーのスプライトに移動し、以下のようにコードを書きます。ここは少しぞうきんとコードが違います。カレンダー拡大を受け取った時に表示しますが、自動的に隠さず、戻るを受け取った時に隠すようにします。つまり丸矢印の戻るボタンを押した時に背景に戻るようにします。なぜなら、表示をした後に汚れを消さなければならないからです。

またカレンダー拡大？という変数を作り、カレンダーが拡大して表示されている時だけこの変数の値が１になるようにします。

ぞうきんを利用して汚れを消す

次にぞうきんを利用してカレンダーの汚れを消していきます。アイテム２（ぞうきん）をクリックするとぞうきんが利用されカレンダーの汚れが落ちるようにします。
アイテム２のスプライトに移動して以下のようにコードを追加します。アイテム２のスプライトが押された時にぞうきん利用のメッセージを送りますが、それはコスチューム番号が２（つまりぞうきんをゲットした状態）であり、カレンダーが拡大している時に限られます。

次に、改めてカレンダーのスプライトに戻り、以下のようにコードを追加します。
ぞうきん利用のメッセージを受け取ったときにコスチュームが２〜４まで少しづつ移り変わり、汚れが落ちていくような表現をします。さらに、カレンダー拭き済みという変数を用意して拭き終わったときに変数の値を１にするようにします。こちらも最後の背景の設定時に利用します。

動きを確認する

ここまできたら動きを確認します。ぞうきんをゲットした後の動きが以下のようになれば成功です。

花の絵の謎を解いてカギをゲットする

ここからが謎解きのクライマックスです。花の絵を拡大して花びらをクリックすると色が変わり、先ほどのカレンダーの５角形の色にあわせると絵が動いてそこからカギが出現します。このようなトリックは謎解きゲームの定石です。

クリックエリアを設定

ぞうきん、カレンダー同様に、花の絵がクリックできるようにまずはクリックエリアを設定していきます。

クリックエリアのコード

クリックエリアのコードもこれまでと同様です。

花の絵を拡大する

次に花の絵のスプライトに移動して以下のようにコードを書き、クリックエリアがクリックされると花の絵が拡大表示されるようにします。戻るを受け取ると隠すようにしておきましょう。

花びらをクリックできるようにする

これで花の絵は表示されますが、このままでは花びらをクリックして色を変えることはできません。花の絵をバラして一つ一つを独立したスプライトにすることで、それができるようにします。

これは以前、動く塗り絵の作り方でも説明した手法です。こちらも是非トライしてみてください。

まず、花の絵のコスチュームに移動して一つの花びらだけを選択してコピーします。

そして、新しいスプライトを追加して、コスチューム部分に先ほどコピーした花びらを貼り付けます。これで一番上の花びらだけのスプライトが完成です。

花びらの色を変える

次に花びら１のコードを書いていきます。花の絵表示を受け取った時に花びら１も表示し、戻る・花の謎解明のメッセージを受け取った時に隠します。（花の謎解明は後から出てきます）

そして、花びらがクリックされるたびに色の効果が５０づつ変化していき、クリックされた回数が花びら１の色として積み上がっていきます。

色の効果は２００で１巡するので今回の場合は

0（赤）→50（緑）→100（水色）→150（紫）→200（赤）→250（緑）

というように循環していきます。

また花びら１は最前面から一つ奥に設定しておきます。この後出てきますが、最前面は花の中央になります。

他の花びらも作る

花びらは全部で５枚あるので、全て新しいスプライトを作り、同様にコードを書いていきます。

最後に花の中心部分の白い丸もスプライトを追加しますが、色は変えません

花を合体させる

ここまでできたら、花の絵のコスチュームに戻り、コスチューム１の花の部分をすべて削除します。

そのうえで、花の絵のエリアをクリックして表示させてみてください。先ほど作った花びらが合成されて一つの花になっていることがわかります。

そして、花びらをクリックすると色が変わっていきます。わかりやすくするために花びら１の色の変数だけを表示していますが、花びらをクリックするたびに色が変わって、変数も１づつ変わっているのがわかります。

花の絵の謎を解明する

以下の図のように花びらの色を、カレンダーの色の配置と合わせていくことで、謎が解明されます。

花の絵のコードを以下のように変更していきます。追加するパートとして大きく二つに分かれます。
一つが謎解明の条件でもう一つがカギをゲットする動きです

謎を解明の条件については拡大すると以下のようになります。それぞれの花びらの色の値を４で割ったあまりで色を規定できます。

あまり０：赤
あまり１：緑
あまり２：水色
あまり３：紫

カギをゲットする動きを拡大したものは以下となります

カギをゲットする

最後に、アイテム１のスプライトに移動してカギをゲットするコードを書きます

動きを確認する

以下のように動けば成功です

ドアを開けてゴールする

先ほどゲットしたカギでドアを開けてゴールします。

クリックエリアを設定

これまで同様、ドアのクリックエリアを設定します。

クリックエリアのコード

次にクリックエリアのコードを書きます。これもこれまで同様です。

カギを利用する

アイテム１のスプライトに移動しぞうきんの時と同様に、クリックされた時の挙動を追加します。

ドアを解錠する

最後にカギを利用してドアを解錠します。ドアのスプライトに移動し以下のようにコードを書きます。

これで一旦完成です

最後の仕上げ）背景の調整

最後の仕上げとして、背景の調整を行なっていきます。
たとえば、ぞうきんをゲットした後にも、ベッドのうえにぞうきんがあるのはおかしいですよね。

ぞうきんゲット済み→ベットからぞうきんが消える（1-2）
花の絵の謎解決済み→花の絵が壁からずれた状態になる（2-2）
カレンダー拭き済み→カレンダーが拭かれた状態になる（3-2）

というようにゲームの進行に違和感がないよう３つの追加背景が用意されています。

次背景のスプライトのコードに移動して、まず以下のように３つの背景の条件を追加します。

そして、背景１〜３は条件によって1-2〜3-2に変わります。
それが以下の通りです。上記コードの背景を＊＊にするの部分を全て以下のように置き換えてください。

とてつもなく長いコードになりますが、一つ一つはとても単純な条件です。

以下にサブ背景を活用するコードをまとめましたので、このとおり改変してください。

今回のすべてのコード

今回作成したすべてのコードはこちらに公開されていますのでリミックスするなり自由に活用してください。