子どもがScratchで迷路を作ったのに、キャラクターが壁を通り抜けてしまう。「壁に触れたら止めたいのに、どこにブロックを足せばいいの?」と迷うことがあります。
動かす直前の座標を覚え、移動後に壁に触れていたら、その座標へ戻す方法で組んでみましょう。ただし、大きく動かして壁の向こうへ飛び越える場合は、移動を小さく分ける工夫も必要です。
ここでは、上下左右に動く迷路を対象に、壁の前で止まる仕組みだけを作ります。以下の手順やテスト表は、公式教材の接触判定を踏まえた本記事の制作例です。ジャンプ、重力、動く壁は対象に含めません。
壁を描くだけでは「通れない場所」にはならない
Scratchの迷路では、描いた壁に対して「触れたかどうかを調べ、その結果で動きを変える」処理を用意します。Scratch公式の条件分岐カードの迷路制作例(英語PDF)でも、壁の色への接触を条件として使う方法が紹介されています。
今回作るのは、壁に触れたらスタートへ戻る迷路ではありません。直前の移動だけを取り消し、壁の手前にとどまる迷路です。
順番は「覚える→動く→調べる→必要なら戻す」。まず右方向だけで作り、できてから残りの方向へ広げます。最初から複雑な迷路全体を直そうとせず、広い場所と一本の壁で試すと、確認する対象を絞れます。
最初は単色の壁と、動かないキャラクターで準備する
この制作例では、背景に単色の壁を描き、操作するキャラクターを一体置きます。壁の色は、通路や飾りに使っていない色を選んでください。
「調べる」にある「[色]に触れた」ブロックの色欄を開き、スポイトで壁の内側を選びます。色を目で似せるのではなく、実際の壁から取る方法は、ハーバード大学CS50のScratch教材(英語)でも説明されています。
- 開始位置では、キャラクターを壁から離して置く。
- 通路には、キャラクターが通れる余裕を持たせる。
- 試している間は、コスチュームや大きさを変えない。
- 以前作った移動用のスクリプトは、いったん切り離す。
古い移動処理を残したまま新しい処理を足すと、どちらが位置を変えたのか追いにくくなります。壁判定を組む間は、これから作る移動処理だけで確認しましょう。
通路の幅も大切です。Scratch公式の迷路制作カード(英語PDF)では、通路だけでなく角も通れる大きさにするよう案内しています。
右へ動く処理に「移動前のx座標」を入れる
操作するキャラクターを選び、「変数」で「移動前x」と「移動前y」を作ります。この例では、どちらも「このスプライトのみ」の変数にします。
下の文字は、Scratchのブロックを上から並べる順番です。貼り付けて実行するコードではありません。字下げした部分を、それぞれのブロックの内側に入れてください。「1」は、小さい移動で確かめるための設定例です。
緑の旗が押されたとき
ずっと
もし[右向き矢印キーが押された]なら
[移動前x]を(x座標)にする
x座標を(1)ずつ変える
もし[壁の色に触れた]なら
x座標を(移動前x)にする
「移動前x」に入れるのは、現在のx座標を表す丸いブロックです。開始位置の数字を手入力するのではありません。右へ動くたびに、その直前の位置を覚え直します。
「x座標を1ずつ変える」と「x座標を移動前xにする」も区別してください。前者は今の位置から動かす処理、後者は覚えた位置に置き直す処理です。
例えば、廊下を右へ進んだ先に壁がある場面。壁に触れていなければ新しい位置に残り、触れていれば一つ前の位置へ戻ります。これを繰り返す設計で、壁へ進み続けても位置が先へ進まない状態を作ります。
この方法は、移動前の位置が壁の外にあることが前提です。最初から壁に重なっている場合は、まずキャラクターを通路へ置き直してください。
上下左右は、方向ごとに「動く・調べる」を一組にする
右方向で壁を越えなくなったら、同じ「ずっと」の中へ、左・上・下の条件を加えます。保存する座標と動かす向きを、次のように対応させましょう。
| 押すキー | 動く前に覚える値 | 試す移動 | 壁に触れた場合 |
|---|---|---|---|
| 右 | 移動前xにx座標 | x座標を1増やす | x座標を移動前xに戻す |
| 左 | 移動前xにx座標 | x座標を1減らす | x座標を移動前xに戻す |
| 上 | 移動前yにy座標 | y座標を1増やす | y座標を移動前yに戻す |
| 下 | 移動前yにy座標 | y座標を1減らす | y座標を移動前yに戻す |
各方向の「もしキーが押されたなら」の中に、保存・移動・接触判定・復帰をまとめます。右と上を押した場合も、横移動を調べてから縦移動を調べる構成にします。
横と縦を両方動かした後、まとめて元の位置へ戻す構成とは分けて考えてください。本記事の案は、壁に向かう横移動だけを取り消し、通れる縦方向は動けるようにすることを狙ったものです。
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。
角での動きは、キャラクターの形や通路によっても変わります。組み終わったら、直線だけでなく、曲がり角とキーの同時押しも試しましょう。
細い壁を越えるなら、速さではなく「一回の移動」を見直す
この設計では、動かした後の位置で接触を調べます。そのため、一回の移動を大きくすると、細い壁をまたいだ位置へ移り、調べる時点では壁に触れていないケースが考えられます。
速く動かしたい場合も、まずは「小さく動く→壁を調べる」を一組として繰り返す案を試してください。例えば、右方向の保存・移動・判定・復帰を「3回繰り返す」に入れ、毎回1ずつ動かします。この数字は比較用の設定例で、すべての作品に最適な値ではありません。
「3ずつ動いてから一度だけ調べる」のと、「1ずつ動いて毎回調べる」のは、確認する位置が異なります。繰り返す場合も、移動前の座標は各回の移動直前に保存し直します。
まず小さい移動で壁が機能することを確かめ、その後で操作感を調整しましょう。細い壁を越えたという理由だけで、迷路全体を描き直す必要はありません。
壁判定テスト表で「どの形で越えるか」を確かめる
次の表は、本記事の実装案を確認するためのテスト表です。「できた・できない」だけでなく、越えた場所と押していたキーを空欄に残してください。
| 試す場所・操作 | 目指す動き | 結果・気づいたこと |
|---|---|---|
| 壁に右から、左から近づく | どちら側でも越えない | ____ |
| 横向きの壁へ上下から近づく | 上下とも壁の手前にとどまる | ____ |
| 角で右と上を同時に押す | 壁を越えず、通れる方向へ進める | ____ |
| 最も狭い通路を通る | 途中や角で引っかからない | ____ |
| 細い壁へ向かって押し続ける | 反対側へ飛び越えない | ____ |
全部の壁を越えるなら、選んだ壁の色と、各方向の移動直後に判定が入っているかを見直す候補にします。特定の通路だけ進めないなら、壁とキャラクターの間に通れる余地があるかを確認しましょう。
背景の飾りの前でも止まる場合は、壁と同じ色を使っていないか見てください。この制作例は「壁という意味」ではなく「指定した色」に反応する設計だからです。
よくある質問(FAQ)
「もし端に着いたら、跳ね返る」では壁を止められませんか?
今回作りたいのは、画面の外周ではなく、迷路の内側に描いた壁に対する処理です。本記事の案では、壁の色への接触を調べ、直前の座標へ戻します。
壁に触れたら、毎回スタートへ戻してもよいですか?
それも迷路のルールとして選べます。ただし、「その場で止まる迷路」とは別の遊び方になります。本記事の仕組みを使う場合は、開始位置ではなく、各移動の直前に保存した座標へ戻してください。
色を塗り直したら壁を通れるようになりました。
接触判定に指定した色も見直してください。壁の色を変更した後は、スポイトで選び直し、まず一本の壁で確認すると対象を絞れます。途中だけ別の色になっている部分も確認しましょう。
幼児と一緒でも取り組めますか?
変数や条件分岐を一度に組むことが難しければ、大人が右方向だけ準備し、子どもは「壁を越えたか」「通路を通れたか」を試す役にする方法があります。年齢だけで区切らず、操作できる部分を分担してください。
体験教室で、この迷路の作り方を相談できますか?
CotoMiraiは、年齢・興味・理解度に合わせた個別指導を行っています。学び方はスクール利用の案内をご覧ください。家庭のScratch作品を体験で扱えるか、今回の壁判定を相談できるかは未確認のため、申し込み時にお問い合わせください。
南青山のCotoMiraiは、青山一丁目・乃木坂から通える教室です。所在地や経路は教室紹介・アクセスで確認できます。無料体験を希望する場合は、対象年齢や申し込み手順を公式案内で確認してください。
参考にした情報
- Scratch公式:Conditional Statements Cards(迷路制作・色への接触判定)
- Harvard CS50:Introduction to Programming with Scratch — Conditions
- CotoMirai:スクール利用
関連する記事
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。