先生!
Scratchを始めたいのですが、何から始めれば良いですか?
お!Scratchに興味があるんだね!
では、Scratchを使って初心者でも簡単に作れる迷路ゲームを一緒に作ってみよう!
やった~!
よろしくお願いします!
![](https://www12.a8.net/0.gif?a8mat=3N1MRH+APTO2+4X6W+5Z6WX)
![](https://www18.a8.net/0.gif?a8mat=3N1MRH+EAFAQ+4QCS+5ZU29)
![](https://www15.a8.net/0.gif?a8mat=3HBWKQ+52S3HU+3ZMA+5Z6WX)
迷路ゲームであそんでみよう!
まずは、作る予定の迷路ゲームがどんなものか実際にあそんでみよう!
下のプロジェクトを起動して体験してね!
操作は矢印キーで行うよ!
これから作っていくゲームの内容は分かったかな?
それでは一緒に作っていこう!
この教材で学べること
ここでは、この教材を使うと何を学べるのか簡単に説明していくよ!
こんなことが出来るようになるのかと思いなが見てね!
・新しいプロジェクトを作成する方法
・背景を作る方法
・キャラクターを矢印キーを使って動かす方法
・壁に当たるとそれ以上進まなくする方法
・メッセージ機能を使ったスクリプト間の制御方法
・背景の切り替え方法
・スプライトの表示・非表示の方法
迷路ゲームに必要なもの
まずは、迷路ゲームに必要なものについておさらいしようか。
あいたろうくん、さっき体験してもらったゲームの中でどのような動きがあったかな?
えっと…
矢印キーを押すことでネコのキャラクターが動きました。
あとは、黒い壁に当たるとそれ以上奥には行けませんでした。
すばらしい!
その通り!
実は迷路ゲームを作るために必要な動きはたった2つだけなんだ。
では、今からそれらを作っていくよ!
![](https://www12.a8.net/0.gif?a8mat=3N1MRH+APTO2+4X6W+5Z6WX)
![](https://www18.a8.net/0.gif?a8mat=3N1MRH+EAFAQ+4QCS+5ZU29)
![](https://www15.a8.net/0.gif?a8mat=3HBWKQ+52S3HU+3ZMA+5Z6WX)
ステージの作成
まずは動きを作る前にステージを作ってみう!
はい!
でも、どうやって作るのですか?
では、一緒に作ってみようか
はい!
1.新しいプロジェクトの作成
下の画像の通りに新しいプロジェクトを作成しましょう。
![](https://itech-semi.com/wp-content/uploads/2024/02/ここをクリックして新しいプロジェクトを作成-1-1024x512.png)
2.ステージの編集画面を開く
2.1 まずは、ステージを選択しましょう。
![](https://itech-semi.com/wp-content/uploads/2024/02/ここをクリックしてステージの-編集ができるようにしよう-1-1024x484.png)
2.2 ステージを選択したらステージの背景タブをクリックして背景の編集画面へ移動します。
![](https://itech-semi.com/wp-content/uploads/2024/02/ここをクリックして-背景を作成していこう-1024x482.png)
2.3 背景の編集画面まで来たら自分のオリジナルの迷路を作成してみましょう!
※背景で使う壁の色はすべての壁で同じ色にしておいてください。(後ほど理由は説明します)
![](https://itech-semi.com/wp-content/uploads/2024/02/1-1024x463.png)
これで迷路のステージが完成しました。
![](https://www12.a8.net/0.gif?a8mat=3N1MRH+APTO2+4X6W+5Z6WX)
![](https://www18.a8.net/0.gif?a8mat=3N1MRH+EAFAQ+4QCS+5ZU29)
![](https://www15.a8.net/0.gif?a8mat=3HBWKQ+52S3HU+3ZMA+5Z6WX)
ネコの動きの作成
では、ネコの動きの作成に取り組んでいこう!
わかりました!
1.スタート地点の設定
まずはゲームが始まったときにネコがどの地点からスタートするのかを設定していきます。
1.1 今度は背景ではなく、ネコの動きを作成していくのでネコを選択します。
![](https://itech-semi.com/wp-content/uploads/2024/02/ネコの-1024x463.png)
![](https://itech-semi.com/wp-content/uploads/2024/02/ネコの動きを作るプログラムするので、コードをクリック-1-1024x466.png)
1.2 ネコのコードが開けたらスタート地点の設定をします。
![](https://itech-semi.com/wp-content/uploads/2024/02/マウスを使って、自分で作成した迷路のスタート地点にネコをドラックしてくる-1024x463.png)
1.3 ここのxとyの値はこのゲーム上でのネコのいる場所が数値として見えるようにしてくれているものです。この数値を使ってスタート地点を設定します。
![](https://itech-semi.com/wp-content/uploads/2024/02/スクリーンショット-2024-02-26-050740-1024x598.png)
1.4 Scratchは緑色の旗を押してゲームをスタートさせるので、その旗が押されたときに、ネコの場所をさっき確認したxとyの値に設定します。
これでスタート地点の設定は完成です!
一度、緑色の旗をクリックしてスタート位置に行くか確認してみましょう!
2.矢印キーでネコを動かす
スタート位置の設定ができたら次は、矢印キーを使ってネコを動かすプログラムを書いてみましょう!
矢印キーは上下左右の4つあります。ネコの位置はxとyの値で決まるので、それを変更することで移動のプログラムを作成できます。上に移動させたい場合はyを5変える、下に移動させたい場合はyを-5変える。このようにして移動が可能になります。
(x,yの考え方は中学1年生で習うのでまだ習っていない方はそういう決まりだと覚えてゲームを作っていきましょう!)
![](https://itech-semi.com/wp-content/uploads/2024/02/スクリーンショット-2024-02-26-052759-1024x599.png)
これでネコの移動の動きは完成です。
一度、緑の旗をクリックしてネコが動くかどうか確認してみましょう。
3.壁に当たったときの動き
ネコの動きが作れましたが、ネコが壁を貫通して動けてしまっています。
それでは迷路ゲームとは呼べないので、今から壁を貫通させないプログラムを作っていきましょう!
3.1 壁に当たったら移動をさせないという考えで、もし壁に触れたら先程作成した移動のプログラムを打ち消すというプログラムを作っていきます。
![](https://itech-semi.com/wp-content/uploads/2024/02/スクリーンショット-2024-02-26-053337-1024x601.png)
これは、先程作成したプログラムに、もし壁の色に触れたら移動を打ち消すという処理を追加したものです。
このプログラムでは、壁に当たったかどうかを判断するのに色を使っています。
ここで、先程壁の色を一つにしていたのが活きてきます。
3.2 壁の色をプログラムに設定する
このままのプログラムでは黒色に触れたら移動を打ち消すという処理なので、ネコは黒の壁以外は通れてしまいます。
今から壁の色に触れたら移動を打ち消す処理にしていきましょう!
![](https://itech-semi.com/wp-content/uploads/2024/02/ここをクリックして壁の色に変更していきます-1024x601.png)
![](https://itech-semi.com/wp-content/uploads/2024/02/ここをクリックしてステージから壁の色を選択してきます-1024x603.png)
![](https://itech-semi.com/wp-content/uploads/2024/02/点を壁に合わせて色を設定することができます.png)
このようにして色を壁の色に設定することができました。
これを矢印キー4箇所の全てに行います。
これでネコの動きは完成です。
一度、緑の旗をクリックしてネコが壁をすり抜けずに移動できるか確認してみましょう!
![](https://www12.a8.net/0.gif?a8mat=3N1MRH+APTO2+4X6W+5Z6WX)
![](https://www18.a8.net/0.gif?a8mat=3N1MRH+EAFAQ+4QCS+5ZU29)
![](https://www15.a8.net/0.gif?a8mat=3HBWKQ+52S3HU+3ZMA+5Z6WX)
ゴールの設定
ネコの動きが完成したね!
では、最後の仕上げでゴールの設定をしていこう!
はい!
ネコの動きはかなり難しかったですが
なんとか作ることができました!
ゴールの設定頑張ります!
1.ゴールのスプライトを作成
1.1 まずは、ゴールの目印になるスプライトを作成していきましょう。
![](https://itech-semi.com/wp-content/uploads/2024/02/ここをクリックしてゴールのスプライトを自分で選んでみよう-1024x463.png)
![](https://itech-semi.com/wp-content/uploads/2024/02/マウスを使って、選択したスプライトを迷路のゴールの位置までドラッグしてこよう-1024x463.png)
これで、ゴールのスプライトの設置は完成です。
あとは、ゴールに触れたときのプログラムを書いて完成です!
あと少し一緒に頑張りましょう!
2.ゴール画面の作成
2.1 次にゴール画面のステージを作成していきましょう。
ゴール画面は「描く」から自作するのではなく、「背景を選ぶ」から好きな背景を選んで作成してみましょう。
![](https://itech-semi.com/wp-content/uploads/2024/02/ゴール画面は自作ではなく「背景を選ぶ」から好きな背景を選んでそれをゴール画面にしましょう-1024x463.png)
![](https://itech-semi.com/wp-content/uploads/2024/03/ここをクリックして背景の編集画面へ行こう!-1024x466.png)
![](https://itech-semi.com/wp-content/uploads/2024/03/ここをクリックして-1-1-1024x601.png)
これでゴール画面は完成です。
つぎはゴールした際にこの背景にするプログラムを書いていきましょう!
3.ゴールのスクリプトの作成
3.1 ゴールに触れるのはネコなので、ネコのコードまで移動します。
![](https://itech-semi.com/wp-content/uploads/2024/02/ネコの-1-1024x463.png)
![](https://itech-semi.com/wp-content/uploads/2024/02/ネコの動きを作るプログラムするので、コードをクリック-1-1-1024x466.png)
3.2 ネコのコードまで移動できたらゴールに触れたときのプログラムを書いています。
![](https://itech-semi.com/wp-content/uploads/2024/02/「調べる」の中の「~に触れた」コードで先程追加したスプライトを選択して、そのスプライトに触れたときのプログラムを書いてきましょう-1024x599.png)
![](https://itech-semi.com/wp-content/uploads/2024/02/ゴールに触れた時に動くプログラムの枠を作成-1024x725.png)
3.3 ここではゴールをした際にそれを通知するメッセージ機能を利用します。
この機能を使うと、特定のイベントが発生した際に動き出すプログラムを作成することができます。
![](https://itech-semi.com/wp-content/uploads/2024/02/ここをクリックして「新しいメッセージ」をクリックし、新しいメッセージを作成します。-1024x598.png)
![](https://itech-semi.com/wp-content/uploads/2024/02/段落テキスト-1.png)
新しいメッセージを作成することができたら、ネコがゴールした際にこのメッセージを送る処理を書いていきましょう。
先程作成したゴールに触れた際に動くプログラムの中にメッセージを送る処理を書いていきます。
![](https://itech-semi.com/wp-content/uploads/2024/03/ここをクリックして送るメッセージを選択します-1024x618.png)
![](https://itech-semi.com/wp-content/uploads/2024/03/段落テキスト-2-1024x599.png)
![](https://itech-semi.com/wp-content/uploads/2024/03/先程作成したプログラムの中にメッセージを送る処理を入れます-1024x601.png)
これでゴールした際にメッセージを送るプログラムが完成しました。
あとはゴール画面に移動するプログラムを書いて完成です!
4.ゴール画面へ移動するスクリプトを作成
4.1 背景を変える処理を作成するので、背景のコードまで移動します。
![](https://itech-semi.com/wp-content/uploads/2024/03/ここをクリックして背景のコードまで移動します-1024x465.png)
![](https://itech-semi.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-02-050027-1024x603.png)
この画面で背景のスクリプトを作成していきます。
4.2 ゴールした際にメッセージが送られてくるので、それを受け取ってゴール画面を表示させる処理を書いてきます。
![](https://itech-semi.com/wp-content/uploads/2024/03/このコードでメッセージを受け取った際に開始するプログラムを書くことができます-1024x598.png)
![](https://itech-semi.com/wp-content/uploads/2024/03/②-ゴールした際のメッセージを受け取って①で選択した背景にする処理を書きます-1024x623.png)
これでゴールした際にゴール画面に移動する処理は完成です。
しかし、このままではゲーム開始時にどの背景にするかが決まっていません。
そのため、ゴール画面から開始してしまう可能性があります。
最後にそれを修正して迷路ゲームの完成です!
4.3 ゲーム開始時に迷路の背景にするプログラムを書きます。
先程と同様にして、背景を迷路の背景にするコードをドラッグしてきます。
今回はゲーム開始時に迷路の背景にしたいので、「緑の旗が押されたとき」のコードを使用します。
![](https://itech-semi.com/wp-content/uploads/2024/03/ゲームが開始された際に背景を迷路の背景にするプログラムをかきます-1024x602.png)
これで迷路ゲームの完成です!
一度、緑の旗をクリックして迷路ゲームで遊んでみましょう!
これで迷路ゲームの完成だけど、あいたろうくんどうだったかな?
初めてのScratchでとても楽しく学べました!
でも、まだまだ理解できていないところも多いので、
違う教材でも学習を続けていきます!
素晴らしい心がけだね!
では、もっと学習できるように他のゲームの作り方も下に載せておくからぜひチェックして実際に作って見てね!
はい!
ありがとうございます!
おすすめの初心者向けScratchゲーム制作教材
ブロック崩しゲーム (初心者向け)
エアホッケーゲーム (初心者向け)
ドライブゲーム (中級者向け)
![](https://www12.a8.net/0.gif?a8mat=3N1MRH+APTO2+4X6W+5Z6WX)
![](https://www18.a8.net/0.gif?a8mat=3N1MRH+EAFAQ+4QCS+5ZU29)
![](https://www15.a8.net/0.gif?a8mat=3HBWKQ+52S3HU+3ZMA+5Z6WX)
ステージを追加してみよう!
今のままのゲームでは1ステージでゲームが終わってしまうね!
何ステージも作れたらとても面白そうじゃない?
たしかに!
自分である程度は迷路のプログラムを作ることができたので、
ここからはステージを増やしてもっと遊びたいです!
素晴らしい姿勢だね!
では、今から一緒にステージを追加していこうか!
はい!
1.ステージを追加する
1.1 背景でステージ2を追加しましょう。
先程作成した背景と同じ手順でステージ2を作成してみましょう。
![](https://itech-semi.com/wp-content/uploads/2024/02/段落テキスト-1024x464.png)
この段階で背景が3つあれば正解です。
これでステージの追加は完成です。
2.ステージ2へ移動するスプライトの作成
ここでは、ステージ1に置くゴール目印を新たに作成して、それに触れるとステージ2へ移動できるようにしましょう!
2.1 ステージ2へ移動するための目印のスプライトを用意します。
![](https://itech-semi.com/wp-content/uploads/2024/03/ここをクリックしてステージ2へ移動するための目印となるスプライトを自分で選んでみよう-1024x463.png)
![](https://itech-semi.com/wp-content/uploads/2024/03/③-ゴールを設置していた場所と同じ場所に、ステージ2へ移動する目印のスプライトのxとyの値を設定しよう-1024x462.png)
これで、ステージ2へ移動するための目印の初期位置の設定まで完成です。
しかし、このままではステージ2へ移動するための目印とゴールの両方がステージ1に存在しているのでそれを修正していきましょう!
3.スプライトの表示タイミングを調整
ここでは、ステージ2へ移動するための目印とゴールのスプライトをそれぞれを表示するタイミングを作成します。
3.1 ステージ2へ移動するための目印のスプライトのコードに、ゲーム開始時に表示してステージ2へ移動したら隠すプログラムを書いていきます。
まずは、ステージ2へ移動したことを知らせるメッセージを作成します。
![](https://itech-semi.com/wp-content/uploads/2024/02/ここをクリックして「新しいメッセージ」をクリックし、新しいメッセージを作成します。-1024x598.png)
![](https://itech-semi.com/wp-content/uploads/2024/02/段落テキスト-1.png)
ステージ2へ移動するための目印のスプライトは、ステージ1で使用するため、「緑の旗が押されたとき」に表示しておき、ステージ2への移動を知らせる「メッセージ」を受け取った後は非表示にします。
![](https://itech-semi.com/wp-content/uploads/2024/03/緑の旗が押されたときに表示するプログラム-1024x596.png)
3.2 ゴールのスプライトの表示タイミングを調整していきます。
ゴールのスプライトのコードに、ゲーム開始時は隠しておき、ステージ2へ移動したことを知らせるメッセージを受け取った際に表示させるプログラムを書いていきましょう!
ゴールのスプライトのプログラムを書くので、ゴールのスプライトのコード画面へ移動します。
![](https://itech-semi.com/wp-content/uploads/2024/03/ここをクリックしてゴールのスプライトのコードまで移動します-1024x463.png)
![](https://itech-semi.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-02-060829-1024x600.png)
ここに来れていたら正解です。
ゴールのスプライトは、ステージ2で使用するため、「緑の旗が押されたとき」に非表示にしておき、ステージ2への移動を知らせる「メッセージ」を受け取った後は表示します。
![](https://itech-semi.com/wp-content/uploads/2024/03/緑の旗が押されたときに非表示にするプログラム-1024x463.png)
これで各スプライトの表示タイミングの設定は完成です!
あとは、ステージ2へ移動するプログラムを書くだけです!
一緒に頑張りましょう!
4.ステージ2へ移動するプログラムの作成
先程ゴールの設定をしたときの同じようにして、ステージ2へ移動するプログラムを書いていきましょう!
4.1 メッセージを送るのはネコなのでネコのコードに移動します。
![](https://itech-semi.com/wp-content/uploads/2024/02/ネコの-1-1024x463.png)
![](https://itech-semi.com/wp-content/uploads/2024/02/ネコの動きを作るプログラムするので、コードをクリック-1-1-1024x466.png)
4.2 ネコのコードに移動できたら、先程作成した「ステージ2へ移動したことを知らせるメッセージ」を送る処理を作成していきます。
ゴールに触れた際のプログラムを書いたときと同様にして、ステージ2へ移動するための目印に触れた際のプログラムを書いていきましょう!
![](https://itech-semi.com/wp-content/uploads/2024/03/ステージ2へ移動するための目印に触れた際にメッセージを飛ばすプログラム-1024x599.png)
これでステージ2へ移動するための目印に触れた際にメッセージを飛ばせるようになりました。
それを受け取って背景を変える処理を書いていきましょう!
4.3 各メッセージを受け取った際に表示させる背景の設定をしていきましょう!
![](https://itech-semi.com/wp-content/uploads/2024/03/ここをクリックして背景のコードまで移動します-1024x465.png)
背景のコードまで移動できたら、ゴール画面を表示させたときと同じように、ステージ2を表示させるコードをかいていきます。
![](https://itech-semi.com/wp-content/uploads/2024/03/ステージ2へ移動したことを知らせるメッセージを受け取った際に、背景をステージ2にするプログラム-1024x595.png)
これで、背景の切り替えのプログラムも完成です!
最後に、ステージ2へ移動した際にネコをスタート位置に戻す処理を書いてステージの追加を完了させましょう!
5.ステージ2でのネコのスタート地点の設定
ステージ1をクリアしたネコがステージ2へ移動した際に、このままのプログラムではその場からスタートしてしまいます。
ここでは、ステージ2でのネコのスタート位置を設定していきましょう!
5.1 ネコのプログラムを書いていくので、ネコのコードまで移動します。
![](https://itech-semi.com/wp-content/uploads/2024/02/ネコの-1-1024x463.png)
![](https://itech-semi.com/wp-content/uploads/2024/02/ネコの動きを作るプログラムするので、コードをクリック-1-1-1024x466.png)
5.2 ステージ1でネコのスタート位置を設定したときと同じようにして、ステージ2でのスタート位置を設定します。
![](https://itech-semi.com/wp-content/uploads/2024/03/ステージ2へ移動した際にネコのスタート位置にしたい場所のxとyの値を設定します-1024x598.png)
これで全工程完了です!
緑の旗をクリックして、ここまで頑張って作り上げた作品を一度遊んでみましょう!
あいたろうくん、ステージを追加してさらにゲームが楽しくなったかな?
はい!
一つのステージより、二つある方が断然面白いです!
それは良かった!
ここまで一緒に頑張ったあいたろうくんなら、自力でステージ3、4と作って行けるはずだよ!
個性あふれる迷路を作ってくれることを期待してるよ!
一人で出来るか不安だけど、テク先生の教えを思い出して新しいステージを自分で作ってみます!
先生ありがとうございました!
![](https://www12.a8.net/0.gif?a8mat=3HBWKQ+52S3HU+3ZMA+6D4GH)
![](https://www12.a8.net/0.gif?a8mat=3N1MRH+APTO2+4X6W+5Z6WX)