ブラウザゲーム・スマホで遊べるアプリをAIエージェントで作る【2026】HTML5 Canvas＋PWA

# ゲーム用のフォルダを作り、Gitで履歴を残せるようにしてからClaude Codeを起動
mkdir block-game && cd block-game
git init
claude

# Node.jsがある場合（表示されたURLをブラウザで開く）
npx serve .
# Pythonがある場合 → http://localhost:8000
python3 -m http.server 8000

ブラウザで遊べるブロック崩しを作りたいです。仕様：
- 縦長画面（スマホを縦に持って遊ぶ想定）。PCでも遊べる
- 画面下のパドルをマウス（あとで指）で左右に動かす
- ボールでブロックを壊すと10点。全部壊したら少し速くなって次の面へ
- ボールを3回落としたらゲームオーバー。タップ／クリックで再スタート
- 画面上部に SCORE と残りライフを表示
- 見た目はシンプルでOK（暗い背景に水色のブロック）

まず、この仕様で分かりにくい点や、決めておいた方がいい点があれば質問してください。

回答した仕様で、index.html 1ファイルだけで動くものを作ってください。
- 外部ライブラリは使わず、HTML5 Canvas と素のJavaScriptで
- 速さ・パドルの幅・ブロックの数などの数値は、コードの先頭近くにまとめて
- 端末の性能によってボールの速さが変わらないように、経過時間で動かして
作ったら、ブラウザでの開き方を教えてください。

遊んでみた感想です。3つ直してください。
1. 難しすぎる：ボールが速くて、1面の途中で終わってしまう。
   最初はもっとゆっくりにして、面が進むごとに少しずつ速くして。
   ついでにボールがブロックをすり抜けることがあるので原因も調べて。
2. 効果音がほしい：パドルに当たった音、ブロックを壊した音、落とした音。
   音声ファイルは用意したくないので、プログラムで音を作って。
3. ハイスコアを保存したい：ページを閉じても残るように。
変更したら、何をどう変えたか箇条書きで教えてください。

スマホで遊ぶと次の問題があります。直してください。
- パドルを指で動かすと画面がスクロールする
- ダブルタップで拡大される
- 文字やブロックが少しぼやける
マウスと指の両方で同じように操作できるようにしてください。
画面サイズが変わっても縦横比を保って、画面いっぱいに表示して。

あわせて、このあとPWA化するので、JavaScriptを game.js に分けてください。
（動作が変わらないことを確認してから分けて）

このゲームをPWAにして、スマホのホーム画面に追加でき、オフラインでも遊べるようにしてください。
- manifest.webmanifest と sw.js を作成し、index.html から読み込む
- 縦画面固定、全画面表示、背景色はゲームと同じ #101522
- アイコン（192px と 512px のPNG）は、単色の背景にブロックの絵を描いて
  PNGとして保存できる小さなHTMLツールを作ってください（画像は自分で保存します）
- ファイルを更新したとき、古いキャッシュが残り続けないようにして
最後に、Chromeの開発者ツールでPWAとして認識されているか確認する手順を教えてください。

// game.js：ブロック崩しの本体
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const W = 360, H = 640; // ゲーム内の座標系（画面サイズに関係なくこの大きさで考える）

// 高解像度（Retina）画面でもぼやけないように実ピクセルを増やす
function resize() {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = W * dpr;
  canvas.height = H * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
resize();
window.addEventListener("resize", resize);

const paddle = { x: W / 2 - 40, y: H - 60, w: 80, h: 12 };
const ball = { x: W / 2, y: H - 80, r: 7, vx: 150, vy: -260 }; // 速度は「1秒あたりのピクセル」
let blocks = [];
let score = 0;
let lives = 3;
let state = "title"; // title → playing → gameover

// ゲームループ：画面の更新タイミング（通常60回/秒）に合わせて呼ばれる
let last = 0;
function loop(now) {
  const dt = Math.min((now - last) / 1000, 0.033); // 経過秒。タブ復帰時の大ジャンプを防ぐ
  last = now;
  if (state === "playing") update(dt);
  draw();
  requestAnimationFrame(loop);
}

// 円（ボール）と四角（ブロック）の当たり判定：四角の中でボールの中心に一番近い点を探す
function hitCircleRect(c, r) {
  const nearestX = Math.max(r.x, Math.min(c.x, r.x + r.w));
  const nearestY = Math.max(r.y, Math.min(c.y, r.y + r.h));
  const dx = c.x - nearestX;
  const dy = c.y - nearestY;
  return dx * dx + dy * dy <= c.r * c.r;
}

function update(dt) {
  ball.x += ball.vx * dt;
  ball.y += ball.vy * dt;

  // 壁で跳ね返る（めり込んだ分は押し戻す）
  if (ball.x < ball.r) { ball.x = ball.r; ball.vx *= -1; }
  if (ball.x > W - ball.r) { ball.x = W - ball.r; ball.vx *= -1; }
  if (ball.y < ball.r) { ball.y = ball.r; ball.vy *= -1; }

  // パドル：当たった位置で反射角を変える（端で打つほど斜めに飛ぶ）
  if (ball.vy > 0 && hitCircleRect(ball, paddle)) {
    const hit = (ball.x - (paddle.x + paddle.w / 2)) / (paddle.w / 2); // -1〜1
    const speed = Math.hypot(ball.vx, ball.vy);
    ball.vx = speed * hit * 0.8;
    ball.vy = -Math.sqrt(speed * speed - ball.vx * ball.vx);
    ball.y = paddle.y - ball.r;
    sound(440, 0.05);
  }

  for (const b of blocks) {
    if (b.alive && hitCircleRect(ball, b)) {
      b.alive = false;
      ball.vy *= -1;
      score += 10;
      sound(880, 0.08);
      break; // 1フレームで壊すのは1個まで（2個同時だと反射が打ち消し合う）
    }
  }
  if (blocks.every((b) => !b.alive)) {
    makeBlocks();
    ball.vx *= 1.1;
    ball.vy *= 1.1; // 全部壊したら次の面は少し速く
  }

  // 下に落ちたらライフを減らす
  if (ball.y > H + ball.r) {
    lives -= 1;
    sound(120, 0.3);
    if (lives <= 0) {
      state = "gameover";
      saveHighScore(score);
    } else {
      resetBall();
    }
  }
}

// 操作：マウスもタッチもPointer Eventsでまとめて扱う
function toGameX(clientX) {
  const rect = canvas.getBoundingClientRect();
  return ((clientX - rect.left) / rect.width) * W;
}
canvas.addEventListener("pointermove", (e) => {
  paddle.x = Math.max(0, Math.min(W - paddle.w, toGameX(e.clientX) - paddle.w / 2));
});
canvas.addEventListener("pointerdown", (e) => {
  paddle.x = Math.max(0, Math.min(W - paddle.w, toGameX(e.clientX) - paddle.w / 2));
  // 音はユーザー操作の中で初めて鳴らせる（自動再生制限）
  if (!audio) audio = new AudioContext();
  if (audio.state === "suspended") audio.resume();
  if (state !== "playing") {
    score = 0;
    lives = 3;
    makeBlocks();
    resetBall();
    state = "playing";
  }
});

// 効果音：Web Audio APIで「ピッ」を合成（音声ファイル不要）
let audio = null;
function sound(freq, sec) {
  if (!audio) return;
  const osc = audio.createOscillator();
  const gain = audio.createGain();
  osc.frequency.value = freq;
  gain.gain.setValueAtTime(0.2, audio.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.001, audio.currentTime + sec);
  osc.connect(gain).connect(audio.destination);
  osc.start();
  osc.stop(audio.currentTime + sec);
}

// ハイスコア保存（プライベートブラウズ等で使えない場合もあるのでtry/catch）
const KEY = "blockgame.highscore";
function loadHighScore() {
  try { return Number(localStorage.getItem(KEY)) || 0; } catch { return 0; }
}
function saveHighScore(s) {
  try { if (s > loadHighScore()) localStorage.setItem(KEY, String(s)); } catch { /* 保存できなくても遊べる */ }
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <!-- ピンチで拡大されないようにする（ゲーム操作と干渉するため） -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ぽこぽこブロック崩し</title>
  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#101522">
  <link rel="apple-touch-icon" href="icon-192.png">
  <style>
    html, body { margin: 0; height: 100%; background: #101522; overscroll-behavior: none; }
    body { display: flex; justify-content: center; align-items: center; }
    /* touch-action: none でキャンバス上のスクロール・ズームを止める */
    canvas { width: min(100vw, 56.25vh); aspect-ratio: 9 / 16; touch-action: none; }
  </style>
</head>
<body>
  <canvas id="game"></canvas>
  <script src="game.js"></script>
  <script>
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker.register("sw.js");
    }
  </script>
</body>
</html>

{
  "name": "ぽこぽこブロック崩し",
  "short_name": "ブロック崩し",
  "start_url": "./",
  "scope": "./",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#101522",
  "theme_color": "#101522",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

// sw.js：オフラインでも遊べるようにファイルをキャッシュする
const CACHE = "blockgame-v3"; // ファイルを更新したら番号を上げる
const FILES = ["./", "./index.html", "./game.js", "./manifest.webmanifest", "./icon-192.png", "./icon-512.png"];

self.addEventListener("install", (event) => {
  event.waitUntil(caches.open(CACHE).then((cache) => cache.addAll(FILES)));
  self.skipWaiting();
});

// 古いバージョンのキャッシュを削除
self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches.keys().then((keys) =>
      Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))
    )
  );
  self.clients.claim();
});

// キャッシュにあればそれを返し、なければネットワークへ（キャッシュ優先）
self.addEventListener("fetch", (event) => {
  if (event.request.method !== "GET") return;
  event.respondWith(
    caches.match(event.request).then((hit) => hit || fetch(event.request))
  );
});

スマホで効果音が鳴らないことがあります。
ブラウザの自動再生制限が原因か確認して、最初のタップで音声を有効にする形に直してください。
iPhone の Safari と Android の Chrome の両方で鳴るようにしたいです。

社内の懇親会で、プロジェクターに映して遊ぶ4択クイズを作ってください。
- 問題は questions.json に分け、HTMLを触らずに差し替えられるように
- 1問20秒の制限時間とカウントダウン音、正解発表の演出
- チーム（4チーム）ごとの得点を司会が手動で加点できる画面
- ネットがない会場でも動くよう、外部ライブラリやCDNは使わない
まず画面の流れ（タイトル→問題→正解発表→結果）を提案してください。