キミも未来のトビラをひらこう!!

公式LINEで相談♪

programmingSchool

できたを育むプログラミングスクール

レッスン11ブロックくずしゲームを作ろう!

チャプター01はじめに

このチャプターのポイント

ブロックくずしゲームを作ろう

・完成形を確認かくにんしよう

まずは、今回のレッスンで作るものを見ていくよ。 今回は、ステージ上にブロック・ボール・バーが登場し、ボールを落とさないようにバーを動かしながら、ブロックをこわしていくブロック崩しゲームを作ろう!

もしかしたら、ブロック崩しゲームで遊んだことのある人もいるかも? Scratchで作るブロック崩しゲームは、本格的なゲームになっているから、さいごまで諦めずに作りきって、自分で作ったゲームであそべるようになろう! では、実際に作っていこう!

チャプター02スプライトと背景を確認しよう

このチャプターのポイント

ゲームにつかう背景・スプライトを用意して設定していこう

・スプライトを確認かくにんしよう

まずは、スプライトを確認するよ。

  • ねこ
  • りんご
  • 毒りんご

合計3つ設定されていればOKだよ。

チャプター03バーを動かそう

このチャプターのポイント

マウスの動きに合わせてバーをうごかそう

・マウスの位置からx座標を決める

ゲームを実際に作っていこう! ブロック崩しは、バーを操作して左右にうごかして、ボールが落ちないように跳ね返しながらブロックにボールをぶつけてブロックをけしていくゲームだよ

まずは、バーの動きを作っていくよ。 今回は、マウスを動かしてバーを移動できるようにしていこう。 まずは、スタートの位置そして、バーの大きさをきめるスクリプトを作ってみよう。 スタートの位置は、 x座標を0y座標を-160とするよ。

今のままだとスプライトが大きいままだから、見た目の中にある、 [大きさを~%にする] をつかって、スプライトをもう少し小さくしよう。 まずは、60%に設定してね。 このブロックをつかうことで、数字を変更するだけでスプライトの大きさが調整できるので、あとでゲームのむずかしさを変えたい時などにスムーズだよ!

つぎに、左右の動きだけマウスに合わせて変えられるようにしたいので、x座標がマウスの位置に合わせて変わるようにしよう。 以前つかった[マウスのポインターへ行く]では、y座標も変わってしまうので、少し工夫が必要だよ。

動きの中にある[x座標を~にする]と調べるの中にある [マウスのポインターに触れた]と [マウスのx座標] をつかうことで、x座標の数字だけマウスに合わせて変えられるようにしていくよ。

[x座標を~にする]の、 「~」部分にマウスのx座標のブロックを追加してね。

これで、スタートしてマウスをステージの近くで動かしてみよう! マウスの動きに合わせて動くようになったね! さいごに、スタートの時の状態を整えるために、[表示する]と[1秒待つ]を追加しよう。 バーが表示されてすぐにではなく、1秒待ってからゲームがはじまるね。 これで、バーの動きは完成だよ!

チャプター04ボールを動かそう

このチャプターのポイント

ボールがステージの中を跳ね回るようにしよう

・端についたら跳ね返るようにしよう

つぎは、ボールの動きを作っていくよ。 ボールはスタートしたら、ステージ上を跳ね回るようにしていきたいよね。

まずは、バーと同じく、スタートの位置そして、ボールの大きさを決めるスクリプトを作ってみよう。 スタートの位置は、 x座標が0、y座標が-139とするよ。 そして、スタートした時に、スタートの 位置から右上にむかってボールが上がっていくようにしたいので、角度も45度にしておこう。 そして、バーの時と同じように大きさも80%になるようにブロックを追加しよう。

そして、ボールはゲームがスタートしたらステージ上をうごかして、端についたら跳ね返るようにしたいので更にブロックを追加しよう。

これで、グリーンフラッグをクリックすると、ボールがステージ上で跳ね回るようになったね!

さらに、スタートの時の状態を整えるために、表示すると1秒待つを追加しておこう。

ただ、ボールは動き回るようになったけれど、このままだとボールがバーをすり抜けてしまって、ゲームにならないよね。 次のチャプターで跳ね返す設定をしていこう!

チャプター05バーでボールを跳ね返そう

このチャプターのポイント

バーを使ってボールが跳ね返るようにしよう

・角度を変えることでボールを跳ね返そう

さあ、それでは、ボールをバーで跳ね返るようにしていこう。 今回、ボールを跳ね返すために、角度をつかっていくよ。 スクリプトは簡単に作れてしまうので、まずはスクリプトの作り方を教えるね。

次の図のようにバーに触れた時に、[(180 – 向き)度に向ける] というブロックをつかってみよう。 演算と、動きの中にあるブロックをつかっていこう。 [向き]は動きの中の一番下にあるよ。

このスクリプトで、バーをつかってボールを跳ね返すことができるようになるよ! この時、跳ね返る方向は、バーに触れた時の正反対の方向になっているよ。 でもなんで、[(180 – 向き)度に向ける]のスクリプトでボールを正反対の方向に跳ね返えすことができるようになるかな?

まず、Scratchにおける角度について思い出してみよう! 角度は、 上が0度、右が90度、 下が180度、左が-90度 だったよね。

上の2つを組み合せることで、なんで、[(180 – 向き)度に向ける]のスクリプトでボールを正反対の方向に跳ね返えすことができるようになるかがわかるよ!

たとえば、135度の角度で左上からやってきたボールが跳ね返って正反対の右上に行く時は、図のように直線の時の角度180度から135度を引くと、ボールの角度から0度までの角度が45度というのがわかるよね。 そこで、バーにぶつかった時0度から正反対の方向に行くには、45度の方向に向けて上げればいいよね。

ほかの角度でも考えてみよう、今度は150度の角度でボールが来たときを見てみよう。 同じように、180度から150度を引けば跳ね返って正反対にむかうための角度が出るよね。 このように考えることで、ボールを正反対に跳ね返すことができるようになるんだよ。

つぎに、右上からボールが来た場合についても考えておこう。 れいとして、-150度でボールが来たとして考えてみるね。 -150度という角度は、真上を0度として左へ150度回った角度だよ。 一周は360度なので、これは真上から右に210度回ったときと同じ角度だよ。 -150度と210度は同じ角度を表しているんだ。

図を見てみると、180 – 210 = -30がボールが正反対に跳ね返る時の角度だね。 180から-150を引いても、 180 – (-150) = 330度で、 -30度と同じ角度になるよ。

このように、左右どちらの方向からボールが来ても180 – ボールが来た向きの角度にむければボールが正反対の方向に跳ね返るようになっているんだよ!

チャプター06エフェクトを追加しよう

このチャプターのポイント

ゲームを楽しくするためにエフェクトを追加しよう

・効果音をつけよう

このチャプターでは、ゲームを楽しくするために、効果音のエフェクトを追加しよう。 エフェクトは、前のレッスンでもつかったように、効果音をつけたり色を変えたりすることだったよね。 今回は、ボールがバーに触れたら、「ポップ」の音が鳴るようにしよう。

まずは、ボールのスプライトが「ポップ」の音をもっているかどうかを確認するよ。 ボールのスプライトを選択して、音のタブに移動しよう。「音を選ぶ」のボタンから、popの音を追加しよう。

追加したら、スクリプトのタブにもどって、音の中からポップの音を鳴らすのブロックを追加しよう。

これで、ボールがバーに触れた時のエフェクトは完成だよ! 効果音は、自分の好きな音に変えてもOKなので、楽しいゲームにしてみてね。

チャプター07ブロックを作ろう

このチャプターのポイント

ブロックを並べてブロック崩しができるようにしよう

・クローンを使ってブロックをならべよう

こんどは、ボールを当てるブロックを作っていくよ。 ブロックは、横に5個並べたもの縦に3列合計15個のブロックが並ぶようにしよう。 スプライトを15個複製して作ることもできるけど、これはクローンの機能をつかって作っていくのが効率的だよね。

まずは、クローンでブロックが15個並ぶようにしていこう。 15個並べるためには、本体を15回クローンすればいいよね? 左上にさいしょのクローンを作って、そこから右にx座標をかえながらクローンを5個作る、そして、 それを3列分y座標をかえながら作っていけば、合計15個のブロックを作ることができるよ。

スクリプトはくりかえしのブロックをつかうことで、なるべくスクリプトをまとめるようにしよう。 まずは、ブロックのスプライトを選択。

自分自身のクローンを作るのブロックをつかって、15個のブロックを作っていくよ。 この時、Ghostを倒すゲームでもあったように、本体は隠すようにしておこう。

本体は隠しているので、クローンされた時に、クローンが表示されてブロックが並ぶようにしていこう。 これまでと同じく、ブロックのスプライトも大きいので、このタイミングで40%の大きさになるように調整するよ。 これで、グリーンフラッグをクリックすると、ブロックのスプライトが15個並ぶようになったね!

・ブロックを消そう

ブロックが15個並ぶようになったけれど、このままだとボールがブロックをすり抜けてしまうよね。 クローンを削除することで、ブロックがきえていくうごきを作っていこう。 これで、ゲームをスタートしてうごきを確認してみよう! ボールが触れるとブロックがきえていくようになったね!

チャプター08ブロックのスクリプトを完成させよう

このチャプターのポイント

ブロックのスクリプトにうごきを追加していこう

・メッセージを使ってボールの向きを変えよう

ボールがブロックに当たった時に、ブロックがきえるようになったけれど、完成形とはちがってブロックを突き抜けてボールが進んでしまっているよね。 ボールがブロックに当たったらバーに当たった時と同じように、跳ね返るようにしていこう。

ボールの向きを変えるには、ボールのスクリプトで向きを指定する必要があるので、まずは、ボールがブロックに当たった時が分かるようにしよう。 ブロックのスクリプトを選択。

ボールがブロックに当たって消える前に、「ブロックに当たった」という メッセージを送るようにしよう。

これで、ボールがブロックに当たった時が分かるようになったね。 つぎに、ボールのスプライトを選択。

先に作った、バーに当たった時と同じ ように、むきを正反対にするようにしていこう。 これで、ブロックを突き抜けることはなくなったね。

・効果音をつけよう

バーとボールが触れた時と同じく、ボールがブロックに当たった時にも、 「ポップ」の音が鳴るようにしていこう。 ブロックのスプライトを選択。

「pop」の音をバーのときと同じように追加して、音の中からポップの音を鳴らすのブロックを追加すればよかったね。

これで、ブロックのスプライトのスクリプトも完成だ!

チャプター09ゲームの終了を作ろう

このチャプターのポイント

ボールがバーに当たらず下に落ちたらゲームオーバーにしよう

・y座標の位置でゲームオーバーを判定しよう

ここまでで、ブロック、ボール、バーのうごきはできたので、 ゲームオーバーになる条件を作っていこう。

ボールがバーに当たらずに、下におちたらゲームオーバーにしたいので、ステージの 下の端にふれたらゲームオーバーというようにすれば良いよね。 ゲームオーバーになったら、背景をゲームオーバーの背景に変えて、すべてのスクリプトを止めるようにしていこう。 y座標の位置をつかって、ボールが下に触れたらという部分を作っていこう。 まずは、ボールの大きさを把握していこう。

ボールの大きさは、スプライトのコスチュームの部分で確認することができるよ。

ボールのサイズは高さが30ということが わかったね。 (30×30は(幅×高さ)の意味だよ。高さは、うしろの数字をみればいいよ) スクリプトをつかって、大きさを80%にしているから30×80%=24が ゲームが行われる時のボールの高さに なるよね。ボールの半径はその半分だから24÷2=12だね。

ステージの下の端のy座標は-180だから、ボールのy座標が-168以下になったらボールがステージの下の端っこにとどいたことになるよ。

実際にスクリプトを追加していくよ。 ボールのスプライトを選択。

ゲームオーバーになったら、背景をゲームオーバーの背景に変えて、すべてを止めるようにしよう。 これで、ボールがステージの下の端についたらゲームオーバーになるようになったね。

・スプライトを消そう

ゲームオーバーになった時には、ブロック、ボール、バーのスプライトをけすようにしよう。

先に作った、ゲームオーバーの条件の部分に、メッセージで「ゲームオーバー」のメッセージを追加して、ゲーム終了のメッセージをうけとったときに、それぞれのスプライトのスクリプトエリアでスプライトがきえるようにしていこう。

それぞれのスプライトを隠していけばいいけれど、ブロックだけはクローンなので、クローンを削除するようにしないといけないので気をつけてね!

ブロックのスクリプトに追加

バーのスクリプトに追加

ボールのスプリクトに追加

これで、ゲームオーバーの動きも完成だよ! さいごに、ゲームオーバーになったかどうかをはんべつするボールのスクリプトにスタートした時に背景を文字のない背景に戻すようにスクリプトを追加しておこう。

チャプター10制限時間をつけよう

このチャプターのポイント

制限時間を作ってゲームが時間になったらゲームを終了させよう

・30秒の制限時間をつけよう

制限時間は、変数をつかってカウントできるようにしていくよ

まずは、データの中から、「残り時間」という変数を作ろう。

つぎに、ねこのスクリプトエリアで、グリーンフラッグがクリックされたとき残り時間を30にして、得点も0からはじまるようにしよう。

制限時間は30秒なので、「残り時間」の変数を30から1秒毎に1へらしていけば30秒をカウントすることができるよね!

これで、グリーンフラッグをクリックすると、ステージ上の、のこり時間の変数が1秒毎にへっていくのを確認しよう。

そして、のこり時間がなくなったら、ゲームを終了させたいので、今作ったスクリプトのさいごにスプライトのほかのスクリプトを止めるを追加しよう。

これで、ねこの同じスプライトのほかのスクリプトの実行が止まって、ゲームが終了します。 残り時間が0になったらりんごのスプライトもスクリプトを止めて隠せれるようにしよう。

これで制限時間も完成だよ!

チャプター11最後に

・まとめ

さいごにここまで学んだことをおさらいしてみよう。 このレッスンでも、これまでつかってきた様々なブロックをつかって複雑なゲームを作ることができたね! ブロック以外のところで、跳ね返る角度の部分は、 少し考えないといけないところもあったので、むずかしかったかな?

これまでつかったことのある概念や、学校でならった算数を応用にしてゲームを作っていくことができるんだよ。 ほかにも、マウスのx座標に合わせてx座標を変えたり、場所を特定してクローンを作ったりなど、これまでの応用で作る場面がいっぱいあったね。 しっかり復習をして、どんどんむずかしいゲームにも取り組んでいこう! 時間がある人は、ゲームをむずかしくしたりすることで、自分なりのゲームを作ってみよう!