AIと対話しながらブロックくずしゲームを作ってみた【30分で完成】

こんにちは、Rapisです。今回はAIアシスタント（Claude）と対話しながら、本格的なブロックくずしゲームを作ってみました。プログラミング経験はあるものの、ゲーム制作は初めて。それでもわずか30分で遊べるゲームが完成したので、そのプロセスを全公開します！

実際にプレイできます

🎮 ブロックくずしゲーム

←→キーでパドル移動、スペースキーで発射！

なぜAIを使ったのか？

普段はRuby、Python、C言語を少し触る程度で、JavaScriptでのゲーム開発は未経験。Canvas APIも詳しくありません。でも「ブログに埋め込めるゲームを作りたい」という明確な目的がありました。

従来なら：

チュートリアルを探す（数時間）
サンプルコードを読み解く（数時間）
試行錯誤しながら実装（数日）

AIを使えば：対話しながらその場で完成

これが2025年のプログラミングです。

AIへの最初の質問【ステップ1：要件を伝える】

まず、作りたいゲームの仕様を自然な日本語で伝えました。

私の質問

ブロックくずしのゲームを作ろうと思う

下から上にボールが行く
壁に当たると反射する角度がかわります
パドルは左右のみです
スタート時は好きな場所からスタートできます

ブロックは
・ステージ1は簡単に1回で崩れるもの
・ステージがあがるにつれて複数回で崩れるブロックがどんどん増えていく

アイテムはブロックを崩したときにランダムな効果を発動します
効果１　ボールが大きくなる30秒有効（10の耐久値があるブロックを一発で壊せる）
効果２　個数が複数個（３～５個）に増える　増えた球は色を変えて　その球は落としてもライフに影響がないようにする
効果３　パドルが大きくなる30秒継続
効果４　ボールを落とせる回数を増やせる

ゲームオーバーの条件　基本3回まで　アイテムによって増加させることが可能

背景のデザインは　道→山→森→空→宇宙という感じで作ってほしい

AIの対応

わずか数分で、HTMLファイル1つで動作する完全なゲームを作成してくれました。驚いたのは：

仕様を完全に理解している
Canvas APIを使った本格的な実装
クラス設計（Ball、Paddle、Block、Item）
アイテム効果のタイマー管理まで実装済み

問題発生：操作ができない【ステップ2：問題を報告】

最初のバージョンはマウス操作でしたが、マウスパッドだとうまく動きませんでした。

私の質問

マウスパットだとうまく動かなかったので
キーボードの横キーとスペースでスタートするようにしてほしい

AIの対応

マウスイベントをキーボードイベントに変更
左右矢印キーでパドル移動
スペースキーでボール発射

わずか数分で修正完了。コードの該当部分だけを的確に書き換えてくれました。

さらなる問題：ゲームが動かない【ステップ3：デバッグ】

修正後、ゲームが全く動かない状態に。

私の質問

全然動かない

AIの対応プロセス

問題の特定：game.loop()が呼ばれていないことを発見
原因の説明：アニメーションループが開始されていない
修正案の提示：showStartPosition()内でloop()を呼び出すように変更
即座に修正版を提供

このデバッグプロセスもわずか数分で完了。エラー内容を詳しく説明しなくても、AIが自分でコードを確認して問題を見つけてくれました。

AIとの対話で学んだこと

1. 専門用語は不要

「Canvas API」や「requestAnimationFrame」といった専門用語を知らなくても、自然な日本語で説明すれば理解してくれます。

2. 段階的な改善が可能

完璧な仕様書を最初から用意する必要はありません。「こうしたい」→実装→「ここを修正」という対話で進められます。

3. エラーも怖くない

「動かない」と言うだけで、AIがコードをチェックして問題を見つけてくれます。

4. コードの説明も充実

作成されたコードには適切なコメントがあり、なぜそう書いたのかも理解できます。

実装された機能一覧

AIが実装してくれた機能：

基本システム

✅ Canvas APIによる描画
✅ キーボード操作（←→キー、スペースキー）
✅ 衝突判定アルゴリズム
✅ 反射角度のランダム変化

ゲームシステム

✅ ステージ進行（難易度自動調整）
✅ ブロックの耐久値システム（1〜10回）
✅ スコア計算
✅ ライフ管理

アイテムシステム

✅ 4種類のアイテム（30%ドロップ率）
✅ 効果時間の管理（30秒タイマー）
✅ ボール増殖時の色分け
✅ サブボールのライフ免除処理

ビジュアル

✅ ステージごとの背景変化（5種類）
✅ 宇宙ステージの星エフェクト
✅ グラデーション描画
✅ パワーアップ時のエフェクト

総コード行数：約600行

これを手作業で書いたら、私なら数日〜数週間かかるでしょう。

AIプログラミングの実際の流れ

従来のプログラミング

1. 要件定義（1時間）
2. 技術調査（2〜3時間）
3. 環境構築（30分）
4. 実装（5〜10時間）
5. デバッグ（2〜3時間）
6. テスト（1時間）

合計：約12〜18時間

AIを使ったプログラミング（今回）

1. 要件を日本語で説明（5分）
   ↓
2. AIがコード生成（3分）
   ↓
3. 動作確認（2分）
   ↓
4. 問題を報告「マウスが使いにくい」（1分）
   ↓
5. AIが修正（3分）
   ↓
6. 再度問題報告「動かない」（1分）
   ↓
7. AIがデバッグ＆修正（3分）
   ↓
8. 完成！

合計：約20分

AIを活用する上でのコツ

✅ DO（やるべきこと）

1. 具体的に説明する

❌ 悪い例：「ゲームを作って」
✅ 良い例：「ボールが壁に当たると角度が変わるブロックくずしを作って」

2. 問題は簡潔に伝える

❌ 悪い例：「なんか動かなくて、多分このあたりのコードが...」
✅ 良い例：「全然動かない」

3. 段階的に改善する

完璧を求めず、まず動くものを作る
→ 使ってみて気になる点を修正
→ さらに改善

❌ DON’T（避けるべきこと）

1. 専門用語で説明しようとする 知らない用語を使うより、自然な日本語で説明したほうが伝わります。

2. 最初から完璧な仕様を求める 対話しながら作れるのがAIの強みです。

3. AIを完全に信用する 生成されたコードは必ず動作確認しましょう。

ブログ公開への展開

ゲーム完成後、さらにAIに質問しました：

私の質問

これをアプリでリリースしたい場合どうすればいい？

AIの提案

Webアプリとして公開（GitHub Pages、Netlify）
自分のブログに設置
PWA化してスマホアプリ化
Electronでデスクトップアプリ化

そこで気づいたのが「ブログに置くのありですね！」ということ。

さらに質問

ブログに置くのありですね！その場合　アドセンス的に問題ありますか？

AIの回答

オリジナルコンテンツならOK
ゲーム周辺に説明記事があればOK
広告配置に注意

そして記事テンプレートと埋め込みコードまで生成してくれました。

開発時間と費用

実際にかかった時間

AIとの対話：約20分
動作確認：約5分
ブログ用の調整：約5分

合計：約30分

費用

Claude Pro（月額約3000円）のサブスクリプションのみ
追加費用なし

学習コスト

Canvas APIの深い理解：不要
JavaScriptの高度な知識：不要
ゲーム開発の経験：不要

このゲームの技術スタック

AIが自動的に選択・実装した技術：

HTML5 Canvas：2D描画
JavaScript ES6：クラスベース設計
requestAnimationFrame：滑らかなアニメーション
イベントリスナー：キーボード入力
数学関数：衝突判定、角度計算

これらの技術を詳しく知らなくても、AIが適切に実装してくれます。

AIプログラミングの未来

今回の経験で確信したこと：

プログラミングは「書く技術」から「伝える技術」へシフトしている

必要なスキル：

❌ コードを完璧に書けること
✅ 作りたいものを明確に説明できること
✅ 問題を的確に伝えられること
✅ AIの提案を理解・判断できること

プログラミング初心者でも、AIと対話することで：

アイデアを即座に形にできる
試行錯誤のサイクルが爆速化
学習しながら開発できる

まとめ：AIと協働する時代

Before AI（2023年以前）

アイデア → 学習 → 実装 → デバッグ → 完成
（数日〜数週間）

With AI（2025年）

アイデア → AI → 完成
（数十分）

もちろん、AIが生成したコードを理解し、カスタマイズできる知識はあったほうが良いです。でも「ゲームを作りたいけど経験がない」という人にとって、AIは最高のペアプログラマーになります。

今回使用したAI

Claude（Anthropic）
プラン：Claude Pro
特徴：長い対話を理解し、的確なコード生成

次に試したいこと

音楽・効果音の追加
スコアランキング機能
より複雑なステージ設計
PWA化してスマホ対応

すべてAIと対話しながら実装予定です。

ソースコードについて

完全なソースコードは約600行で、すべてAIが生成しました。主要なクラス構造：

javascript

class Ball {
  // ボールの動き、衝突判定
}

class Paddle {
  // パドルの移動、キーボード操作
}

class Block {
  // ブロックの耐久値、描画
}

class Item {
  // アイテムの効果、タイマー管理
}

class Game {
  // ゲーム全体の制御
}

この記事が「AIでプログラミング」に興味がある方の参考になれば幸いです！

何か質問があれば、コメント欄でお気軽にどうぞ。

追記：実際のやり取りログ（抜粋）

参考までに、実際のAIとのやり取りの一部を公開します：

【私】ブロックくずしのゲームを作ろうと思う...（詳細な仕様）

【AI】ブロックくずしゲームを作成しますね！
HTMLファイル1つで完結するゲームを作成します。
[コード生成]

【私】マウスパットだとうまく動かなかったので
キーボードの横キーとスペースでスタートするようにしてほしい

【AI】キーボード操作に対応したバージョンを作成しますね！
[修正コード生成]

【私】全然動かない

【AI】申し訳ありません。確認して修正しますね。
問題がわかりました。`game.loop()`が呼ばれていないため...
[デバッグ＆修正]

【私】いいね！これをアプリでリリースしたい場合どうすればいい？

【AI】ブロックくずしゲームをアプリとしてリリースする方法を
いくつか紹介します！...

このように、自然な対話でゲームが完成していきました。

AIと一緒にプログラミングする時代、もう始まっています。