力学的ブロック崩し（2023.02）

ブロック崩しに物理演算を組み込んだブラウザゲームです。PCおよびスマートフォンからプレイすることができます。

制作のポイント

　Ameba Ownd の機能の一つである HTMLブロック内部で JavaScript のコードを実行することでインタラクティブな動作を実現しています。破壊するブロックの耐久値と画面中央部のジャマな板の往復速度をランダム変数にすることで、プレイする度に違った体験ができるようになっています。2Dグラフィックスの描画では HTML5 の <canvas> 要素を使用しています。

まず、以下の記事を参考にして物理演算を持たない古典的なブロック崩しゲームのたたき台を制作しました。

続いて、台形近似法による数値積分を用いて重力の効果を実装しました。

実際には数値計算の際に小数点以下を有限桁で切り捨てるため、時間ステップが進むたびに若干の誤差が生じます。

　ブロック崩しに上記の重力演算を組み込んだ結果、いくつか問題が発生しました。

第一に、力学的エネルギー保存則によってブロックが破壊できないゲームとなってしまいました。

これを解決するために、ユーザーがパドルを用いてボールを「強く打ち返す」ことで系にエネルギーを供給できるようにしました。具体的には、パドルとボールの間の反発係数を e = 0.8 と定めて、運動量輸送の計算を行うプログラムに変更しました。

この変更によって、ユーザーはパドルを左右だけでなく上下にも動かせるようになりました。その結果、ユーザーはパドルをブロックのすぐ下まで持っていくことができるようになったため、不適切なゲームバランスとなりました。

そこで、画面中部に往復運動するジャマな板を設置し、板より上にはパドルを持っていけないような設定にしました。これによって、パドルの可動範囲についてユーザーが視覚的にわかりやすいような説得力を持たせることができました。

また、スマートフォンでのプレイ中に、画面上で指をフリックするとパドルが動くのではなくページ全体がスクロールしてしまうという問題がありました。そこで、パドルの可動範囲に指が置かれている間はページのスクロールをオフにする処理が必要でした。

　ボールとブロックの衝突判定は、「ボール中心部の座標がブロックの内部に入っているかどうか」でざっくりと判定しています。これは完璧な衝突判定ではないため、例えばあるブロックと別のブロックとの間にボールが入り込んだ場合に、ブロックの速度が急速に減衰して 0 になってしまうなどの問題があります。そこで、ブロックと衝突した直後の 0.1 秒間は衝突判定をオフにしています。これによって、ブロックの間にボールが入り込んでしまった場合や、ブロックの上にボールが乗ってしまった場合の「詰み」を回避しています。しかし、裏を返せばこれはすり抜けバグを許容した実装になっており、依然として完璧な衝突判定ではありません。

シンプルながら様々な工夫をつめ込んだゲームです。ぜひ一度プレイしていただけると嬉しいです！