はじめに
AIを活用してブラウザで動く3Dダーツゲームを作りました。501・301・クリケットの3モードが遊べます。3つの難易度でCPUと対戦できます。スマホにも対応しています。
以前にピンボールやビリヤードも同じようにAIと作ったことがあるのですが、ダーツは比較的簡単に作ることができました。どうして簡単に作れることが出来たのか自分なりに分析してまとめてみました。
以前作成したゲーム制作の記事
盤面を自分好みに編集できるピンボールゲームを Playwright MCP でデバッグさせつつ作ってみた
https://qiita.com/y-matsui-tb/items/4a199a8d3cadf5f30277
AIを活用して本格的3Dビリヤードゲームを作ってみた話
https://qiita.com/y-matsui-tb/items/cf48bf165bd429b97ef9
作ったゲーム
本格的3Dダーツゲーム
https://darts-game-hazel.vercel.app/
操作方法
投げ方（2クリック方式）
ダーツを投げるまでに2段階の操作があります。
① エイムフェーズ — 照準を定める
マウスを動かす（またはタッチ＆ドラッグする）と、白いサークルがカーソル周辺をゆらゆらと揺れながら動きます。
ねらいたい場所に近づいたタイミングで クリック（タップ） すると、赤いサークルで照準が固定されます。
② 精度フェーズ — 投げるタイミングを合わせる
照準を固定すると、画面下部に精度バーが表示されます。
白いインジケーターが左右に往復するので、中央（緑ゾーン） に近いタイミングで クリック（タップ） してください。中央からのズレが大きいほど軌道もズレます。
アプリの特徴
- ブラウザのみで動作 — インストール不要。PC・スマートフォン・タブレット対応
- 3Dダーツボード — Three.js による同心円＋扇形のボード。ダーツが弧を描いて刺さるアニメーション付き
- 2つのゲームモード — 501 / 301（カウントダウン）とクリケットを選択可能
- CPU AI 対戦 — 強さを「弱い / 普通 / 強い」の3段階から選択。クリケットの「強い」は相手が得点中のエリアを優先的に塞ぐ戦略ロジック搭載
- 効果音 — 刺さる音・バーストなど。画面上のボタンでON/OFF切り替え可能
- ターン履歴表示 — 各ターンの投げた得点を記録して表示
UIがシンプルな盤面は一発で作れる
ピンボールやビリヤードを作ったとき、盤面の再現が意外と大変でした。ピンボールはフリッパーの曲面・バンパーの丸み・ガイドレールの自由曲線、ビリヤードはクッションレールやポケットの形状など、「こういう形にして」とプロンプトを送っても何度も修正が必要でした。自由曲線で構成された図形は言葉で説明するのも難しく、AIが出力した3Dジオメトリが意図通りになっているか確認するのも一苦労です。
ダーツボードはまったく違いました。
同心円、等間隔の扇形、交互に塗り分けた色。すべてプリミティブ形状の組み合わせで表現できます。プロンプト一発で「あ、これだ」というボードが出てきました。
ピンボール・ビリヤードと合わせて実感したのは、「円や四角などのプリミティブ形状で構成された図はAIが素早く作れる」 ということです。逆に言うと、スプラインや有機的な曲線を含む形状はそうはいきません。
技術スタック
| 項目 | 技術 |
|---|---|
| 3D描画 | Three.js v0.170 |
| ビルド | Vite 5 |
| 言語 | Vanilla JS |
| テスト | Vitest |
| 物理エンジン | なし |
開発にあたっては今回もcompound engineeringを活用し、まずAIとブレインストーミングで仕様を整理し、実装計画を立ててから開発に入りました。
一番時間がかかったのは難易度調整
UIは一発で出力できましたが、ゲームバランスの調整にはかなりの時間を費やしました。
投げる動作は2フェーズあります。まず照準を定める「エイムフェーズ」で、レティクルがリサジュー曲線のようにゆらゆら揺れます。クリックで狙いを確定すると「精度フェーズ」に移り、バーが動くタイミングでダーツを放ちます。
この揺れ幅と最大ブレ幅のパラメータを決めるのに何十回もプレイしました。揺れ幅が大きすぎるとストレスになる。小さすぎると簡単すぎる。数値を変えてはプレイ、変えてはプレイの繰り返しです。
CPUの調整も同様でした。難易度ごとに着弾の散布半径を変えているのですが、easy・medium・hardそれぞれが「ちょうどいい強さ」になるまで何度も微調整しました。さらにクリケットのハード難易度では、相手が得点しているセクターを優先的に塞ぐ戦略を実装していて、この「頭のよさ」の匙加減も悩みどころでした。
スマホ対応でも細かい調整が必要でした。指でボードを押すと照準が指に隠れて見えなくなるため、照準を指の80px上にオフセットする処理を入れています。こういった「実際に触ってみないと気づかないこと」はAIには任せられない部分です。
AIとゲームを作る体験
「UIがシンプルな一般的なゲーム」をAIで作るのは、驚くほど簡単です。ルールが明確で盤面が幾何学的なゲームなら、プロンプト数回で動くものが出来上がります。
AIがまず土台を作ってくれるので、あとは自分で実際に動かしてテストしながら細かくカスタマイズしていく。その過程こそが、AIと共同制作する醍醐味だと感じています。
まとめ
- AIを活用してThree.js + Vite + Vanilla JS でブラウザ3Dダーツゲームを作った
- プリミティブ形状中心のUIはAIに一発で作らせられる。自由曲線は難しい（ピンボール・ビリヤードで実感）
- ゲームバランスの調整は正解がなく好みの問題なので、実際に何度もプレイしながらデバッグを繰り返し、AIと相談しながら修正を行った
- AIは「雛形を爆速で作る」、人間は「自分好みに育てる」という分担が心地よい