ソースコード解説: ブロック崩し

AIが描く、Canvas物理演算の真骨頂

画面上部のブロックをボールで打ち崩してスコアを稼ぐ、王道のアクションゲームです。
数学的な座標計算が必要な少し高度な仕組みも、AIの手にかかれば一瞬で組み上がります。

1. どんなプロンプト（指示）で作ったか？

ただ「ブロック崩しを作って」というだけでなく、色合いやシステムを具体的に指定しました。

"HTML5のCanvasを使って、マウスで遊べるブロック崩しを作って。
1. 背景はおしゃれなダークテーマに。
2. パドルの端っこにボールが当たったら、スライス（角度が変わる）するようにして。
3. 30個のブロックを並べ、行ごとに違う色でカラフルにして。
4. 全て壊したらボールのスピードが上がって無限にループ（レベルアップ）する仕様にして。"

ブロック1つ1つの位置を配列として記憶する処理（2次元配列）や、壁との跳ね返り判定など、一般的に数時間かかるようなロジックが、一つのファイルとしてあっという間に完成します。

2. 最も凄いコード：当たり判定（Collision Detection）

アクションゲームのキモである、「ボールがブロックに当たったか？」を毎秒60回計算し続けるロジックがこちらです。

function collisionDetection() {
    let activeBricks = 0;
    for (let c = 0; c < brickColumnCount; c++) {
        for (let r = 0; r < brickRowCount; r++) {
            let b = bricks[c][r];
            // ブロックがまだ壊れていない(=1)場合だけ判定
            if (b.status == 1) {
                activeBricks++;
                // ボール(x, y) が ブロック(b.x, b.y) の面積の中に重なっているかを計算
                if (x + ballRadius > b.x && x - ballRadius < b.x + brickWidth && 
                    y + ballRadius > b.y && y - ballRadius < b.y + brickHeight) {
                    
                    dy = -dy; // 当たったのでボールのY軸(縦)方向の速度を逆転して跳ね返す！
                    b.status = 0; // ブロックを「破壊済み(=0)」に変更
                    score += (brickRowCount - r) * 10; // 上のブロックほど高得点
                }
            }
        }
    }
}

3. ここを真似してみよう・改造してみよう

コードをローカルに落として、パラメータ（数字）をいじって遊んでみてください！

let paddleWidth = 90; を 200 にする → はみ出過ぎて絶対に負けない無敵ゲームへ！
let ballRadius = 8; を 30 にする → 巨大な鉄球がすべてを粉砕していく爽快仕様！
let angle = hitRatio * (Math.PI / 3); の角度を変えることで、パドルの端で打った時の「最大スライス角度」を鋭くできます。