スタータープロジェクト

リミックスしてスタート
ファイルをダウンロード
(Scratchデスクトップ用)

完成サンプル
Scratch公式サイト
難易度

入門にゅうもんレベル

アクティビティ数
9件

「スクラッチ迷路めいろの作り方|はじめてにピッタリのScratch 」の解説

PERRY
通《とお》った道《みち》に色《いろ》がつく迷路《めいろ》の作《つく》り方《かた》が分《わ》かります!

設計しよう

まずはスクラッチでどんなゲームを作りたいかを設計してみよう。設計といってもチラシのウラとかノートのすみっこに簡単に動きを描けばOKです。上手である必要は全くありません。

今回作りたい迷路ゲームはこちら。

今回作成するScratch迷路の設計図

通った道に色がつく、という特徴をもった迷路を作ります。とはいえ、この画だけだとわかりませんよね……。でも設計図はそれでいいんです。自分だけでもわかれば、とりあえずそれでOKです。ここはそんなにこだわらずに、とにかく紙に頭の中のイメージを描くことが大事です。

一緒に作ろう!

所要時間: 20分.

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

  1. プレイヤーを作ろう

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

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

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

  3. ステージを作ろう

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

  4. 壁を通れなくしよう

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

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

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

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

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

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

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

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

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

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

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

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

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

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

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

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

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

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

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

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

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

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

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

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

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

    scratchの迷路ゲームの作り方を解説
    scratchの迷路ゲームの作り方を解説

リファクタリングについて

今回はコードをきれいにするという処理が最後にありました。こういったコードをきれいにしておく作業をシステム開発では「リファクタリング」と呼びます。

プロのプログラマーも現場ではリファクタリングをしています。リファクタリングをすることで「とりあえず動くようにつくったプログラム」を「他の人にも説明しやすいプログラム」だったり「変更しやすいプログラム」にレベルアップさせることができます。

プログラム自体のより深い理解にもつながるので、毎回チャレンジしてみるといいでしょう。

コツとしては、いきなりきれいにプログラミングしようとは思わないで、一度がむしゃらに「思ったとおりに動くプログラム」を作ったあとで、リファクタリングを行うようにしましょう。

このとき、リファクリングをするまえにセーブだったりファイルをコンピューターに保存しておいたり、スプライトを複製したりして、いつでももとに戻せるようにしましょう。

なぜかというと、リファクタリングをしていたら思ったとおりに動かなくなった、壊れてしまった、ということがよくあるからです。プログラミングあるあるです。なので、元に戻せるようにすることを忘れずにリファクタリングに取り組みましょう。

チャレンジ・コーナー

さて、リファクタリングを行ったので、飛躍的に改造がしやすくなったはずです。ためしに以下のチャレンジにも取り組んでみてください。

  • 第4、第5のステージも追加してみよう
  • プレイヤーが通るとスピードが上がったり下がったりする床を作ろう
  • プレイヤー複製して二人で迷路を攻略できるようにしよう(ヒント:上下左右の動くキーを好きなキーで置き換えます)

改訂履歴

2020.01.30
動画レッスンを準備中
2020.02.02
動画を公開しました
2020.01.25
レッスンを公開こうかいしました