では早速ブロック崩しのコーディングを始めましょう。ゲームフローが出来ていてそこでしっかり完成予想図をイメージできていれば、コーディング自体はそれほど手間取らない…はず。
背景のコーディング
まずは背景から。PONGの時と同じく、背景の部分でゲーム全体の同期をとっています。SCRATCHでは複数のコードを色んな背景・スプライトに分散して書くことができるので、要所要所で同期をとってやる必要があります。オーケストラの指揮者みたいなもんですね。これはどこに書いてもいいんですが、背景部分に書くのが私は一番見やすいかなぁと思ってます。
背景のコードは以下のようにごく簡単です。PONGの時は得点の変数名を「スコア左（右）」としていましたが、今回は「Score」と「Lives」（残機）と英語に変えています。これは画面上にもこの変数名で表示させることを念頭に、外国の方でもゲームを遊びやすくしたいと思ったためです。
残機は0の状態でさらに死ぬとゲームオーバーという仕様にしたので、Lives < 0 でゲーム終了としています。ただ、Livesがー１表示になっているとちょっと気持ち悪かったので、判定だけしたらすぐに0に変更しています。
パドルのコーディング
次はパドルのコーディングに移りましょう。こちらはゲームフローからしてPONGの時とほぼ同じですね。少し変えたところだけ以下で解説していきます。
まず、今回コスチュームを2つ用意してゲーム中とゲーム終了時で切り替えています。ゲーム終了したらパドルを横に広げて画面下に落ちないようにしていますが、その際のパドルのコスチュームを Paddle2 として用意しています。
そして、もう一点。ゲームフローには出てきませんが、今回はボールのスプライトで跳ね返り角度を計算することにしたため、パドル部では特に何もせず、Paddle Xという（他のスプライトでも使用可能な）変数を作り、そこにパドルのx座標を常時代入しています。（これにより、パドル以外のスプライトでもパドルのx座標を参照することができるようになります。）
あと最後にもう一点、今回はパドルの右移動、左移動を「←」「→」だけでなく「a」と「d」でも動かせるようにしています。これは左利きの方用にキーボードの左側でも操作できるようにという意図です。
最近、左腕につけたApple Watchで電車の改札を通過している人をたまに見かけますが、改札のタッチできるところが右側にしかないので窮屈そうですよね。左利きの人は常時あの窮屈さを強いられているのだと思ったら、ゲームの時ぐらいもうちょっと配慮してもいいだろうと感じてコードに追加してみました。（改札の対応と違ってたかが数行で出来ることですしね。）
ボールのコーディング
さあ、次はボールのコーディングです。結構コードが増えてしまったので4枚のスクショに分けてコードを掲載しています。全体を一望したい人はこの記事の最後にSCRATCHのプロジェクトへのリンクを貼ってますので、そこからソースコードを参照してくださいね。
まずはゲーム準備と、ゲーム終了時のコードから。「ボール初期設定」とか「壁衝突判定」といったブロック定義の中身は後ほど説明しますので今は気にしないでください。
お次はゲーム開始メッセージを受け取った時の処理。これがメインの処理になります。y座標が-170未満になったらというところで、パドルで跳ね返せなかったかどうかの判定をしています（パドルのy座標がー１５０に設定しているので）。
コード右側の「もしブロックに触れたなら」の部分は、一旦は何も考えずに「１８０－向き」にボールを跳ね返らせています。これはブロックの下辺や上辺に当たった時に自然に見える跳ね返り方です。このままだとブロックの左辺や右辺に当たった時の挙動がヘンですが、これを自然に見せる実装がなかなかやっかいなため、まずは簡易的な対応でひとまず公開したいと思います。
ではここからはブロック定義の中身を見ていきましょう。たぶん下記のコードは読めば大体分かるんじゃないかと思いますが、ボール初期設定でPONGの時と違うのは、PONGだと斜め4方向のどちらにでも進めるようにしていましたが、今回のブロック崩しでは下側斜め2方向にのみ移動開始するというところですかね。
ボールのコーディングの最後はボールとパドルが衝突した時の跳ね返り方向計算部分です。ブロック崩しを遊んだことのある方ならお気づきかもしれませんが、パドルのかなり端の方にボールが当たるとボールが（さも垂直の壁にぶつかったかのように）同じ軌跡をたどって跳ね返っていくような実装になっていることが多いです。以下のコード中の「向きー１８０度に向ける」がそれを実現しているコードになります。どういう条件の時にこのコードが実行されるのかチェックしてみてください。
また、何故こういったボールの挙動があった方がいいのかは、この跳ね返り方を止めて（具体的には「もし向き < 0 なら」とか「もし向きが > 0なら」のコードを消して、それぞれの「でなければ」部分に書かれたコードだけに置き換える）遊んでみるといいかもしれません。
最後にひとつ言い忘れていましたが、ここでPaddle Xという変数を使ってボールのx座標とパドルのx座標を比較しています。ボールがパドルのどの辺りに当たったのかによって大きく4つに挙動を変化させています（具体的にはx座標ーPaddle Xの絶対値が①5未満の時、②12未満の時、③16未満の時、④それ以外の時、です）。
ブロックのコーディング
ようやくブロックのコーディングにまで辿り着きました。今回新たに「クローン」機能を使って実装をしていますので、まずはその話から始めましょう。
ブロック崩しのブロックだとか、弾幕シューティングゲームの弾とか、画面上に沢山出てきてかつ制御がそれほど複雑でないものは、SCRATCHのクローン機能を使ってひとつのスプライトから沢山の複製（クローン）を作るのがオススメです。「自分自身のクローンを作る」とその時点でのオリジナルのスプライトの設定を引き継いで複製を作ってくれます。
以下にブロックのコーディング結果を載せていますが、ゲーム準備メッセージを受け取ったらオリジナルブロックのスプライトのx座標、y座標を変化させながらクローンを作っています。またついでに2列ずつコスチュームを変化させていて、これによってブロックの色を変化させています。
そして、クローンそれぞれはボールに当たったかどうかの判定をし続けており、当たるとスコア計算したり残りブロック数の計算をしたり、ボールのスピードを変化させたりした上で当たったクローンを消しています。
後になって気づいたのですが、ブロックの色はオリジナルのBREAKOUTと合わせたつもりが違ってましたね。私は下から順番に
緑→黄→橙→赤
としましたが、オリジナルでは
黄→緑→橙→赤
でした。すでにスクショを撮ってアイキャッチ画像にしちゃった後だったので、もうこのままにしておきますが、気になる方はソースを変更してみてください。コスチュームの上下を入れ替えるだけですので変更自体はごく簡単です。
遊んでみよう
さあ、これで一旦ブロック崩しRev1.0の完成です。PONGと同様、SCRATCHのプロジェクトを公開しておきます。またこのブログに直接埋め込みもしていますので下記で遊んでみてください。
さて、実際遊んでみてどう思われましたか？ 私の感想は、
- パドル操作が難しくてすぐにボールが落ちるなぁ
- ブロックの左右辺にボールが当たるとガンガン隣のブロックを壊してしまうのがちょっとなぁ
といった点が気になっています。次回、ここらをもう少しチューニングしてみたいと思います。
コメント