【AI駆動開発】v0でクソゲーを作ってしまった…


こんにちは、物理が大好きなエンジニアです。最近、空き時間に[Vercel](https://vercel.com/)の[v0](https://v0.dev/)と**生成AI**を活用した**AI駆動開発**で「Kuso Physics」という**オープンソース**の物理演算ベースの3Dパズルゲームを作りました。「クソゲー」と名付けましたが、実は本気で作り込んだ作品です！今回は、**生成AI**による開発効率化と**v0**の活用方法、そして**オープンソース**で物理演算を取り入れたWebゲーム開発の過程について共有したいと思います。


👉 **[GitHub リポジトリ](https://github.com/KusoGames/Kuso-Physics)**
👉 **[デモプレイはこちら](https://kusogames.github.io/Kuso-Physics/)**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114175/44385827-6354-4dff-9961-3361de233513.png)

## Kuso Physicsとは

Kuso Physicsは、物理法則を活用した3Dパズルゲームです。プレイヤーは重力、摩擦、運動量などの実世界の物理概念を応用して、ボールを目的地まで誘導します。このクソゲーの特徴は、デバイスを振ったり（Shake Mode）、マウスを素早く動かしたりすることで、ボールに力を加えられる点です。

物理演算の正確さと、パズルゲームとしての面白さを両立させることに注力しました。

## 技術スタックと生成AIによる開発アプローチ

Kuso Physicsの開発にあたって採用した技術スタックは以下の通りです：

- **フロントエンド**: [Next.js](https://nextjs.org/) ([Vercel](https://vercel.com/)のフレームワーク)
- **AI開発支援**: [v0 by Vercel](https://v0.dev/)と**生成AI**
- **物理エンジン**: [Matter.js](https://brm.io/matter-js/)
- **3Dレンダリング**: [Three.js](https://threejs.org/)
- **デプロイ**: [GitHub Pages](https://pages.github.com/) / [Vercel](https://vercel.com/)

Next.jsを選んだ理由は、モダンなWeb開発環境と高速なパフォーマンスを両立できるためです。また、Vercelが提供するv0と**生成AI**を活用することで、**AI駆動開発**のワークフローを確立しました。この**生成AI**との協働により、コーディング効率が向上し、創造的な問題解決に集中できました。

GitHub Pagesで簡単に公開できるようにビルド設定を最適化したことで、このクソゲーは誰でも簡単にアクセスできます。

## 開発の裏側：生成AIとv0による効率化

### 1. v0と生成AIによる開発ワークフロー

Vercelが提供するv0を開発プロセスに組み込むことで、**生成AI**と協働する新しい開発スタイルを試みました。v0は特にUI/UXコンポーネントの生成やバグ修正のサジェストで活躍しました。

```javascript
// v0がサジェストしたコンポーネント例
const PhysicsControl = ({ onStart, onReset, shakeIntensity, setShakeIntensity }) => {
  return (
    <div className="physics-controls">
      <button onClick={onStart} className="start-button">
        Start Simulation
      </button>
      <button onClick={onReset} className="reset-button">
        Reset
      </button>
      <div className="shake-control">
        <label>Shake Intensity:</label>
        <input 
          type="range" 
          min="0" 
          max="10" 
          value={shakeIntensity} 
          onChange={(e) => setShakeIntensity(Number(e.target.value))} 
        />
      </div>
    </div>
  );
};
```

**生成AI**とのペアプログラミングにより、物理演算の複雑な実装も短時間で完成させることができました。**AI駆動開発**の本質は、AIの生成能力と人間の創造性を組み合わせることにあります。

### 2. 物理エンジンとの連携

3Dパズルゲームとしての魅力を高めるため、Matter.jsの物理エンジンとThree.jsの3Dレンダリングを組み合わせました。この実装でも、**生成AI**が多くのボイラープレートコードを生成し、開発効率を大幅に向上させました。

```javascript
// 物理エンジンの初期化とThree.jsとの連携
// 生成AIによる開発で短時間で実装
const initPhysicsEngine = () => {
  const engine = Matter.Engine.create({
    enableSleeping: false,
    gravity: { x: 0, y: 1, scale: 0.001 }
  });
  
  // Three.jsシーンとの連携
  const updateScene = () => {
    objects.forEach(obj => {
      const physicsBody = physicsObjects.get(obj.id);
      if (physicsBody) {
        obj.position.x = physicsBody.position.x;
        obj.position.y = physicsBody.position.y;
        obj.rotation.z = physicsBody.angle;
      }
    });
    renderer.render(scene, camera);
  };
  
  Matter.Events.on(engine, 'afterUpdate', updateScene);
  
  return engine;
};
```

### 3. Shake Modeの実装

デバイスのモーションセンサーやマウス操作でボールに力を加える「Shake Mode」は、実装の中でも特に工夫した部分です。v0を活用してさまざまなデバイスでテストするシミュレーションコードも迅速に開発できました。

```javascript
// デバイスの動きを検知してボールに力を加えるコード例
// 生成AIによる開発で最適化
window.addEventListener('devicemotion', (event) => {
  const acceleration = event.accelerationIncludingGravity;
  
  if (Math.abs(acceleration.x) > shakeThreshold || 
      Math.abs(acceleration.y) > shakeThreshold) {
    applyForceToObject(ball, {
      x: acceleration.x * forceMultiplier,
      y: acceleration.y * forceMultiplier
    });
  }
});
```

### 4. パズルゲームとしての設計

Kuso Physicsは単なる物理シミュレーションではなく、エンゲージメントを高める3Dパズルゲームとして設計しました。レベルデザインにはAIの提案も取り入れ、難易度曲線を最適化しています。

```json
// AIが提案したレベルデータの例
{
  "id": "level-123",
  "name": "重力の谷",
  "objects": [
    {
      "type": "platform",
      "x": 100,
      "y": 200,
      "width": 300,
      "height": 20,
      "angle": 0.2,
      "material": "wood",
      "bounciness": 0.3
    },
    {
      "type": "obstacle",
      "shape": "circle",
      "x": 250,
      "y": 150,
      "radius": 30,
      "material": "metal"
    },
    // その他のオブジェクト...
  ],
  "startPosition": {"x": 50, "y": 50},
  "targetPosition": {"x": 400, "y": 300},
  "hints": ["物体の慣性を利用して坂を登ろう", "金属面での反射を活用"]
}
```

レベルエディターも実装し、ユーザーが自分だけのパズルを作成・共有できるようにしました。この機能により、Kuso Physicsのコミュニティ形成を促進しています。

## 生成AIを活用したオープンソース開発

Kuso Physicsは完全にオープンソースとして公開しています（AGPL-3.0ライセンス）。v0を活用した**生成AI**開発の成果を共有することで、コミュニティ全体の技術向上に貢献したいと考えています。

以下の手順で簡単にローカル環境で実行できます：

```bash
git clone https://github.com/KusoGames/Kuso-Physics.git
cd Kuso-Physics
npm install
npm run dev
```

GitHub Pagesでの自己ホスティングも簡単です。リポジトリをフォークした後、GitHub Actionsが自動的にビルドとデプロイを行います。あとはリポジトリの「Settings > Pages」からgh-pagesブランチを公開するだけです。

Vercelアカウントをお持ちの場合は、ワンクリックでデプロイすることも可能です。

## 生成AIとの共創で学んだこと

このプロジェクトを通して、特に**生成AI**との協働開発について学んだことを共有します：

1. **生成AIはクリエイティブな提案に優れている** - v0は単なるコード生成だけでなく、ゲームデザインや物理パラメータのアイデアも提供
2. **AI駆動開発はプロトタイピングを加速する** - 従来なら数日かかる実装が数時間で完了
3. **v0と生成AIによるペアプログラミングでバグを早期発見** - AIが潜在的な問題点を事前に指摘してくれることで、デバッグ時間が大幅に短縮

また、物理演算ゲームとしての観点からは：

4. **物理演算のチューニングは奥が深い** - 「正確な物理」と「面白いパズルゲーム性」のバランスが重要
5. **3D表現と物理演算の組み合わせは没入感を高める** - Three.jsとMatter.jsの連携により、よりリッチな体験を提供
6. **ユーザーフィードバックの価値** - テストプレイの段階で得られた意見が最終的な品質を大きく向上

## 今後の展望：AIとの共創

v0とAI駆動開発の可能性を更に追求するため、今後は以下の機能拡張を計画しています：

1. **AI生成レベルの導入** - プレイヤーの好みや過去のプレイパターンに基づいて、AIがパーソナライズされたパズルレベルを生成
2. **物理学習要素の強化** - AIによる実際の物理法則の解説コンテンツを動的に生成
3. **マルチプレイヤー対戦モード** - リアルタイム物理演算による対戦モードの実装
4. **v0を活用したUI/UXの継続的改善** - ユーザーフィードバックとAI分析に基づく最適化

## まとめ：クソゲーを超えた物理パズル体験

「クソゲー」と名付けましたが、実はAI駆動開発とv0の力で本気で作った3D物理パズルゲーム「Kuso Physics」の開発記をお届けしました。Next.jsと現代のWebテクノロジーを駆使することで、インストール不要でありながら本格的な物理演算を楽しめるゲームが作れることを示せたと思います。

特に[Vercelが提供するv0](https://v0.dev/)を活用したAI駆動開発は、クリエイティブな作業と技術的な実装の両面で大きなブレークスルーをもたらしました。AIとの共創により、一人では実現困難だったアイデアも形にすることができました。

👉 **[デモをプレイ](https://kusogames.github.io/Kuso-Physics/)**
👉 **[GitHubリポジトリ](https://github.com/KusoGames/Kuso-Physics)**

なお、本記事もGoogle AI Proに部分的に助けてもらいながら執筆しています。AIとの共創はコード開発だけでなく、ドキュメント作成にも大きなメリットをもたらしてくれました。

---

AI駆動開発と物理演算の面白さを再発見できるゲーム体験を提供できれば幸いです。質問やフィードバックは[GitHub Discussions](https://github.com/KusoGames/Kuso-Physics/discussions)までお願いします！

...
#AI駆動開発 #v0 #Vercel #Next.js #物理演算 #パズルゲーム #クソゲー #3Dゲーム