|
HTML5のアクションゲーム基本形として、まずは単純なブロック崩しを作ってみました。 ブロックや壁、バー、弾といったゲーム中のオブジェクトはすべてJavaScriptのオブジェクト（lblb_object）として作成し、配列に格納しています。各オブジェクトの描画や当たり判定などはこのlblb_objectのprototypeに関数を追加し、オブジェクトの関数を呼び出す形で処理します。 ブロック崩しの開発で意外に悩むのが、ブロックなどとの当たり判定のアルゴリズムです。 たとえば、上方向の当たり判定なら「弾の移動方向が下方向（加速度ベクトルのy成分dxが正）」の時に「弾と判定対象オブジェクトの上辺が接触していたら」当たりと判定しています。弾が上面に当たっていたら、弾に設定している上下方向の加速度を反転させ、速度を上げます。 弾の移動方向は、オブジェクトのdx、dyで管理しますが、ここに設定してあるのは単位ベクトル（大きさが1となるよう調整した向きのみを保持するためのベクトル）のX/Y成分で「毎回の処理で座標に加算する値（速度）」ではない点に注意してください。このdxとdyに弾の速度をかけたものが、実際の速度（現在の座標に加算する値）になります。 上下左右4方向の当たり判定を行うと、斜め方向に飛んできた時には同時に二つの面に接触する可能性があります。その場合は、上下、左右それぞれの加速度を反転させる処理をするようにしました。 ブロック崩しの当たり判定アルゴリズムの実装では、速度にも注意が必要でしょう。弾の移動速度が速くなってくると、「現在の位置」だけで接触の判断を行うとブロックなどを「突き抜けて」しまうこともあるので、ブロックや弾の大きさと移動速度の関係にも注意しないといけませんね。 今回は、メインループの周期（JavaScriptのsetTimeout()の呼び出し周期）を短めに設定し、弾の速度を問題のない（突きつけない）範囲で設定するようにしてみました。 描画については、Canvas要素に「塗りつぶし長方形」を基本として描画処理を行います。特に凝った演出もありませんが、ゲーム開始時とクリア時には半透明（アルファ値設定）でブロックをフェードインさせたり、画面をフラッシュさせてみました。 |