この記事はだいたい 9
分前後で読めます。
「Scratchでゲームを作ってみたいけど、何から始めればいいの？」——そんな方におすすめなのが迷路ゲームです。使うブロックは基本的なものばかりなのに、「壁で止まる」「ゴールでクリア」というゲームらしい要素がしっかり入っていて、完成したときの達成感も抜群。親子で一緒に作るのにもぴったりのテーマです。
この記事では、実際に私が作ったときの手順を順番にご紹介します。途中でハマったトラブル——完成したはずなのに矢印キーがまったく効かなくなった事件——とその解決方法も、あわせてお話ししますね。
目次
Outline
完成イメージ
矢印キーでネコを上下左右に動かし、黒い壁にぶつかると進めず、緑のゴールにたどり着くと「クリア！」と表示される。そんなシンプルな迷路ゲームを目指します。
使うものはScratch（オンライン版・無料）と、マウス・キーボードだけです。特別な準備はいりません。
下記がコードの全文です。
手順1：背景に迷路を描く
まずは迷路のコースを背景として描いていきます。画面右下の「背景を選ぶ」から筆マークの「描く」をクリックして、背景エディタを開きましょう。塗りつぶしツールで背景全体をいったん白にしたら、筆ツールを少し太めに設定して黒い壁を描いていきます。最後に、ゴール地点となる緑色の丸を描いておきます。
ここで大事なのが、壁の色を必ず黒一色で統一することです。このゲームは「黒に触れたら壁」「緑に触れたらゴール」というように色で判定する仕組みになっています。途中で壁の色が変わってしまうと、そこだけ壁判定が効かなくなってしまうので気をつけてください。
手順2：キャラクターを準備する
キャラクターは、最初からいるネコのスプライトをそのまま使えばOKです。ただし迷路の通路を通れるように、スプライトの「大きさ」を30くらいに小さくしておきましょう。あとはネコをスタート地点（白いエリア）にドラッグして置き、そのときのx座標・y座標の数値をメモしておきます。この数値は次の手順で使います。
手順3：矢印キーで動かす＆壁で止まるコード
ここがこのゲームの心臓部です。ネコのスプライトに、次のコードを組んでいきます。
イベント「緑の旗が押されたとき」
動き「x座標を ●、y座標を ● にする」 ←手順2でメモしたスタート位置の数値
制御「ずっと」
制御「もし〈調べる「右向き矢印キーが押された」〉なら」
動き「x座標を 5 ずつ変える」
制御「もし〈調べる「黒色に触れた」〉なら」
動き「x座標を -5 ずつ変える」
このコードの考え方は「いったん動いてみて、壁に触れていたら同じ分だけ戻す」というものです。右キーが押されたら、まず5歩右へ動く。その場所で黒い壁に触れていたら、5歩左に戻す。触れていなければそのまま進む——という流れですね。戻す動きは一瞬なので、見た目には壁の手前でピタッと止まったように見えます。Scratchのゲーム作りでよく使われる定番のテクニックです。
同じ「ずっと」の中に、左・上・下の3方向も追加していきます。
制御「もし〈調べる「左向き矢印キーが押された」〉なら」
動き「x座標を -5 ずつ変える」
制御「もし〈調べる「黒色に触れた」〉なら」
動き「x座標を 5 ずつ変える」
制御「もし〈調べる「上向き矢印キーが押された」〉なら」
動き「y座標を 5 ずつ変える」
制御「もし〈調べる「黒色に触れた」〉なら」
動き「y座標を -5 ずつ変える」
制御「もし〈調べる「下向き矢印キーが押された」〉なら」
動き「y座標を -5 ずつ変える」
制御「もし〈調べる「黒色に触れた」〉なら」
動き「y座標を 5 ずつ変える」
このとき気をつけたいのは、動いた方向と同じ座標軸で、逆向きに同じ量だけ戻すというルールです。たとえば上（y座標）に動いたのにx座標で戻してしまうと、壁にめり込んだまま横にズレていく変な動きになってしまいます。実は私も最初ここを間違えてしまい、あとで直すことになりました。
手順4：ゴール判定を作る
最後に、ゴールにたどり着いたときの処理を「ずっと」の中の一番下に追加します。
制御「もし〈調べる「緑色に触れた」〉なら」
見た目「クリア！ と 2 秒言う」
制御「すべてを止める」
これで、ネコが緑のゴールに触れると「クリア！」と表示され、ゲームが終了します。
つまずきポイント（実体験）
ここからは、私が実際にハマったトラブルとその解決方法をお話しします。同じ症状で困っている方の参考になれば嬉しいです。
完成したと思って緑の旗を押したところ、矢印キーを押してもネコがピクリとも動きませんでした。キーボードが壊れたのかと思うほど、何も起きなかったんです。
いろいろ調べた結果、犯人は「すべてを止める」ブロックの位置でした。本来は「もし〈緑色に触れた〉なら」の中に入れるべきところを、うっかりその外側に置いてしまっていたんです。
この位置に置くと何が起きるか。緑の旗を押すと「ずっと」ループが1周目を実行し、その最後で無条件に「すべてを止める」が実行されて、プログラム全体が一瞬で停止してしまいます。つまりループは1周しか回らず、キー判定が生きている時間はほんの一瞬。だから矢印キーが効かないように見えていたわけです。直し方は簡単で、「すべてを止める」を「もし〈緑色に触れた〉なら」の中に入れ直すだけ。ブロックの位置がひとつ違うだけで、まったく関係なさそうな「キーが効かない」という症状になって現れるのが、プログラミングの面白くて少し怖いところだなと思いました。
ちなみに、原因を探すときに役立ったのが「切り分けテスト」という方法です。キーが効かないとき、原因がキーボード入力なのかプログラムなのか分からなかったので、「スペースキーが押されたとき、x座標を10ずつ変える」という単独のテストコードを一時的に足してみました。このコードは「ずっと」ループとは関係なく動くので、スペースキーで動けばキー入力自体は正常だと分かります。実際に動いてくれたので、「原因はループのほうにある」と絞り込むことができました。うまく動かないときは、こうして小さなテストコードで原因を半分ずつ絞っていくのがおすすめです。
このほかにも、スタート位置が黒い壁に重なっていると「動く→戻す」が毎回発動してその場から動けなくなるので、スタートは必ず白いエリアに置くこと。それから、見た目は同じ黒でも色の数値がわずかに違うとScratchは別の色と判定してしまうので、色判定がうまくいかないときは「黒色に触れた」ブロックの色をスポイト機能でステージ上の壁から直接取り直すこと。この2点も覚えておくと安心です。
まとめ
迷路ゲームは「動いて、壁なら戻す」というシンプルな仕組みで作れます。壁やゴールは色で判定していて、色はスポイトで取るのが確実でした。そして今回いちばんの学びは、「すべてを止める」の位置ひとつで動きがまるで変わってしまうこと。うまく動かないときは、小さなテストコードで原因を切り分けていくと解決に近づきます。
ブロックひとつの位置で「キーが効かない」なんて症状が出るとは驚きでしたが、原因を探すプロセスそのものが良い勉強になりました。ぜひ親子で挑戦してみてください。
