LUV IS CONNECT.. | 【AIコード生成】3人打ちオセロ開発秘話とプロンプト全公開

25･06･13検証、現在ではプレイヤー三人が実際に選び並べる（後にCPU/PLAYER選択になるがこの段階はPLAERのみ）

• 盤面の初期化と石の配置
• クリックによる石の配置と裏返し処理：3方向への裏返しロジックを実装
• コマ数の表示：リアルタイムで各プレイヤーの石の数を更新
• リセット機能：ゲームを初期状態に戻す
• パス機能：置ける場所がない場合にパスする

ChatGPT、Gemini(2.5 Flash)はここまでは書けたが、以降は上手く書き出せませんでした。

• CPUとプレイヤー切り替え機能：一部のプレイヤーをCPUに設定可能（難易度は簡易的）
• BGMと効果音の再生・サウンドオフ機能：ゲームを盛り上げるサウンドと、オフにできるオプション（web Audio API）

Claude / Gemini(2.5 Pro)ここまで頑張ってくれたので、以後はClaude / Gemini(2.5 Pro)にお任せする事に！
以下がプロンプト 提案頂いた10×10盤面で実際にプレイ出来るデモのコードをHTML、CSS、JavaScript書き出して下さい。また機能として各コマ数の表示、リセット、パス機能付き、可能であれば各コマにCPUとプレイヤー切り替えが出来、CPUと対戦できるものを書き出して欲しい。言語で他にお勧めが有れば提案して欲しい。
更にPC、スマホの両方で再生される音楽（何種類か選択可）や効果音とサウンドオフ機能をWeb Audio APIで実装してください

※ポイント：デバックする事！そして例えば今回「有効手ハイライトが上手く動作していない」ので修正を依頼する。
音声をただ、Web Audio APIで”PC、スマホの両方で再生”とだけ伝えたので、プロシージャル（手続き的）に音を生成する物が出来上がって来た。修正プロンプト▼ 音声ファイルは用意するのでwebAudioAPIの仕様を変えスマートフォンでも再生される書き方（特にiOS）自動再生ポリシーに準拠した書き方で外部ファイルを読み込む仕様にして頂けますが？
▼ルールの変更
各コマ共、一枚も無くなってしまうと三人プレイで無くなってしまうのでそれを防ぐ良い考えは有りますか？
▼おすすめの解決策：「復活ルール」を採用し組み込み修正
また、書き出して貰ったファイルを再アップロードして修正依頼（Claude / Gemini(2.5 Pro)間で横断）等もしました。
以下の様に複数個の修正依頼▼
アップしたのコードのプレイヤーとCPUの切り替えがリレット時、黒がCPUの場合にCPUとして機能しませんので修正をお願いします。またsound出力時に複数音が同時発音する時のハウリング等を避けるためのコンプレッサーを付けゲーム終了時に発音されるgameOverとBGMの発音が同時再生された時の調整をして下さい。現在.game-info内の.player-infoがスマートフォン時に立て並びになる挙動を.player-stoneを小さく調整する等をして3個供に横並びで表示する様に調節して下さい。更に”●の番です”の文言を●のカラーにして現在どのターンかが明確に解る様にして下さい。複数個を同時に依頼しましたが大丈夫でしょうか？

select、optionのデザインが味気ないのでfirefoxとchorome、他ブラウザ（EdgeとOPERA）も変更必要が有れば、デザイン装飾を調整して貰いたい。また使われている赤、黒、白をそれぞれ赤はパントントレンドカラーの#b15150に黒は墨黒では目が痛いので#323232に白は#efefefに変更。それに合わせオセロの盤面のカラーも調節願います。同様に音量レンジのデザインやパス、リセット、ヒント、音声ON／OFFボタンも装飾。ヒント機能が機能していない様に見える、または機能していない部分も修正願います。

ここまでと以下の支持で、この形です。

今回プロンプトの支持出し（ディレクター）部分の記述に留めましたが、最後に返しのコーダー（AI）両方を記載します。
CPUがコマ0個で復活する時にコマを選択しない挙動の修正願います。

はい、承知いたしました。CPUが復活する際に、どこにコマを置いたか分かりにくい挙動を修正いたします。
ご指摘の現象は、CPUが復活の一手を打ったことがプレイヤーに視覚的に伝わりにくいために「コマを選択していない」ように見えてしまうことが原因と考えられます。この問題を解決するため、以下の修正を行いました。
・復活マスのハイライト: CPUが復活のためにコマを置くマスを、一時的に光るアニメーションでハイライト表示するようにしました。これにより、CPUがどこに復活の一手を打ったかが一目で分かります。
・タイミングの調整: CPUがコマを置いてから次のプレイヤーのターンに移るまでの間に適切な間（ポーズ）を設け、盤面の状況を認識しやすくしました。

私はディレクター・コーダー両側を経験しておりますが...理想的なやり取りですね（汗）

実際に動かしてみよう！：と今後の展望

言葉だけでは伝わりにくい部分もあるかと思いますので、実際に開発した3人対戦オセロのご紹介します。
このページのプロンプトで出来上がった3人対戦オセロのリンクです。
最新更新版はコチラです。

10×10の広い盤面で3人のプレイヤーが入り乱れて石を置いていく、石が複雑に裏返る様子がご理解いただけるかと思います。従来のオセロとは異なる、新たな戦略と駆け引きが生まれているのが見て取れるでしょう。

開発した3人対戦オセロは、PCだけでなくスマートフォンでも快適にプレイ可能です。レスポンシブデザインを採用しているため、画面サイズに応じて盤面が最適化され、タッチ操作にも対応しています。移動中やちょっとした空き時間にも、AIと数学の結晶であるこのゲームを楽しんでいただけます。

さらなる改善点と機能拡張の可能性

今回の開発は、あくまでAIコード生成の精度検証と、独自の3人対戦オセロのプロトタイプ作成が主目的でした。そのため、まだまだ改善の余地や機能拡張の可能性があります。

• AIの思考ロジックの強化：現状のCPUは簡易的なものですが、より高度なAIを実装することで、歯ごたえのある対戦が可能になります。
• オンライン対戦機能：世界中のプレイヤーと3人対戦オセロを楽しめるように、オンライン機能を実装することも検討できます。
• デザインの改善：より洗練されたUI/UXデザインを導入し、視覚的な魅力を高めることも可能です。
• ルールバリエーションの追加：初期配置や裏返しルールにバリエーションを持たせることで、さらに奥深いゲーム体験を提供できます。

AIの進化は目覚ましく、こうした改善や機能拡張もAIの力を借りることで、より効率的に、そして高品質に実現できるでしょう。
現に私はjava scriptでCPUの組み込みは出来ません。習得には多大な時間が掛かるでしょう。
また2人オセロは作れてもこの3人ロジックでコードを書く自信も無いし、何よりAIは5分も掛からず書く。
修正も的確で速い上に解説までしてくれました。WebAudioAPIでの音声やボタン音も同じです。
これから習得学習する技術の抑えるポイント、時間を掛けるべき要点も大きく変わり、選択と編集に重きを置く。結果学習法も要キャッチアップが常に求められる業界なので構築し実行しようと考え日々AIと向き合っています。

興味のある方はコチラの記事も！
【実体験】AI時代のWeb制作学習法|ブランクあり制作者が訓練でPythonを学び見出したキャリア戦略

まとめ：AI時代のゲーム開発とクリエイターの役割

今回の3人対戦オセロ開発を通じ、AIを活用したゲーム開発の可能性を改めて実感しました。AIは、単なるコード生成ツールにとどまらず、ゲームの企画段階から、数学的なアプローチでゲームバランスやルール設計を支援してくれる強力なパートナーとなり得ます。

AIにプロンプトを与えることで、これまで人間だけでは思いつかなかったような盤面やルール、あるいはその最適解を短時間で導き出すことができます。これにより、ゲームクリエイターはより本質的なクリエイティブな作業に集中し、アイデアを具体化するまでの時間を大幅に短縮できるでしょう。

また、今回のプロジェクトでは、既存の「3人対戦オセロ」が存在することを知りつつも、AIの精度検証と独自ルールでの実装に踏み切りました。これは、単に「アイデアが被ったからやめる」のではなく、「AIの力を借りて、より良いものを、あるいは新しいものを創り出す」というクリエイターとしての視点を持つことの重要性を示しています。

これからのゲーム開発においては、AIの技術を理解し、それをいかに効果的に活用するかが、成功の鍵となるでしょう。数学的な思考力もまた、AIとの対話を通じてゲームの論理的な整合性を保ち、より深いゲーム体験を提供するために不可欠です。

AIはあくまでツールであり、最終的にゲームを創り上げ、プレイヤーに感動を与えるのは人間のクリエイターです。AIを使いこなし、新たなゲーム体験を創造していく。そんな未来のゲームクリエイターとして、皆さんもぜひAIとの共創に挑戦してみてはいかがでしょうか。

【AIコード生成】3人打ちオセロ開発秘話とプロンプト全公開：まとめ

本記事では、ゲームクリエイターでない私が「3人対戦オセロ」という適当なアイデアを発端に、AIを活用し独自のゲーム開発したプロセスを詳しくご紹介しました。当初、AIに数学的な盤面設計を依頼し、また検索すると既に同様のゲームが存在することが判明するという驚きがありましたが、AIのコード生成精度の検証と、既存とは異なるルール・盤面での独自実装に踏み切りました。

開発では、10x10の広大な盤面、各プレイヤーのコマ数表示、リセット機能、パス機能、CPUとプレイヤーの切り替え、そしてBGM・効果音（サウンドオフ機能）といった多岐にわたる機能を盛り込みました。特に、AIに与えたプロンプトによって、3人対戦ならではの複雑なルールやバランスの取れた盤面が導き出された点は、AIの可能性を強く感じさせるものでした。

実装面では、HTMLで骨格を、CSSでデザインとレスポンシブ対応を、JavaScriptでゲームロジックと多彩な機能を短時間で構築しました。3方向への石の裏返しロジックや、PC・スマホ両対応の音楽再生も書き出してくれました。

今回の開発を通じ、AIは単なるコード生成ツールではなく、ゲーム企画・設計段階からクリエイターを強力に支援するパートナーとなることを実感しました。AIと数学的思考を組み合わせることで、これまで以上に効率的かつ高品質なゲーム開発が可能になります。これからはゲームクリエイターに留まらず・企画職・フロントエンド・コーダー等は、AIを使いこなし、その力を最大限に引き出すスキルが求められるでしょう。

本記事が、AI活用に興味のある方、ゲーム開発者の皆さんの新たな挑戦のきっかけになれば幸いです。AIと共に、まだ見ぬ世界を創造していきましょう！では。