Scratch(スクラッチ) 難易度★★★⭐︎⭐︎

Scratchでブロックくずし - クローン・変数

 

Scratch(スクラッチ)を使用した簡単ゲーム作り、第3弾です!

今回はブロック崩しを作ってみますが、キーワードは

クローンと変数

です。

クローンと変数を組み合わせればたった1つのスプライトから無数のブロックを作ることができ、これを覚えておけば色々なゲーム作りに応用できます。

プログラミングやスクラッチを始めたばかりの方や、プログラミング必修化に向けた家庭学習を考えている親子の方々にオススメです!

ニャアの課題もあるニャア

 

初めての方はこちらの基礎からどうぞ。

プログラミング学習はスクラッチから!だれでも簡単・使い方入門

  プログラミング学習を始める入り口として最適なScratch(スクラッチ)の始め方や基本操作を解説します。 小中学生のお子さんを持つご両親はもちろん、プログラミング初心者の方にもオススメで ...

続きを見る

 

ボール・パドル・バーを作る

ではまずゲームに必要な備品準備から始めましょう。

ボールとパドルはスプライトを使い、バー(ボールを打ち損じた時の判定用)は描画します。

Scratchの「作る」画面を開いたらまずはネコを消し、ボールのスプライトとパドルのスプライトを探しましょう。

ポイント

  • 「スプライトを選ぶ」→「Ball」
  • 「スプライトを選ぶ」→「Paddle」

  • 次にスプライトを選ぶでなく「描く」を選び、描画画面へ

  • 描画画面で横長のバーを描く(好きな色でOK!)

  • 画面の一番下に配置する
位置はステージで直接動かして調整できるニャア!

  • 描画したバーのスプライトの名前を「bar」にしておく

 

パドルの動きを作る

早速動きを作りますが、一番簡単なパドルから作ります。

ポイント

パドルはマウスの動きに合わせて左右に動くようにしますが、Y(縦)方向には動かないようにします。

それには「調べる」メニューの中の「X座標」を使います。

手動でY座標の位置を調整してスクリプトには「X座標をマウスのx座標にする」にしても良いですし、「x座標をマウスのx座標、y座標を**にする」を使って数値でY座標を設定しても良いです。

難易度アップのためにパドルの大きさを50%にしたニャア

また、マウスに合わせた動きではなく←や→のキーで動くようにしてもOKです。

 

ボールの動きを作る

次にボールの動きを作っていきますが、背景もここで決めてしまいましょう。

先ほどスプライトを描いたのと同じように背景も自分で描くことができます。

もちろん背景の中から選んでも良いニャア!

背景を自分で描く場合は「背景を選ぶ」ではなく「描く」を選択し、描画画面で好きなように描いてみてください。

「描く」から描画画面へ

ニャアはシンプルにベタぬりニャア

背景が決まったら、次のようにしてボールの動きを作っていきます。

ポイント

  • が押されたとき」を始めに置く
  • 「大きさを○%にする」でボールの大きさを調整する
  • 「x座標を○、y座標を○にする」でスタート時のボールの位置を指定する
  • 「2秒待つ」を追加(なくてもOK)
  • 「ずっと」の中「○歩動かす」「もし端に着いたら、跳ね返る」を入れる

各スクリプトで○としているところを自由に変えて、好みの動きになるようにしましょう。

特に「○歩動かす」はゲームの難易度を左右するので重要です!

○歩を変えると、何が変わるのかニャア?

 

さて、これが基本的なボールの動きです。

試しにを押してみると、ボールがステージ内を動き回るのがわかると思います。

では次に、パドルに当たったらボールが跳ね返るプログラムです。

ポイント

  • 「ずっと」の中に「もし< >なら」を追加
  • 「調べる」にある「○に触れた」を使い、「もしPaddleに触れたなら」にする
  • 「Paddleへ向ける」「180度回す」を追加

「180度回す」があることで、Paddleにボールが当たった時に反対方向に跳ね返る動きができます。

「Paddleへ向ける」があることで、paddleの当たった位置によって角度が変わるようになります。

 

次にボールがbarに当たったときの動きを決めます。

barに当たるとゲームオーバーにするニャア

 

ポイント

ボールの動きに関することなので、これもボールのスクリプトに加えます。

  • 「ずっと」の中に「もし< >なら」を追加
  • 「調べる」にある「○に触れた」を使い、「もしbarに触れたなら」にする
  • 「すべてを止める」を追加

を押してプレイしてみてください。

barにボールが当たったらすべての動きが止まるようになりましたか?

ここでゲームオーバーの画面に切り替わるようにしても良いニャア

 

ブロックを作る

次にブロック崩しのブロックを作ります!

スプライトからブロックっぽいもの(例:Button3)を選んでも良いですし、自分で描いても良いです。

ニャアはこんな風に書きました。※スクリプト名を「block」にしておくことを忘れずに!

 

ブロック崩しのスクリプトを作る

ブロックができたら、ボールを当てて崩す(消す)ためのスクリプトを作りましょう。

ポイント

ブロックのスクリプト画面で、次のようにスクリプトを作ります。

  • が押されたとき」「ずっと」
  • 「もし< >なら」を使い、「もしballに触れたなら」→「隠す」とする
  • 「変数を作る」「score」の変数を作り、「scoreを1ずつ変える」を追加

を押したらパドルでボールを打ち返すなどして、ブロックを消してみてください。

同時にscoreも変わるかどうか確認しましょう。

 

クローンでブロックを量産!(変数を使用)

これでブロック崩しの基本形ができました!

しかしブロックがたったひとつではゲームにならないので、ブロックを増やしたいですよね。

どうやって作るニャア?

スプライトを複製(コピー)すればブロックはいくらでも作れますが、スプライトの数が膨大になってしまって、ちょっと大変です。

そこで今回のキモとなるのが「クローン」です。

クローンを使えば、ブロックのスプライトがひとつあるだけでブロックを量産することができます。

 

ポイント

ブロックがクローンされた時にきれいに整列していくように、新たに2つの変数を作ります。

わかりやすく「縦」「横」としたニャア

  • が押されたとき」→「隠す」(※この「隠す」は本体を隠すため必要)
  • 変数「縦を0にする」「横を0にする」を追加
  • 「自分自身のクローンを作る」「横を1ずつ変える」「5回繰り返す」で囲む
    (「色の効果を○ずつ変える」はお好みで)

これが横方向に5個クローンするプログラムです。

それを縦方向に4行コピーするために、さらに「4回繰り返す」で囲みます。

  • 「4回繰り返す」の中に以下のようにスクリプトを入れる

現時点では意味不明だと思いますが、この後クローンの動きを作れば全体像が見えてくると思います。

ではそのクローンの動きは「クローンされたとき」で始めます。

  • 「クローンされたとき」
  • 「x座標を○+○*横、y座標を○-○*縦にする」
    ※座標を設定することで、クローンを均等に配置できます。
数式はこんな風に別の数式の中に組み込めるニャア!

  • 「表示する」を追加
  • 「ずっと」内に「もしballに触れたなら」「scoreを1ずつ変える」「このクローンを削除する」を入れる

このスクリプトを作ったあとは、先ほど作ったブロック本体のスクリプトを削除してもOKです。

先ほど作ったブロックのスクリプト

ここまでできたら、を押して確認です!

プログラムができていれば、を押した瞬間にブロックが5列4行の計20個、画面に現れます。

 

このように均等に配置されましたか?

もしそうでなかったら、ニャアの課題に取り組んでみてください。

 

ニャアの課題①

「x座標を○+△*横、y座標を◇-□*縦にする」のどこを変更すれば位置が変わるでしょう?どこを変更すれば横や縦の間隔が変わるでしょう?
○△◇□の数字を1箇所ずつ変えて確認してみましょう。

 

・・

・・・

では正解です。

○と◇はクローンのスタート位置、△は横方向の間隔、□は縦方向の間隔です。

ちなみに参考画像と全く同じ値にしたとしても、ブロックの大きさによっては位置や間隔がずれるので、うまく調整してみてください。

 

ボールがブロックを突き抜ける?!

さて、ちょっとプレイしてみると感じたかもしれませんが、今のプログラムではボールがブロックに当たっても壁まで突き進んでしまい、あっという間にすべてのブロックを消してしまいます。

ということで、ブロックに当たると跳ね返るようにしたいと思います!

ボールがPaddleに当たった時の設定を思い出して、さっそくスクリプトを追加してみましょう。

このようになります。

ポイント

  • 「もしblockに触れたなら」→「180度回す」

 

ゲームクリアの設定

ブロック崩しゲームが形になってきたと思います。

最後にニャアの課題をこなして、素敵にゲームクリアをしましょう。

 

ニャアの課題②

ブロックをすべて消したら”ゲームクリア”の画面になるようにするには、どんなスクリプトが必要でしょう?

 

・・

・・・

では答えです。

このブロック崩しには20個のブロックがあり、すべて消すとクリアです。

つまりscoreが20になった時ブロックを20個消したことになるので、scoreを使います。

ボールのスクリプトの最後にこちらを加えましょう。

 

ポイント

  • 「もしscore=20なら」→「背景を○○にする」 ※「隠す」はお好みで

合わせてゲームクリア画面も作っておきましょう。

※背景の設定と文字の書き方について詳しくは「Scratchのコスチュームはこんなに使える!」のメニュー「文字を描く」を参考にしてください。

ニャアはこんな風にしたニャア!

ちなみにゲームを再スタートするとゲームクリア画面のままになっているので、ボールのスクリプトの冒頭に背景の設定を加えるのも忘れずに。(ゲームクリア時にボールを「隠す」にした場合、「表示する」も冒頭に加えます。)

ボールのスクリプトに

そしてscoreもスタート時に0に戻す必要があるので、「背景」のスクリプトに設定しましょう。

BGMを加える場合もここに一緒に設定しましょう。

背景のスクリプトに

 

これで完成!おつかれさまニャア

プログラムのおさらいは動画でもどうぞ。

 

発展させよう

ここまではブロック崩しの最低限の仕組み作りなので、この先は自由にアレンジしたり発展させたりしてみてほしいと思います。

特にボールの跳ね返り方やクローンの並ばせ方、ゲームクリアの判定方法など、他のプログラム方法の可能性を考えたり実践して分析したりすることがプログラミング的思考を育むのに効果的です。

今回作成したニャアのブロック崩しはScratchのシェアページからプレイしたりスクリプトを見ることができるので参考にどうぞ。

Scratchのサイトには世界中のユーザーの作ったゲームがシェアされているので、とても刺激になります。

日本語に設定すればスクリプトも日本語で確認できるニャア

 

『変数とリストがわかるScratchゲーム作り3レッスン』のnoteも作りました!

よかったらあわせてどうぞ🐾

 

ではまた次回お会いしましょう。

 

オンラインレッスン受付中!

インスタフォローで更新情報チェックニャア…  

ごきげんよう

 

-Scratch(スクラッチ), 難易度★★★⭐︎⭐︎
-, , , ,

error: Content is protected !!

© 2020 ニャアのスクラッチ Powered by AFFINGER5