ペンを使った迷路の作り方｜はじめてのScratchにピッタリ

所要時間: 20分

スクラッチで迷路を作る手順をまとめました。今回は初心者でも取り組みやすい簡単な迷路です。上から順に手を動かしながら進めましょう。
全体の流れとしては、
・プレイヤーをつくる
・ステージ（迷路）をつくる
・壁を通れなくする
・スタート位置にプレイヤーをもどす
・ペンで通った道をぬる
・クリアできるようにする
・改善＆改造していく
となります。では始めましょう。スクラッチオン！

1. プレイヤーを作ろう

   まずはスプライトを追加して、四角を描きます。

   

2. プレイヤーの動きを作ろう

   つぎにプレイヤーを左右上下に動けるようにします。

   

3. ステージを作ろう

   迷路を描くためのステージを作ります。

   

4. 壁を通れなくしよう

   迷路の壁をプレイヤーが通り抜けられなくします。左右上下のコードに追加してください。
   

   

5. スタート位置に戻るようにしよう

   プレイヤーを毎回スタート位置に戻るようにします。
   

   

6. ペンで通った道を塗ろう

   プレイヤーが進むと、通った道が色がつくようにします。これには拡張機能の「ペン」を追加してから、ペンのコードブロックを使っていきます。
   

   

7. クリアできるようにしよう

   ゴールに着いたらクリアとプレイヤーに言わせます。

   

8. 次のステージを作ろう

   ゴールしたら次のステージに進みたいので、次のステージも用意します。ステージの背景を追加します。
   

   

9. 次のステージになったら、プレイヤーがスタート位置に移動するようにしよう

   毎回スタート位置が同じとは限らないので、ステージが変わるごとにプレイヤーの位置を変える必要があります。
   

   

10. さらに次のステージを作ろう

    もう一つステージを増やしてみましょう。さらにステージに背景を追加します。

    

11. 変数を使ってコードをきれいにしよう

    ここまでステージを３つに増やしました。もっともっとステージを増やしたいのですが、ステージがどんどん増えていくと、コードがごちゃごちゃになってしまいそうですね。この段階で、いったんコードをきれいにしておきます。
    まずはスピードを変数を使って管理します。壁を通れなくするコードではスピードに−１を掛けるように工夫します。これで上に進む時に２動く場合は、壁にあたったら−２されるようになります。下に進む時に−２動く場合は、どうでしょう。マイナス掛けるマイナスはプラスになるので、壁にあたったら「-2 × -1 = 2」となり、２動くようになります。
    

    

12. スピードの最初の値を設定しておこう

    スピードは最初はゼロなので、緑の旗が押された時に最初のスピードを指定しておきます。
    

    

13. イベントを使ってコードをきれいにしよう①（スタート処理）

    次はスタートの処理とクリアの処理をイベントを使ってきれいにします。
    そのために「スタートｘ」と「スタートｙ」という２つの変数を用意します。これはプレイヤーが各ステージで最初にいるｘ座標とｙ座標をそれぞれ記録させた変数です。
    ステージで指定した変数はどのスプライトからでも見たり使ったり変えたりすることができるグローバル変数と呼ばれる種類の変数になります。
    まずは、ステージのコードに、緑の旗が押された時を置いて、最初の背景と、最初の背景におけるスタート位置を変数に割り当ててから「スタート」というイベントを送るようにコードを追加します。
    

    

14. プレイヤーのスプライトにイベントを受け取った処理を追加しよう

    ステージから「スタート」イベントを受け取ったら、プレイヤーをスタート位置に移動させます。これには、ステージで設定しておいたグローバル変数の「スタートｘ」と「スタートｙ」を使います。
    また、ペンの処理もスタートイベントを受け取ったら毎回繰り返すので、合わせてブロックを組み合わせておきます。
    

    

15. イベントを使ってコードをきれいにしよう②（クリア処理）

    さらに、クリアの処理もイベントを使ってコードをキレイにします。
    まずはプレイヤーのスプライトを変えます。
    クリアの処理を「クリア」イベントを送るように変更します。
    

    

16. ステージでクリア処理を行う

    次にステージにて、「クリア」イベントを受け取ったときの処理をつくります。
    クリアを受け取ったら、まず次の背景に変えます。
    そして、背景の番号ごとにスタート位置を指定します。このとき、さきほど作った変数に値をセットします。
    最後に、さっき作った「スタート」イベントを送って完成です。