子どもがScratchでパズルを作ったものの、ピースを正しい場所へぴったり置くのが難しい。少しずれただけで不正解になると、遊ぶ人も困ってしまいます。
マウスを離した瞬間に置き場所までの距離を調べ、十分近ければ同じ座標へ移すと、ピースが吸い付くように収まります。この記事では、ピース1個と置き場所1個を使い、「近くで離したら吸着する・遠ければ元に戻る」仕組みを作ります。
「触れたら正解」ではなく「離した場所」で決める
今回は、ピースを枠へ重ねている途中には正解を決めません。ボタンを押している間は動かし、離してから置き場所を判定します。
先に判定すると、ピースが枠の上を通過しただけでも吸着してしまうからです。操作を次の三つに分けて考えましょう。
- ピースをつかむ。
- ボタンを押している間、マウスについて動かす。
- 離したら距離を調べ、吸着させるか元へ戻す。
「枠に触れたか」と「枠の中心へ近づいたか」も別の条件です。Scratchには、接触を調べるブロックと距離を調べるブロックがそれぞれあります。今回は、端が少し触れただけで正解にしないため、距離を使います。ブロックの役割は、Scratch公式の接触判定の説明と距離を調べるブロックの説明で確認できます。
まずはピースと置き場所を一つずつ用意する
初めから何個も並べず、動かすスプライトを「ピース」、正解位置を示すスプライトを「置き場所」と名付けます。名前を分けておくと、ブロックの選択先を見間違えにくくなります。
ピースは小さめの丸、置き場所はそれより大きな薄い丸など、重なりが見える組み合わせにします。どちらも、コスチュームの中央に絵を描いてください。ここでは回転や形の一致は判定せず、位置だけを扱います。
| 設定するもの | この記事の作例 | 役割 |
|---|---|---|
| ピースの開始位置 | x座標：-120、y座標：0 | つかむ前と、不正解だったときの位置 |
| 置き場所 | x座標：100、y座標：0 | 吸着後にそろえる位置 |
| 吸着する条件 | 置き場所までの距離が20未満 | 少しずれた置き方を受け入れる範囲 |
この座標と距離は、この記事で試すための設定例です。Scratchの決まりや、年齢別の推奨値ではありません。まず同じ設定で動きを確かめ、その後で作品に合わせて変えます。
「置き場所」には、緑の旗で指定位置へ移動する処理を付けます。ピースに隠れる側に置くため、最背面へ移動する処理も加えましょう。
緑の旗が押されたとき
x座標を100、y座標を0にする
最背面へ移動するピースを運び、離した後に距離を調べる
次の処理は、すべて「ピース」側に組みます。下の表記はブロックを組む順番を示したもので、文字を貼り付けて実行するコードではありません。
つかむ条件は二つを「かつ」でつなぐ
「マウスが押された」だけでは、ステージのどこを押してもピースが動きます。「マウスのポインターに触れた」も組み合わせ、両方が成り立つまで待つようにします。
Scratch公式のマウスが押されたことを調べる説明では、この条件は画面のどこで押しても成立するとされています。ピースを選ぶ条件を別に用意するのがポイントです。
動かす繰り返しの外に、置き場所判定を置く
緑の旗が押されたとき
x座標を-120、y座標を0にする
最前面へ移動する
ずっと
「マウスが押された」かつ
「マウスのポインターに触れた」まで待つ
「マウスが押された」ではない、まで繰り返す
マウスのポインターへ行く
もし「置き場所までの距離 < 20」なら
置き場所へ行く
でなければ
x座標を-120、y座標を0にする「〜まで繰り返す」の条件には、緑色の「〜ではない」を入れ、その中に「マウスが押された」を入れます。つまり、ボタンを離すまで移動を続ける組み方です。条件が成立すると繰り返しを抜ける動作は、公式の「〜まで繰り返す」の説明でも確認できます。
距離を調べる「もし」は、移動の繰り返しの中ではなく、その下に置きます。ここが、運んでいる途中と置き終わった後を分ける境目です。
吸着するときの「置き場所へ行く」は、青色の「〜へ行く」ブロックの選択肢を変更して作ります。このブロックは、選んだスプライトの座標へ移動するものです。詳しくはScratch公式の移動先を選ぶ説明を参照してください。
なお、この作例では、つかむとピースの中心がマウス位置へ移ります。端をつかんだ位置を保つ処理や、吸着後に動かせなくする処理は入れていません。
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。
吸着する範囲は、三つの置き方で比べる
組み終えたら、ステージを大きく表示して緑の旗を押し、次の置き方を試します。うまく置けるかだけでなく、置き場所を通過したときに勝手に吸着しないかも見てください。
| 試す操作 | この作例で期待する動き |
|---|---|
| 置き場所の中心近くで離す | 置き場所と同じ位置へそろう |
| 置き場所から十分離して離す | 左側の開始位置へ戻る |
| 押したまま置き場所を通り過ぎる | 途中では吸着せず、マウスについてくる |
次に、距離の条件だけを変えて比べます。例えば、20では置きにくいと感じたら30に、離れた場所まで正解になってしまうと感じたら10に変えます。これらも比較用の数値です。
一度にピースの大きさまで変えると、何が操作感に影響したのか分かりにくくなります。まず距離だけを変え、同じような位置で離して確かめましょう。
距離で決める範囲は、置き場所を中心とした円形です。四角い枠の内側すべてを正解にする判定とは異なります。また、「20未満」なので、距離がちょうど20のときは正解になりません。
意図した場所に収まらないときの見直し箇所
枠を通っただけで吸着してしまう
距離を調べる「もし」が、マウスについて動かす繰り返しの中に入っていないか見ます。条件の数字を小さくする前に、判定を行うタイミングを直してください。
離してもピースが動き続ける
「〜まで繰り返す」に入れた条件を確認します。「マウスが押された」のままではなく、「マウスが押されたではない」にします。押している状態が終わったら、繰り返しも終わる組み方です。
近くで離しても、別の場所へ移動する
距離を調べる相手と、移動先が、どちらも「置き場所」になっているか確認します。移動先だけが「マウスのポインター」のままだと、正解位置へそろえる処理になりません。
また、置き場所そのものが動いていないかも見ましょう。緑の旗を押した直後に、設定した座標にあることを確認してから試します。
よくある質問（FAQ）
ピースが枠に触れているのに、元へ戻るのはなぜですか？
この作例は、絵同士の接触ではなく、置き場所までの距離で判定するためです。大きなピースは、中心が遠くても端だけが枠に触れます。枠とピースの大きさを確認し、必要なら距離の条件を少し広げて比べてください。
正解したピースを、もう一度動かせますか？
はい。この作例は、吸着した後も同じ操作を受け付けます。動かせなくしたい場合は、正解済みかどうかを記録し、未正解のときだけ操作を受け付ける追加設計が必要です。まずは吸着までを完成させる構成にしています。
ピースを増やすときは、何を変えますか？
それぞれに対応する置き場所を用意し、距離を調べる相手と移動先を変更します。不正解のときに戻る開始位置も分けてください。複製直後は同じ相手を参照しているため、名前だけ変えて終わりにしないことが大切です。
幼児と一緒に試す場合、ブロックも全部任せた方がよいですか？
最初からすべての操作を任せる必要はありません。保護者がこの作例を組み、子どもが「この近さなら収まってほしい」と試す分担もできます。数字の入力に取り組みたければ、その部分を交代するなど、本人が参加したい作業を選びましょう。
作りたいパズルを、体験で相談したいときは
教室へ相談するなら、「パズルを作りたい」に加え、「近くで離したら吸着させたい」「今は通過しただけで止まる」など、実現したい動きを一つ伝えると、相談する箇所が明確になります。
CotoMiraiは、一人ひとりに合わせた個別指導で、プログラミングやロボットを使ったものづくりを扱っています。取り組み方はCotoMirai公式サイトでも案内しています。今回の作品を使った相談や体験を希望する場合は、申し込み時に対応できる内容を確認してください。
参考にした情報
関連する記事
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。