Small Basic 入門

15．すべて拾い集めようゲームを作ろう その３

[ すべて拾い集めようゲームを作ろう その２ ] の続きです。

当たり判定のしくみ

当たり判定を作る前に、しくみについて説明します。
昔からよく使われる方法です。

まず、次のサンプルを実行して、マウスを動かしながら当たり判定表示を確認しましょう。

このサンプルは、作成中のゲームに似せて作りました。
理解できない所があったなら、前のページを読み返してください。

当たり判定を行っている所は、10行目と13行目です。
10行目でｘ軸の当たりを、13行目でｙ軸の当たりを見ています。

ｘ軸の場合を見てみましょう。
変数 px にはマウスカーソルのｘ座標が入ってます。
四角はｘ座標 100 の位置に表示しているので、
カーソル座標がが 100 より大きく、100＋50 より小さければ四角が存在する範囲になります。
なお +50 は四角の幅です。

And を使って (100 < px) と (100+50 > px) の両方が成立しているときのみ
Then のあとの処理が行われるようにしています。
両方が成立している、つまり、うす紫のエリアの中にカーソルがあると判断できます。

実際にはｘ軸の判定とｙ軸の判定の両方が成立したときのみ、
「四角に当たっている」と判断します。

当たり判定を組み込もう

それでは当たり判定を組み込んでみましょう。
プログラムが長くなったのでサブルーチン OnMouseMove のみ表示しています。

30行目、For 文を15回まわして、すべての四角をチェックします。
31行目、ｘ軸の当たり判定。＋20は四角の横幅です。
32行目、ｙ軸の当たり判定。＋20は四角の高さです。
33行目、２つの条件に当てはまったとき、タイトルに当たりを表示します。

実行したら四角にマウスカーソルを重ねて、当たり判定が正しく動いているかチェックしましょう。

四角を消そう

当たり判定の中で、四角を消します。

34行目、Shapes.Remove で四角を消します。
35行目、ｘ軸の情報を書き換えています。大きな数を入れることで
次回の当たり判定から除外します。
試しに35行目をコメントにして実行してみてください。
四角が消えているのに当たり条件のみ残り、その場所にカーソルを重ねると「当たり」が表示されます。

すべて拾ったあと

拾った四角の数をカウントします。
すべて拾ったらゲームオーバーにするためです。

拾った個数をカウントして、表示した数と同じになれば「すべて拾った」と判断します。

38行目、四角を消すタイミングで拾った個数をカウントします。
43行目以降、表示した数 15 と同じのとき「すべて拾った」と表示します。

無駄な処理はしないように

すべての四角を拾ったあと、マウスカーソルを動かしてみて下さい。
タイトル表示がちらちらしているのが分かりますか？
これは 29 行目の px, py 座標表示と 44 行目の「すべて拾った」表示が交互に行われているからです。

サブルーチン OnMouseMove 内の処理は、ゲーム中のときだけ必要で
始める前や終了後は必要ありません。
これをゲーム中のときだけ処理されるように変更します。

変数 state を使って wait（準備中）と play（プレイ中）を切り替えています。
四角を表示したら 25 行目でプレイ中にしています。
準備中のときは 29 行目の判断文に引っかかり、30 行から 54 行へジャンプします。
54 行目はラベルです。
すべて拾ったあとは 52 行目で準備中に戻しています。

今回の変更は無意味のように思えるかもしれません。
しかし、使わない処理はできるだけ動かさないようにすることは重要です。
プログラムが大きくなってくると、バグ（不具合）は発生し易くなります。
そのリスクを減らすためでもあるのです。