まずボールの動きを理解する
このブロック崩しはボールが1つだけで、進む向きは常に横3px・縦3pxの組み合わせです。壁、ブロック、パドルに当たったときは片方の向きの符号が反転するだけで、 速さは変わりません。そのため軌道はいつも45度の斜めです。パドルの中央に当てても端に当てても跳ね返る角度は同じで、ボールがだんだん速くなることもありません。 つまりこのゲームでの上達は「角度をつける」ことではなく、「ボールが落ちてくる場所を先に読んでそこで待つ」ことです。 画面は480×400のキャンバスで、ゲームは毎秒60回更新されます。モニターのリフレッシュレートが違っても速さは同じです。
コードから読み取った物理の数値
| 項目 | 値 |
|---|---|
| ボールの1フレームあたりの移動 | 横3px、縦3px(斜めで約4.24px) |
| 1秒あたりの移動距離 | 各軸180px、斜めで約255px |
| キーボード操作のパドル速度 | 5px/フレーム = 毎秒300px |
| パドルが端から端まで動く時間(キーボード) | 80フレーム = 1.33秒 |
| ボールが左右の壁の間を1回横断する時間 | 156フレーム = 2.60秒 |
| パドルの高さから天井まで上がる時間 | 約125フレーム = 2.08秒 |
| ボールがパドル幅(80px)を横切る時間 | 約26.7フレーム |
キーボードのパドル速度(毎秒300px)はボールの横方向の速さ(毎秒180px)より速いので、キーボードだけでも落下地点に追いつけます。 マウスやタッチではパドルの中心がポインタ位置へ即座に移動するため、速度の制約はありません。パドルは画面の両端で止まります。
ブロック配置と到達時間
ブロックは8列×5段の計40個で、1個1点なので満点は40点です。1回当たると消え、耐久力のあるブロックやアイテムはありません。 1個の大きさは52×18px、間隔は4px、全体の幅は444pxで、左18pxから右462pxまで並び、左右の余白は等しくなっています。 下の表は、パドルで跳ね返ったボールが各段の下端に届くまでの時間です(ボール中心基準、壁に当たらず直進すると仮定)。
| 上から | 色 | 縦の範囲(px) | 到達フレーム | 到達時間(秒) |
|---|---|---|---|---|
| 1段目 | 赤 | 40 ~ 58 | 108 | 1.79 |
| 2段目 | オレンジ | 62 ~ 80 | 100 | 1.67 |
| 3段目 | 黄 | 84 ~ 102 | 93 | 1.54 |
| 4段目 | 緑 | 106 ~ 124 | 86 | 1.42 |
| 5段目 | 青 | 128 ~ 146 | 78 | 1.30 |
当たり判定は半径6pxの円ではなく中心点だけを使います。中心がブロックの四角形の中に入ったときに当たりとなるため、角を少しかすめてから跳ね返るように見えることがあります。 パドルも同様で、ボールの中心がパドル幅(80px)の中にあれば受け止め、端にかすっただけでも中心が外なら取り逃しです。
判定ルールのまとめ
- ブロックに当たるとそのブロックが消えて1点入ります。直前の位置でボールがブロックの左右の範囲外にいたなら側面に当たったとみなして横の向きが、範囲内なら縦の向きが反転します。1フレームで複数のブロックに触れても向きが変わるのは1回だけです。
- 左右の壁と天井では、その方向が反転します。床は壁ではなく穴です。
- ボールがパドルの高さに来たとき、中心がパドル幅の中なら上へ跳ね返り効果音が鳴ります。そうでなければ落ち続け、床に届いた時点で残機が1つ減ります。
- 残機は3つ。1つ失うとボールは画面下の中央から右上へ向かって再スタートし、パドルも中央へ戻ります。崩したブロックはそのままです。
- 全ブロックを崩せば勝利、残機が0で敗北です。ハイスコアは保存されず、ブラウザにデータも残しません。
- 一時停止ボタンまたはPキーで止められ、タブが隠れている間もゲームは進みません。プレイ中は方向キーでページがスクロールしません。
例で確かめる攻略
- 反応時間の計算。一番下の段(5段目)に当たって戻るボールは、そこまで上がった時間1.30秒とほぼ同じ時間で戻ってきます。 最短の往復は約2.6秒で、その間にボールは横へ約468px動くので、それを受け止める必要があります。
- キーボードで追いつけるか。同じ往復の間にキーボードのパドルは最大780px動けます。ボールの横移動量より余裕があり(壁で跳ね返ればさらに移動距離は短くなります)、キーボードだけでも防げます。
- 得点の構成。満点は5段×8列=40点で、段による点差はありません。上の段が高得点というわけではないので、下の段から崩すほうがリスクは小さくなります。
実戦のコツ
- ボールは45度でしか動かないので、壁の反射をつなげて考えると落下地点を予測できます。壁を「展開」して、壁で曲がらず直進したと考えた横方向の距離を、ボール中心が動ける幅468pxの周期で折り返せば、実際の位置が出ます。
- 1列を最上段まで掘り抜くと、ボールがブロックの上の空間へ抜けてしばらく戻ってきません。その間に、天井と壁での反射を見越してパドルを先に動かしておけます。
- ボールがパドルの高さに来る前に、パドルの中心を落下地点に合わせておきましょう。ボールの中心がパドル幅に入ればよいので、中央に合わせれば左右に40pxずつ余裕が生まれます。
- 残機を失った直後は、ボールは中央から右上へ出発します。最初の反射はいつも同じ側です。
- 最後の1~2個が隅に残ると時間がかかります。残りの位置からボールが来る側を計算し、パドルをあらかじめ片側に寄せておくと有利です。
よくある失敗と限界
- マウスがキャンバスの外へ出ると、パドルは最後の位置で止まります。キャンバスの中で動かしましょう。
- キーボードとマウスを同時に使うと、最後の入力がパドル位置を上書きします。どちらかに統一してください。
- パドルの端で打っても角度は変わらないため、クラシックなブロック崩しの「端で打って角度をつける」技は使えません。
- レベル、速度アップ、パワーアップ、複数のボールはありません。勝てばそこで終わりです。
- 乱数は使っていません。同じ入力なら必ず同じ軌道をたどります。
ブロック崩しの由来
ブロック崩しのジャンルは、1976年にアタリ(Atari)が出したアーケードゲーム「ブレイクアウト(Breakout)」で広く知られるようになりました。パドル、ボール、ブロックというシンプルな構成は、 その後の数多くの派生作品を生みました。このページのゲームは、その原型を簡略化した形です。
よくある質問
モバイルでも遊べますか?
はい。キャンバスを指でタッチして左右にドラッグすると、パドルがついてきます。キャンバス上ではページのスクロールが起きないようにしてあるので、スクロールはキャンバスの外で行ってください。
ボールの速度はだんだん速くなりますか?
いいえ、ボールは最初から最後まで同じ速さ(各軸でフレームあたり3px)で動きます。ブロックをたくさん崩しても速くなりません。
パドルのどこに当たっても同じ方向に跳ね返りますか?
はい。縦方向の向きだけが反転し、横の速さはそのままなので、当たる位置に関係なく角度は同じです。向きを決めるのは、ボールがそれまで進んでいた方向だけです。
一時停止はどうしますか?
一時停止ボタンかPキーを押すと止まり、もう一度押すと再開します。別のタブへ移っても、ゲーム内の時間は進みません。
スコアや記録は保存されますか?
保存されません。スコアは画面に表示されるだけで、再読み込みすると最初からになります。ブラウザにデータも残しません。
ほかのクラシックゲームも
ヘビを操作してエサを食べるスネークゲームや、記憶力を試す神経衰弱ゲーム、 反応の速さを測る反応速度テストもぜひ試してみてください。