ブロック崩しを作ろう

仕様を決める

概要：パドルでボールを打ち返し、画面の上に並んだブロックを消してゆく

• ブロックは9個×2段で、それぞれ隙間を空けて並べる
• ボールは一定の位置から一定の速度でランダムな角度で発射される
• パドルは横方向のみ移動する
• パドルはマウスの動きで移動する
• ボールが当たるとブロックは消える
• すべて消すと勝ち
• 後ろにそらしてしまうとゲーム終了
• ボールはブロックに当たると跳ね返る
• ボールは壁に当たると跳ね返る
• パドルの位置により跳ね返る方向が変わる

素材の準備

素材はここからダウンロード

スクリプトブロックを組み上げる

スクラッチキャットは削除して、ボール・パドル・ブロックの画像をスプライトに追加しておく

ボールの動きを考える

1. まずボールは一定の位置からある範囲のランダムな角度で発射され、壁に当たると跳ね返るように設定する
   
2. パドルの動きを設定する
   
3. ボールにパドルと当たった時の動きを追加する
   「端に着いたら跳ね返る」ではない跳ね返りを考えると
   • こうすると正反対方向に跳ね返る
     
   • 入射角と反射角が同じになるようにするにはこの角度にすればよい。
     グローバルな座標系から見ると角度はこうだが、
     
     これをボールの［向き］から見ると
     
     すなわち180からボールの向きを差し引くと反射角を得ることが出来る
     
   • ただ、これでは常に同じ角度で反射してしまうので、仕様にあるようにパドルに当たる位置で跳ね返りが変わるようにするには
     パドルのどこに当たったかを判定して［もし］で角度を変える…などとすると大変になるので
     
     こう考えるとパドルの端に当たれば角度が大きくなり、中央に当たれば上に跳ね返るようになる
     これをスクリプトにすると、一旦パドルの中心に向き、180度回転すれば実現できる
     
     
   • しかし、当たり判定のタイミングによっては、移動してもパドルと当たっていると判定され、挙動がおかしくなる恐れがある
     
     そこで、パドルに当たった時、ボールを一旦パドルの表面まで移動してから反射すれば跳ね返ってすぐに当たり判定されることがなくなる
     
4. ブロックの準備
   ブロックは、まず一つだけ設定した後複製して位置を変えていくとよい
   ボールに触れたら、表示を隠して、スコアを追加するようにすれば良いので
   まず、変数「スコア」をすべてのスプライトが参照可能な状態で追加する
   
   そして、最初のブロックにスクリプトを設定する
   
   後はこのスプライトを17個複製して、それぞれx方向50pxピッチ、y方向30pxピッチに設定してゆく
5. 次にボールにブロックに当たった時の挙動を設定する
   反射方向は先ほどの、入射角と反射角を同じにする式を入れるとよい
   ブロックはたくさんあるので、当たり判定は色で判定するとスクリプトがシンプルになる
   
6. 打ち返しを失敗したときの設定
   スプライトにwall.pngを読み込みステージの下端に配置する
   
   そしてボールにwallに当たった時の挙動を設定する
   
   最終的なボールのスクリプトブロックは以下のようになる
   
7. 最後にゲームの終了判定を加える
   背景に色をつけ、その背景を2つ複製しておく
   そして、一つには「YOU WIN」もう一つには「GAME OVER」の文字を入れておく
   スクリプトには最初は通常の背景にしておき、スコアが18（＝全部消せた）ならば背景を「YOU WIN」に
   「GAMEOVER」を受け取ったら、背景を「GAMEOVER」に切り替えて、スクリプトを止める
   

アレンジ

前回学習したクローンを使うと、スプライトは少なくてすむ
スクリプトは「ブロック」に設定する