スクラッチでブロック崩しゲームを作ってみよう①

ブロック崩しゲームとは？

ブロック崩しゲームとは、パドル（バー）を操作してピンポン玉を打ち返し、ブロックを消していくゲームのことです。

ブロック崩しゲームは、反射型ゲームのジャンルに分類されます。

今回、プログラミングに挑戦するブロック崩しゲームは、こちらです。

緑の旗をクリックすると、カウントダウンが始まり、ブロック崩しゲームがスタートします。

ブロック崩しゲームの遊び方は、ゲームを開始するとピンポン球が発射されますので、左右矢印キーでパドルを動かして、ブロックに当てます。

ブロックにピンポン玉が当たると、ブロックが崩れます（消える）。

全部のブロックを崩すと「game clear!!」の文字が表示され、ゲームクリアとなります。

また、ゲーム中に赤いレッドラインに触れると、「game over」の文字が表示され、ゲームオーバーとなります。

素材をリミックス

まずは、ブロック崩しゲームの素材をコピーします。

下のブロック崩しゲームの素材を置いてあるページを開いて、リミックスしましょう。

ブロック崩しゲームの素材ページを見る　＞＞

プログラムの内容

ブロック崩しゲームの素材には、すでに一部のプログラムがプログラミングされています。

プログラムの内容は、「スクラッチでピンポンゲームを作ってみよう！①」と「スクラッチでピンポンゲームを作ってみよう！②」を組み合わせたプログラムです。

こちらのプログラムを修正してブロック崩しゲームを完成させていきます。

ピンポンゲームの作り方やまだ作っていない子は、もう一度プログラムの内容を確認して、リミックスしたプログラムがどのようにプログラミングされているか理解しましょう。

新たに追加された部分

変数

今回、新たに追加された「変数」は、以下の２つです。

変数「ブロック数」は、生成されるブロックの数になります。

また、ブロックを崩すごとに、変数「ブロック数」の値を１ずつ減らし、0になったらゲームクリアとなるチェック用として利用されます。

変数「衝突位置」は、ピンポン玉がブロックのどこの面に当たったかで跳ね返る方向を変えるためのチェック用変数です。

ブロックの上下面にピンポン玉が当たったら、変数「衝突位置」の値を「上下」に、左右面に当たったら、「左右」の値に設定します。

そして、変数「衝突位置」の値によって、ピンポン玉の跳ね返す方向を設定します。

スプライト「文字」

スプライト「文字」のコスチュームに「gameclear」のコスチュームが新たに追加されました。

ゲームクリアしたときに、コスチューム「gameclear」を利用します。

また、スプライト「文字」の音にも「Win」の音が新たに追加されています。

こちらは、すべてのブロックを崩してゲームクリアしたときに、「game clear!!」の文字を表示し、ゲームクリアの音をだすために利用されます。

スプライト「ピンポン玉」

（画像をクリックすると大きくなります。）

スプライト「ピンポン玉」では、定義「パドルチェック」ブロックを作って、パドルに触れたときの処理を本体プログラムから分けています。

さらに、定義「ブロックチェック」ブロックを作って、ブロックに触れたときの処理がプログラミングされています。

ブロックに触れたときの処理については、後ほど詳しく解説します。

スプライト「ブロック」

ブロック崩しゲームで、新たに追加されたスプライトが「ブロック」です。

（画像をクリックすると大きくなります。）

こちらでは、ブロックを生成するプログラムと、ブロックがピンポン玉に触れたときのプログラムがプログラミングされています。

今回のブロック生成では、クローンを使ってプログラミングしています。

クローンで生成するため、コスチュームは１つしかありません。

スプライト「ブロック」のプログラムも、後ほど詳しく解説します。

スクラッチのクローンとは？

ブロック生成では、クローンを使ってプログラミングすると説明しましたが、まずスクラッチのクローンについて説明します。

スクラッチのクローンとは、ブロックを使って、スプライトをプログラムの実行中に、複製（コピー）することです。

クローンは、ブロックを実行するたびに作られて、最大300個まで複製（コピー）させることができます。

複製（コピー）されたスプライトには、それぞれ命令を与えることもできます。

ただし、プログラムの実行中のみ有効な命令で、プログラムが終了すると消えてしまいます。

そのため、通常のスプライトのコピーであれば、スプライトリストにコピーしたスプライトが表示されますが、クローンでコピーしたものは、スプライトリストには追加されません。

クローンのブロック

今回のクローンを使ったプログラムでは、下の２つのブロックを使います。

　

「制御」ブロック群の「〇のクローンを作る」ブロックは、指定したスプライトのクローンを作るブロックです。

▼をクリックすると、他のスプライトを選択できますが、今回は自分自身のクローンを作るので、「自分自身」を選択します。

「クローンされたとき」ブロックは、クローンされたときに、クローンされたスプライトに対して、下にくっつけたプログラムを実行するブロックです。

クローンを使うときのコツ

先に、クローンを使うときのコツを教えておくと、オリジナルのスプライトを、あくまでクローンを作るためのスプライトとして利用することです。

オリジナルのスプライトはステージ上では使わないので、隠しておきます。

クローンを作るときの流れは、下の通りです。

オリジナルのクローンはずっと隠した状態で、クローンを作った時にブロックを使って表示させます。

こうすることで、ステージでは、クローンされたスプライトしか表示されず、オリジナルのスプライトとクローンされたスプライトを別々にプログラムする必要がありません。

実際にブロックを並べるとこのようになります。

　

「見た目」ブロック群の「隠す」ブロックは、スプライトをステージから隠すブロックです。

「表示する」ブロックは、逆にスプライトをステージに表示させるブロックです。

スプライト「ブロック」のプログラム

クローンについて理解したら、スプライト「ブロック」のプログラムを見ていきましょう。

スプライト「ブロック」の初期設定では、以下が設定されています。

今回生成するブロックは、横に10、縦に4の合計40個のブロックです。

ブロックの初期位置は、一番左上のブロックの位置で、この位置を基準にクローンを生成していきます。

変数「衝突位置」は「上下」「左右」のいずれかの値が設定されますが、初期設定では空にしておきます。

変数「ブロック数」の値には、ブロックの総数（4×10＝40）を設定します。

そして、初期設定の下のプログラムが実際にブロックを生成するプログラムです。

「〇回繰り返す」ブロックの中に、また「〇回繰り返す」ブロックが入っていますよね。

プログラミングの世界では、同じ構造のプログラムが入っていることを「入れ子」や「ネスト」と言います。

入れ子が多くなる（ネストが深くなる）とプログラムの中身が分かりにくくなるので、プログラミングする際は注意しましょう。

（画像をクリックすると大きくなります。）

今回のプログラムでは「4回繰り返すブロック」の中に「10回繰り返すブロック」が入っていますので、10回×4回の合計40回繰り返す処理となります。

つまり、合計40個のブロックを生成するということです。

（画像をクリックすると大きくなります。）

もう少し詳しく説明すると、入れ子になっている10回繰り返すブロックの中のプログラムは、1行10個のブロックを生成するプログラムになります。

1個ブロックのクローンを生成すると、①でx座標を45ずつ（右）移動させます。

それを10回繰り返すと、1行10個のブロックのクローンが生成されます。

1行10個のブロックのクローンを生成したら、②でx座標を「-202」に、③でy座標を-45（下）の位置へ移動させます。

「x座標：-202」は、スプライト「ブロック」のx座標の初期位置で、「y座標」は２行目の位置へ移動したことになります。

（画像をクリックすると大きくなります。）

このプログラムを４回繰り返すことで、40個のブロックのクローンを生成されます。

また、④では、「▢の効果を〇ずつ変える（見た目）」ブロックで、ブロックの色の効果を25ずつ変えています。

色を変化させたくない場合は、「▢の効果を〇ずつ変える（見た目）」ブロックを削除しましょう。

クローンされたときのプログラム

こちらが、クローンされたときのプログラムです。

初期設定では、「▢へ移動する」ブロックで最背面に移動し、「表示する」ブロックで、クローンされたスプライト「ブロック」を表示させます。

最背面に移動しているのは、スプライトを操作すると、こちらのように文字が隠れる場合があるからです。

プログラムの実行中は、必ず文字が隠れないように、最背面に移動させます。

（画像をクリックすると大きくなります。）

次に「ずっと」ブロックを使って、ピンポン玉に触れたかどうかを常にチェックします。

ピンポン玉に触れたときの処理の内容は、以下の通りです。

①②の変数「衝突位置」の設定では、スプライト「ピンポン玉」とクローンされたスプライト「ブロック」のx座標からブロックのどこの面に触れたのかをチェックしています。

こちらが、条件式の範囲（赤線エリア）です。

（画像をクリックすると大きくなります。）

条件式の内容を詳しく説明すると、まず「〇＞〇(大なり)」ブロックで、左辺と右辺の値を比較しています。

左辺の値では、まず「ブロック（クローン）のx座標－ピンポン玉のx座標」で、２つのx座標の差（距離）を求めています。

こちらでは、２つの座標の距離を求めているだけなので、「〇の▢（数学関数）」ブロックを使って、２つの距離の絶対値を求めています。

絶対値とは、基準となる点からどれだけ離れているのか距離を表す値です。

基準となる点とは、ブロック（クローン）のx座標のことです。

よって、左辺では、ブロック（クローン）のx座標からどれくらいの距離にピンポン玉があるのか距離を求めています。

絶対値は中学1年生で習いますが、小学生の子はとりあえず「ブロック（クローン）のx座標－ピンポン玉のx座標」の値がマイナス値（－）だった場合、プラス値（＋）に置き換えるとだけ覚えておきましょう。

次に右辺の「40/2」ですが、こちらはブロックの横幅Wの半分の値となります。

右辺の①「ブロックの横幅Wの半分の値」より、左辺の②「２つの距離」が大きければ、ブロック（クローン）の左右面に触れたことになり、変数「衝突位置」を「左右」に設定します。

そして、右辺の①「ブロックの横幅Wの半分の値」より、左辺の②「２つの距離」が小さければ、ブロック（クローン）の上下面に触れたことになり、変数「衝突位置」を「上下」に設定します。

（画像をクリックすると大きくなります。）

他のチェック方法として、左右面ではなく、上下面の範囲から求めることもできます。

こちらの方が条件式は分かりやすいですが、ブロックが横長になり見にくくなります。

どちらでも同じ結果なので、自分が理解しやすい方で設定しましょう。

変数「衝突位置」の設定が終わったら、変数「ブロック数」の値を1減らし、「このクローンを削除する」ブロックを使って、ピンポン玉に触れたブロックのクローンを削除します。

「このクローンを削除する」ブロックは、作成した対象のクローンを削除するブロックです。

今回は、ピンポン玉に触れたブロックのクローンが対象となります。

ここまでが、スプライト「ブロック」のプログラムの説明です。

スプライト「ピンポン玉」のプログラム

次は、スプライト「ピンポン玉」のプログラムを見ていきましょう。

（画像をクリックすると大きくなります。）

スプライト「ピンポン玉」では、定義「パドルチェック」ブロックを作って、パドルに触れたときの処理を本体プログラムから分けています。

なお、パドルに触れたときの処理は、「スクラッチでピンポンゲームを作ってみよう！②のピンポン玉の動きを変更」と同じ処理です。

忘れた子は、もう一度確認しましょう。

（画像をクリックすると大きくなります。）

こちらは、定義「ブロックチェック」ブロックのプログラムです。

プログラムの内容は、パドルに触れたときの処理とほぼ一緒で、変数「衝突位置」が「上下」「左右」のときで、入射角＝反射角になるように計算式を分けています。

（画像をクリックすると大きくなります。）

こちらの計算式の内容については、「【スクラッチ】ボールの跳ね返り方４選」で詳しく解説していますので、確認しましょう。

定義「パドルチェック」ブロックでは、ピンポン玉がブロックに当たると、入射角＝反射角で跳ね返します。

それでは、リミックスしたブロック崩しゲームを一度プレイしてみて、ピンポン玉がブロックに当たって跳ね返るか確認してみましょう！

・

・

・

・

・

・

・

・

・

・

どうでしたか？

ちゃんとピンポン玉が跳ね返っていましたか？

中には、以下ような現象が起きた子がいるかもしれません。

実は、こちらのプログラムはそういった不具合があるプログラムです。

理由は、処理のタイミングが不明瞭だからです。

（画像をクリックすると大きくなります。）

こちらは、スプライト「ピンポン玉」とスプライト「ブロック」が互いに触れたときのそれぞれのプログラムです。

タイミング的には同じですが、実際どちらが先に処理されるでしょうか？

「【スクラッチ】ピアノの鍵盤で楽器の音を出してみよう②」で、並列処理でもスクラッチの実行するプログラムには優先順位があると話をしたの覚えていますか？

スクラッチのルールでは、プログラムを実行する優先順位は、以下のようになります。

こちらが、スクラッチのルールで、プログラムを実行する優先順位です。

　

そして、繰り返し処理がある場合は、繰り返し処理の中のプログラムが全て実行されて、繰り返しの最初に戻るタイミングにスレッドが切り替わります。

スクラッチでのプログラムの優先順位については、「スクラッチはマルチスレッド！処理の優先順位を徹底解説！」で詳しく説明していますので、プログラムを作り終わってから確認しましょう。

処理するタイミングによって、思った通りにならない場合は、処理するタイミングを明確にすることで回避することができます。

プログラミングの世界では、よくフラグを立てる方法が用いられます。

フラグとは、あるものが有効か無効かの状態を表す際に利用されるもので、変数を使って、フラグを立てます。

今回でいえば、以下の順番にフラグを使って処理をします。

変数「当たりチェック」が「0」のときは、お互い触れていない状態で、「1」のときは、お互いが触れている状態というわけです。

ポイントは、⑥の『変数「当たりチェック」が「1」になるまで待つ』の部分です。

変数「当たりチェック」を「1」にするのは、ブロックのプログラムですので、ピンポン玉のプログラムが先に処理された場合でも、ブロックのプログラムが終了してからでないと、ピンポン玉の⑥のあとのプログラムは実行されません。

フラグを使うことで、必ず「ブロック」→「ピンポン玉」の順にプログラムが実行されます。

以下のフラグを使ったプログラムを追加しましょう！

変数の設定は問題ありませんよね。

最初に変数「当たりチェック」を作成してください。

あとは、どのタイミングで設定するかです。

プログラムの流れを意識しながら、プログラミングに挑戦してみましょう！

・

・

・

・

・

・

・

・

・

・

「フラグを使ったプログラム」を作れましたか？

（画像をクリックすると大きくなります。）

まず、「変数を〇にする」ブロックを使って、初期設定の変数「当たりチェック」を「0」に設定します。

次に、ピンポン玉に触れときの処理の一番最初に、「変数を〇にする」ブロックを使って、変数「当たりチェック」を「1」に設定します。

これで、スプライト「ブロック」のプログラムの追加は完成です。

次は、スプライト「ピンポン玉」のプログラムに追加していきます。

こちらが、追加したスプライト「ピンポン玉」のプログラムです。

「◇まで待つ」ブロックでは、変数「当たりチェック」が「1」になるまで、処理を待って、ピンポン玉を跳ね返したら、最後に変数「当たりチェック」を「0」に戻しています。

これで、必ず「ブロック」→「ピンポン玉」の順にプログラムが実行されます。

プログラムを追加したら、ブロック崩しゲームをプレイしてみましょう。

先ほどの不具合がでてこなくなったら、OKです。

ゲームクリアのプログラム

今回のブロック崩しゲームは、全部のブロックを崩すと「game clear!!」の文字が表示され、ゲームクリアとなります。

ゲームクリアかどうか判断するには、変数「シーン」を使います。

現在設定されている変数「シーン」と新たに追加する値は、以下の通りです。

ゲームクリアのプログラムは、色々な方法があります。

自分なりに、ゲームクリアのプログラムを追加して、ブロック崩しゲームを完成させましょう。

作ったら、実際にプレイして不具合がないかちゃんと確認してください。

・

・

・

・

・

・

・

・

・

・

ゲームクリアのプログラムを追加できましたか？

先ほども言いましたが、ゲームクリアのプログラムは、色々な方法があります。

今回は、その１例として紹介します。

スプライト「ピンポン玉」のプログラム

（画像をクリックすると大きくなります。）

こちらは、スプライト「ピンポン玉」のプログラムです。

　

まず、初期設定では、「大きさを〇%にする」ブロックで大きさを「50」％にしています。

今回ブロックが40個も並びます。

ピンポン玉の動けるスペースがあまりありませんので、大きさを小さくしています。

また、「表示する」ブロックで初期設定時にスプライトを表示させています。

これは、「隠す」ブロックを使って、ゲームクリア時にピンポン玉を隠すプログラムを追加しているからです。

「表示する」「隠す」ブロックは、プログラムを停止しても状態はそのままなので、初期設定時に表示させるようにしています。

次に、「◇まで繰り返す」ブロックでは、『変数「シーン」が「クリア」または「エンド」のとき』に条件を変更しています。

そして、変数「ブロック数」が「0」になったら変数「シーン」を「クリア」に、スプライト「レッドライン」に触れたら変数「シーン」を「エンド」に設定するプログラムを追加しています。

スプライト「パドル」のプログラム

（画像をクリックすると大きくなります。）

こちらは、スプライト「パドル」のプログラムです。

こちらも「◇まで繰り返す」ブロックで、『変数「シーン」が「クリア」のとき』の条件を追加しています。

スプライト「文字」のプログラム

（画像をクリックすると大きくなります。）

こちらは、スプライト「文字」のプログラムです。

まず初期設定で、「▢へ移動する」ブロックを使って最前面に設定追加しています。

これは、クローンされたブロックの下にスプライト「文字」が表示されるのを防ぐためです。

最前面に設定することで、必ず文字が一番前に表示されるようにします。

次に「◇まで待つ」ブロックでは、『変数「シーン」が「クリア」のとき』の条件を追加しています。

そして、変数「シーン」を使って、ゲームオーバーの処理とゲームクリアの処理を分けてプログラミングしています。

背景のプログラム

こちらは、背景のプログラムです。

こちらも『変数「シーン」が「クリア」のとき』の条件を追加しています。

これで、ブロック崩しゲームのプログラムの完成です。

プログラミングが終わったら、プレイしてみて不具合がないか確認してみましょう。

まとめ

「スクラッチでブロック崩しゲームを作ってみよう①」では、ブロック崩しゲームのプログラムを作っていきました。

完成したプログラムの中身を見たい人は、こちらから確認してください。

プログラムを確認する 　＞

次は、得点を付けて永遠に続くブロック崩しゲームを作っていきます。

永遠のブロック崩しゲームを作りたい子は、次の「スクラッチで永遠のブロック崩しゲームを作ってみよう②」へ進みましょう！

---

【Step6】スクラッチでプログラミング！

• スクラッチでピンポンゲームを作ってみよう①
• スクラッチでピンポンゲームを作ってみよう②
• スクラッチでブロック崩しゲームを作ってみよう①　←今ココ
• スクラッチで永遠のブロック崩しゲームを作ってみよう②
• スクラッチで汎用性のあるブロック崩しゲームを作ってみよう③

【Step5】「キー」「マウスクリック」のプログラムに挑戦！

• ピアノの鍵盤で楽器の音を出してみよう①
• ピアノの鍵盤で楽器の音を出してみよう②
• ピアノの鍵盤で楽器の音を出してみよう③

【Step4】歩くプログラムに挑戦！

• スクラッチでプログラミング009｜歩くプログラムを考える①
• スクラッチでプログラミング010｜歩くプログラムを考える②
• スクラッチでプログラミング011｜歩くプログラムを考える③
• スクラッチでプログラミング012｜歩くプログラムを考える④
• スクラッチでプログラミング013｜歩くプログラムを考える⑤
• スクラッチでプログラミング014｜歩くプログラムを考える⑥

【Step3】スクラッチとプログラミングの基本知識

• スクラッチでプログラミング001｜スクラッチの画面について
• スクラッチでプログラミング002｜ブロックの使い方①
• スクラッチでプログラミング003｜ブロックの使い方②
• スクラッチでプログラミング004｜コスチュームの使い方
• スクラッチでプログラミング005｜スプライトの座標
• スクラッチでプログラミング006｜スプライトの向き
• スクラッチでプログラミング007｜爆速で上達するプログラミングのコツ
• スクラッチでプログラミング008｜ブロックの結合・複製・削除方法

【Step1・Step2】スクラッチアカウント作成とログイン方法

• スクラッチアカウントの作成とログインする方法

ブロック崩しゲームのプログラム

ブロック崩しゲームのプログラムは、こちらの通りです。

詳しい説明が必要な方は、最初に戻って読み進めてください。

「文字」のプログラム

（画像をクリックすると大きくなります。）

「パドル」のプログラム

「ピンポン玉」のプログラム

（画像をクリックすると大きくなります。）

「ブロック」のプログラム

（画像をクリックすると大きくなります。）

「レッドライン」のプログラム

「背景」のプログラム