scratch

【簡単!!】Scratchでブロック崩しを作ってみよう!

アイキャッチ画像
あいたろうくん

テク先生!

テク先生

あいたろう君、どうしたんだい?

あいたろうくん

Scratchでブロック崩しを作ってみたいのですが、作り方が分かりません!

テク先生

Scratchでブロック崩しを作るためにはスプライトの移動に加えて、変数やクローン、角度について使い方を知っておく必要があるんだ!

あいたろうくん

なるほど~

変数とかクローンとかって難しいイメージがあるんですけど僕でもブロック崩しは作れますか?

テク先生

たしかに難しいところもあるけど、今回は簡単に作れるように工夫をしてみたから大丈夫だよ!

それに私が作る過程を丁寧に説明していくから、頑張ってゲームを完成させよう!

あいたろうくん

先生、ありがとうございます!

それでは説明よろしくお願いします!

自宅でできるプログラミング子供向け教材
自宅でできる!プログラミング子供向け教材 プログラミングおもちゃ【embot】 こどものロジカル思考を育てるダンボール教材 https://www.youtube...
子供向けオンラインプログラミング教室おすすめ
子供向けオンラインプログラミングスクールお勧め3選! ソニーのオンライン学習サービス 「CREATE by KOOV」 脳がKOOVに出会うと潜在能力が開花する! https...

まずは完成したゲームをプレイしてみよう!

テク先生

まず、今から作成するブロック崩しのイメージをつかんでもらうために完成後のゲームを実際にプレイしてみよう!

操作方法は

左右の矢印キー(←→)で移動

だけだから簡単にプレイすることができるよ!
では実際にプレイしてみよう!

あいたろうくん

僕が思っていたとおりのゲームで面白かったです!

デク先生

それは良かった!
ではイメージも掴めたところで、今からこのブロック崩しの作り方について説明していくよ!

Scratchで新しいプロジェクトを作成した後から解説していくから、新しいプロジェクトは準備しておいてね!

バーが移動できるようにしよう!

デク先生

まずは「バー」が移動できるようにプログラムを書いていこう!

あいたろうくん

「バー」っていうのはあの左右に移動する棒のことですか?

デク先生

そうだよ!!

左右に移動させるだけなら簡単だから、まずはそれについて説明していくよ!

あいたろうくん

よろしくお願いします!

1. 猫のスプライトを削除します。

下の画像を参考に「削除ボタン」をクリックして猫のスプライトを削除しましょう。

ブロック崩し解説画像1
2. 「スプライト追加ボタン」をクリックします。

「Paddle」のスプライトを追加するために下の画像が示す「スプライト追加ボタン」をクリックします。

ブロック崩し解説画像2
3. 「Paddle」を選択します。

この「Paddle」が左右に移動するバーになります。

ブロック崩し解説画像3
4. 「Paddle」のパラメータを変更します。

追加したスプライトのx座標を「0」に、y座標を「-140」に、大きさを「70」に変更します。

最終的に、下の画像と同じ値になっていれば大丈夫です。

ブロック崩し解説画像4
5. 「Paddle」に下の画像のようなスクリプトを追加します。

これは初期設定として必要なスクリプトになります。

ブロック崩し解説画像5
6. 「右矢印キー」がクリックされたときのスクリプトを追加します。

下の画像のように、右矢印キーが押されたときのスクリプトを作成し、それを先ほど追加した「ずっと」の中に移動させます。

ブロック崩し解説画像6
7. 「左矢印キー」がクリックされたときのスクリプトを追加します。

下の画像のように、左矢印キーが押されたときのスクリプトを作成し、それを「ずっと」の中に移動させます。

ブロック崩し解説画像7
あいたろうくん

先生!
「x座標を10ずつ変える」っていうプログラムってどういう意味があるんですか?

デク先生

「x座標」とは横方向の位置を表す数字なんだ!

この「x座標」は右に行くほど数字が大きく、左に行くほど数字が小さくなるんだよ。

だから、「x座標を10ずつ変える」によって「x座標」が大きくなるから、バーが右に移動するんだ!

あいたろうくん

なるほど~!
「x座標を-10ずつ変える」は「x座標」が小さくなるからバーが左に移動するようになるんですね!

デク先生

そのとおり!
座標の意味が分かったみたいで良かった!

オブジェクトを右に移動させたい時はx座標を大きくする
オブジェクトを左に移動させたい時はx座標を小さくする

8. 下画像のようになっていることを確認します。

下の画像と異なっていれば、画像のようになるよう変更しましょう。

ブロック崩し解説画像8
9. 「Ball」のスプライトを追加します。
ブロック崩し解説画像9

ボールが動くようにしよう!

デク先生

次は「Ball」のスプライトを追加して、それが動くようにスクリプトを書いていくよ!

1. 「Ball」のパラメータを変更します。

追加したスプライトのx座標を「0」に、y座標を「-100」に、大きさを「35」に変更します。

最終的に、下の画像と同じ値になっていれば大丈夫です。

ブロック崩し解説画像10
2. 「Ball」に下の画像のようなスクリプトを追加します。

これはボールの初期設定に必要なスクリプトになります。

ブロック崩し解説画像11
3. 「~度に向ける」の部分に「30から60までの乱数」のスクリプトを追加する。

下の画像のようにスクリプトを作成して、それを矢印の先に移動させます。

ブロック崩し解説画像12
あいたろうくん

先生!
「30から60までの乱数」って何ですか?

デク先生

「乱数」とはプログラムが実行される度に変わる数字のことだよ!

例えば、今回のように「30から60までの乱数」とすると、時間によって「34」になったり、「51」になったりと30~60の整数のどれかになるんだ!

これを「~度に向ける」の「~」の部分に入れることでゲームをするたびに、色んな方向で「Ball」が移動するからよりゲームが面白くなるんだ!

あいたろうくん

なるほど~!
分かりやすい説明ありがとうございました!

ゲームにランダムな要素を入れたい時は乱数を使う

4. 下の画像のようにずっとの中にスクリプトを追加します。

この追加したスクリプトによって「Ball」が移動、壁で反射するようになります。

ブロック崩し解説画像13
5. 「新しいメッセージ」をクリックします。

「メッセージ1を送る」の「メッセージ1」の部分をクリックすると、「新しいメッセージ」がでてくるのでそれをクリックします。

ブロック崩し解説画像14
6. 「跳ね返り上下」という名前で新しいメッセージを作成します。

下の画像のように名前入力欄に「跳ね返り上下」と入力し、その後に「OK」ボタンをクリックしましょう。

ブロック崩し解説画像15
7. 下の画像の位置に「跳ね返り上下を送る」スクリプトを追加します。
ブロック崩し解説画像16
8. 「跳ね返り上下」のメッセージを受け取った時のスクリプトを追加します。

下の画像のように「跳ね返り上下を受け取ったとき」の下に、「『180-向き』度に向ける」のスクリプトを配置します。
これにより「Ball」が「Paddle」に当たると跳ね返るようになります。

ブロック崩し解説画像17

壊れるブロックを作成しよう!

デク先生

「Ball」ができたから今度は「Block」のスプライトを作成していこう!

1. 自作のスプライトを作成するために筆のアイコンをクリックします。

右下にあるスプライト追加のアイコンにカーソルを合わせると、その上に4つアイコンが出てくるので、その中の「筆のアイコン」をクリックします。

ブロック崩し解説画像18
2. 下の画像のように塗りつぶしと枠線の色を変更し、四角のアイコンをクリックします。
ブロック崩し解説画像19
3. 下の画像のようにコスチュームを作成します。

これが「ブロック」のコスチュームになります。
長方形の中心がスプライトの中心に合うように、長方形を移動させましょう。

ブロック崩し解説画像20
4. スプライト名と大きさを変更します。

スプライト名を「Block」に、大きさを「50」に変更します。

ブロック崩し解説画像21
5. 「Block」に下の画像のようなスクリプトを追加します。

これは20個のブロックのクローンを生成するスクリプトになります。

ブロック崩し解説画像22
あいたろうくん

先生!
「クローン」って何ですか?

デク先生

「クローン」はスプライトのコピーのことだよ!
ブロック崩しのブロックのように同じものを複数個作るときにとても便利なんだ!
クローンは仕組みを理解するのが難しいけど、とても便利だから使い方を勉強してどんどん利用していこう!

同じものを複数個作るときはクローンを作成する

6. ブロックがクローンされた後の処理を追加します。

下の画像のようにスクリプトを追加します。
このスクリプトによって、クローンされたブロックが「Ball」に当たると消えるようになります。

7. 「Ball」のスクリプトエリアにブロックに触れたときの処理を追加します。

下の画像のようにスクリプトを追加します。
このスクリプトによって、「Ball」がブロックに触れたときに跳ね返るようになります。

ブロック崩し解説画像24

効果音を鳴らそう!

デク先生

「Ball」が跳ね返ったときに効果音が鳴るようにスクリプトを追加していくよ!

1. 左上にある項目から「音」をクリックします。
ブロック崩し解説画像25
2. 音源追加ボタンをクリックします。

下の画像を参考に音源追加ボタンをクリックします。

ブロック崩し解説画像26
3. 「Wood Tap」を選択します。
ブロック崩し解説画像27
4. 音を鳴らすスクリプトを追加します。

下の画像を参考に「Popの音を鳴らす」と、「Wood Tapの音を鳴らす」を追加します。

ブロック崩し解説画像28

ゲームオーバー・ゲームクリアを判定しよう!

デク先生

「ボールが下端についたらゲームオーバー」、
「全てのブロックを壊したらゲームクリア」
となるようにスクリプトを書いていくよ!

1. 「Ball」のスプライトにゲームオーバー処理のスクリプトを追加します。

下の画像のように「Ball」にゲームオーバー処理のスクリプトを追加します。
このスクリプトによってボールが画面の下にいくとゲームが止まるようになります。

ブロック崩し解説画像30
2. 「変数を作る」をクリックします。
あいたろうくん

先生!
「変数」って何ですか?

デク先生

「変数」は数字や文字のデータを保持することができる機能なんだ!

あいたろうくん

なるほど~!
今回は変数にどんなデータを保存するんですか?

デク先生

今回は残りのブロックの個数のデータを保持するために利用するよ!
残りのブロックの個数を数えておけばゲームクリアの判定を簡単にできるから変数は本当に便利なんだ!

ものの個数を数えるときなどに「変数」を利用する。

3. 「残りのブロック」という名前の変数を作成します。

変数名の入力欄に「残りのブロック」と入力し、その後右下にある「OK」をクリックします。
この変数は残りのブロック数を表し、この変数の値が0になるとゲームクリアになります。

ブロック崩し解説画像31
4. 「残りのブロック」の初期値を設定するスクリプトを追加します。

下の画像のように「Block」のスクリプトエリアに「残りのブロック数を20にする」を追加します。

ブロック崩し解説画像32-1
5. ゲームクリア判定のスクリプトを追加します。

下の画像のように「Block」のクローンが削除される前に「残りのブロックを-1ずつ」するスクリプトを追加し、「残りのブロック」が「0」になったら「ゲームクリア」のメッセージを送るようにします。
「ゲームクリア」のメッセージは自分で追加する必要があります。
メッセージの追加方法を忘れてしまった人は「ボールが動くようにしよう!」の手順5,6を再度確認してみましょう。

ブロック崩し解説画像33-1
6. 「背景」追加ボタンをクリックします。

下の画像のように画面右下にあるボタンをクリックします。

ブロック崩し解説画像34
7. 「Party」を選択します。
ブロック崩し解説画像35
8. 下の画像を参考に「T」のアイコンをクリックします。

「T」のアイコンをクリックすると背景に文字を入れることができます。

ブロック崩し解説画像36
9. 背景の中央に「GAME CLEAR!!」という文字を追加します。

下の画像を参考に「GAME CLEAR!!」と入力します。
背景画像をクリックすると文字を入力することができます。

ブロック崩し解説画像37-1
10. 「GAME CLEAR!!」の文字の色を変更します。

下の画像を参考に「GAME CLEAR!!」を選択して、塗りつぶし・枠線それぞれの色を変更します。

ブロック崩し解説画像37-2
11. ゲームクリア時に背景を切り替えるスクリプトを追加します。

背景のスクリプトエリアに下の画像のようなコードを追加します。

ブロック崩し解説画像38
12. ゲームクリアすると「Ball」と「Paddle」が消えるようにスクリプトを追加します。

下の2つの画像を参考に「Ball」と「Paddle」のスクリプトエリアに「ゲームクリアを受け取ったとき」にスプライトを「隠す」プログラムを追加します。

ブロック崩し解説画像39
ブロック崩し解説画像40

最後にスクリプトを確認!

デク先生

最終的にそれぞれのスクリプトが下の画像のようになっているか確認しよう!

【Paddle(バー)】
ブロック崩し解説画像40-1
【Ball(ボール)】
ブロック崩し解説画像42
【Block(ブロック)】
ブロック崩し解説画像41-2

最後に

あいたろうくん

先生のおかげでブロック崩しが完成しました!

デク先生

それはよかった!
他に作りたいゲームがあればどんどん聞いてくれ!

あいたろうくん

はい!
丁寧な説明ありがとうございました!

お疲れ様でした!
これでブロック崩しは完成です!

よければ他のゲーム作成の記事も読んでみてね!