← ポータルに戻る 📝ソース・解説を見る

ブロック崩し

スコア: 0
ライフ: ❤️❤️❤️

BREAKOUT

マウス操作でパドルを動かし、ブロックをすべて破壊しよう!

操作方法: マウスを左右にスライドしてパドルを操作

サイバーブロック崩し(Breakout)について

「サイバーブロック崩し」は、アーケードゲームの金字塔である「ブロック崩し(Breakout / Arkanoid)」をHTML5 Canvasと物理演算反射ロジックで再現したWebブラウザゲームです。ネオンカラーで描かれた美しいブロック群を、パドル操作でボールを弾き返しながら全滅させます。

好みの背景画像を自由に変更できる「カスタム背景機能」や、連続破壊によるコンボ倍率スコア加算システムを搭載しています。

詳しい操作方法とルール

操作方法

ゲームのルールとレベル進行

  1. ボールが画面下の境界線に落下するとライフが1減ります。初期ライフは3です。
  2. 画面上のブロックを全て打ち崩すとステージクリアとなり、次のレベルへ進みます。
  3. レベルが上がるとボールの初期速度が上がり、反射のテンポがスピーディーになります。
  4. ブロックにボールが当たる位置によって反射角度が動的に変化します。

ハイスコアを叩き出す攻略ガイド

AIペアプログラミング開発エピソード&プロンプト

物理演算を伴うブロック崩しでは、ボールとブロック(AABB AABB交差判定)およびパドルの反射角計算の正確性が求められます。AIとの対話によって、パドル打点に応じた偏向反射アルゴリズムを組み立てました。

【使用した開発プロンプトの例】 「HTML5 CanvasとJavaScriptで動作するブロック崩しゲームを作成してください。 要件: 1. パドルの接触位置 (hitPoint) に応じてボールの反射角 (dx) を変化させる物理計算を入れること 2. 2次元配列でブロックの行・列・色・耐久値を管理すること 3. ファイルアップロード(FileReader API)でCanvasの背景画像を動的に変更できるようにすること 4. コンボ数に応じたスコア倍率計算とパーティクル演出を入れること」

おすすめの他のブラウザゲーム

🧩 CYBER 2048

数字タイルを合体させて2048を目指す思考型パズル!

🐦 フラッピーバード

障害物をギリギリで避けるタップアクション!

📦 キャッチ・ザ・ボックス

上から落ちてくる箱をキャッチする爽快アクション!

🐍 スネークゲーム

伸びるヘビを操るレトロなドットアクション!