前回の ブロック崩しを作ろう のつづきです。
これまでゲームを作ってきて「身に付いてないな」と感じたら、もう一度やり直してみてはどうでしょうか。
プログラミング学習の本質は記憶することではありませんが、機能を知っている必要があります。知らなければ利用できないし詳細を検索することもできないからです。
なので、同じ課題を繰り返しやってみることはそれなりに効果があります。
打ち返す仕組みを変更しよう
ボールをバーで打ち返しているとき、たまに謎な現象が起こります。
下図のようにバーの中をボールが跳ね回ることがあります。
これはバーの側面からボールを受けたときに起こります。
バーに当たってボールの向きは反転しますが、次のフレームでバーから出られなかったために符号がまた反転してしまうのです。
対処法はいくつかありますが、必ず上に打ち返すように絶対値で計算する方法で解決してみます。
計算 の 0の絶対値 をドラッグします。
下図のように、当たり判定の下に配置しましょう。
otherSpriteの vy（速度 y） を絶対値の中に入れます。
絶対値のブロックを戻します。
絶対値にすることで計算の結果は必ずマイナスになります。
つまりボールは必ず上に移動します。
ブロックを表示しよう
バーとボールができたので、最後にブロックを作ります。
分かりやすいように少しずつ作っていきます。
まず 最初だけ の最後に新しいスプライトを用意します。
準備ができたら絵を作ります。
絵のサイズを幅 19 高さ 9 に変更します。
緑色を選択し、塗りつぶしツールで色を塗りましょう。
終わったら「完了」をクリックしてエディタを閉じます。
分かりやすくするため、変数名 mySprite2 を変更します。
新しい変数名を block にします。
下図のようになりましたか？
シミュレーターでブロックを確認しましょう。
スプライトの位置を変更します。
命令を組み込んだら、変数名を blockに変更して位置を x 0 y 20 にします。
画面を確認するとブロックが半分だけ隠れて左上に表示されます。
複数のブロックを表示しよう
ブロックをきれいに並べていきます。
ループ の中から、黄色で囲った繰り返しをドラッグします。
変数 block のスプライトをループの中に入れます。
位置を指定するブロックも一緒に入れます。
ループ処理を 最初だけ の中に戻します。
下図のようになります。
忘れていました。
変数 block のタイプを Enemy に変更します。
ブロックを並べるためには、表示座標をずらす必要があります。
その仕組みを作っていきましょう。
計算 の中の 0 x 0 をドラッグします。
x座標の枠に入れます。
変数 カウンター を先ほどの計算式に入れます。
すると計算式のブロックが外へ出てしまいました。
作業しやすくするため、計算式のブロックは外に配置したまま カウンター を入れます。
そして カウンター x 0 を x座標の中に戻します。
変数 カウンター に掛ける数値を 20 にします。
これでブロックは x座標を 20 ずつずらして表示されます。シミュレーターの画面を確認しましょう。
ブロックの幅は 19 で作ったので、下図のように隙間ができます。
画面いっぱいに並べるには繰り返しが足りません。
カウンターを 0 から 7 までに変更してブロックを８つ作ります。
なぜか、右側が少し空いてます。
画面サイズは幅 160 なので、幅 19 のブロック（計算では20を掛けている）を８つ並べたら幅いっぱいに表示されるはずです。
ブロックが左にずれている理由は、スプライトの基点が中心にあるためです。
ブロックの幅は 19 なので、その中心 10 の数だけ右にずらして表示すれば解決です。
+10 するように計算式を変更します。
計算の中から足し算を用意します。
足し算の中に カウンター x 20 を入れます。
最後に カウンター x 20 + 0 を x座標に戻します。
足す数を 10 に変更します。これで カウンター x 20 + 10 にします。
画面を確認してみましょう。
ブロックの表示を３段にしよう
ブロックの表示を３段にします。
これまでの処理をコピーして作れば簡単です。
ループブロックの所を右クリックしてメニューを出し「複製する」を選びます。
複製されたブロックは半透明になってます。
スプライト表示と位置指定のブロックだけドラッグして、コピー元のループの中に入れます。
残ったループブロックは捨てましょう。
コピーしたブロックの y座標を 32 に変更します。
画面を確認すると２段になっています。
２段目は違う色にします。オレンジ色で塗りましょう。
緑色で塗りつぶした方法と同じ手順でできます。
３段目を作ります。先ほどとは違う手順で作業します。
２段目のスプライト（オレンジのblock）を右クリックして複製しましょう。
続けて２段目のblockの位置指定も複製します。
それらを２段目の下に追加してください。
下図のようになっていますか。
３段目の y座標を 44 に変更します。
３段目の block は黄色に塗りつぶしましょう。
カラフルな画面になりました。
次回の完結編に続きます。