メイクコード アーケード を使ったゲーム作り第６弾です。
過去に学習した所は、説明を省くことがあります。
分からないことがあれば前のページを再読しましょう。
これから作るゲーム
ビデオゲームはここから始まったと言っても過言ではない
「ブロック崩し」を作りたいと思います。
見た目やルールがシンプルで
初心者向けの教材としてよく使われています。
画面下のバーを左右に動かし、飛んでくるボールを打ち返すゲームです。
ボールは１つのみ、バーで打ち返せなければゲームオーバーになります。
すべてのブロックを消すとゲームクリアです。
実は…
ブロック崩しは真面目に作ろうとすると難易度が上がります。
中級者から上級者向けの課題ですね。
なのでここでは、細かいことを気にせずに簡易バージョンを作っていきます。
プレイヤーを作ろう
新しくプロジェクトを作成します。
プロジェクトの名前を入力して 作成 ボタンをクリックします。
初めにプレイヤーであるバー（棒）を作っていきます。
スプライト の中の黄色で指定したブロックをドラッグします。
最初だけ の中に配置します。
絵を用意します。
絵はギャラリーから選ぶのではなく、自作したいと思います。
まずは絵のサイズを変更します。
スプライトエディタの左下にある 16 16 と書かれた部分の右のみを 6 に変更します。
これは左が幅で右が高さです。
これで幅 16 高さ 6 のスプライトができました。
次は色を塗ります。
まずは白色をクリックし、塗りつぶしツールをクリック、そして、編集エリアをクリックします。
色が塗れたら、画面右下の 完了 をクリックします
シミュレーターを見てください。
中央にバー（白い四角）が表示されます。
シミュレーターに画面が出ないとき（読み込み中のグルグルが止まらないとき）リセットしてみてください。 それでも表示されないときは、一度プロジェクトを抜けてホームに戻って再度プロジェクトに入ってください。
プレイヤーを操作しよう
プレイヤーとなるバーを操作できるようにします。
まず、表示する位置を変更します。
スプライトの座標を変更するためのブロックを用意します。
最初だけ の中に配置します。
座標を画面下の中央に指定します。
x座標を 80 y座標を 104 にします。
コントローラー の mySpriteをボタンで動かす をドラッグします。
最初だけ の中に配置しましょう。
左右のみの操作にするため、パラメータを指定します。
速度vxを 100 速度vyを 0 にします。
これでもう左右のみ動かせます。シミュレーターで試してみましょう。
このままでは画面外へ出てしまうので制限します。
最初だけ の中に配置します。
ボールを表示しよう
ボールを表示するため、スプライト表示用のブロックを追加してください。
変数名が mySprite2 では分かりにくいので変更します。
変数名を ball にします。
さて、今後のためにスプライトのタイプを新しく作ります。
Player タイプの所をクリックして 新しいkindを追加 をクリックします。
新規タイプとして ball を入力します。
これでタイプを新規に１つ作ったことになります。
下図のように変数名 ball そして ball タイプになりましたか？
次はボールの絵を用意します。
スプライトエディタの画面の左下でサイズを変更します。
横 4 高さ 4 に変更しましょう。
色は白を選び、ペンのツールをクリックします。
そして下図のように色を塗りましょう。
シミュレーターを見るとボールのスプライトは次のように見えます。
これでバーとボールができました。
スプライトのサイズを変更した理由は、当たり判定のためです。
当たり判定は描かれた絵ではなく、スプライトの形（サイズ）で行われるからです。
デフォルトならば 16x16 の四角形で当たりを判定します。
今回、バーは 16x6 の長方形、ボールは 4x4 の四角形で行われます。
ボールを動かそう
ボールに速度を指定して動かします。
スプライト の mySpriteの速度をvx50 vy50にする をドラッグします。
最初だけ の中に入れましょう。
変数名は ball に変更します。
これでボールは動き出しますが、画面外へ出てしまいますね。
画面の端で跳ね返るように指定します。
スプライト の set mySprite bounce on wall をドラッグします。
最初だけ の中に入れます。
変数名は ball に変更します。
これでボールは画面の端で跳ね返るようになります。
バーでボールを打ち返そう
プレイヤーが操作するバーとボールに当たり判定を入れます。
この判定を使い、バーでボールを打ち返すようにします。
スプライト カテゴリから当たり判定のブロックを用意しましょう。
そして下図のように otherSprite を ball タイプに変更します。
バーとボールが当たったとき打ち返す仕組みを作っていきます。
今課題のもっとも重要なポイントです。
そもそも、ボールを打ち返すとは何なのでしょうか？
スプライトは y の値が増えるほど下に、減る（小さくなる）ほど上にいきます。
速度 vy を指定するとき、プラス値なら下に移動しマイナス値なら上に移動します。
つまり、速度 vy の符号を反転させるだけで打ち返した動作になります。
今回、速度 vx は変更しません。
バーへの当て方によってボールの向きを変えられるブロック崩しもありますが、プログラムが難しくなるので次の機会にします。
スプライト の mySpriteのxを0にする をドラッグします。
当たり判定の中に入れます。
変数を otherSprite に、x を vy（速度 y）に変更します。
計算 カテゴリから引き算のブロックをドラッグします。
下図のように入れてください。
スプライトのパラメータを取得するブロックを使います。
スプライト の mySpriteのx をドラッグします。
引き算ブロックの右側に入れます。
計算に使うスプライトをボール otherSprite にします。
値を vy（速度 y） に変更しましょう。
これでボールの vy の値に 0 - vy を入れる動作になります。
つまり vy の符号を反転させるのです。
実際に打ち返せるかシミュレーターでプレイしてみてください。
長くなったので次回に続きます。