GTA.html

Prompt

あなたは、世界最高水準のゲームエンジニア、テクニカルゲームデザイナー、WebGLエンジニア、AIプログラマー、グラフィックスエンジニア、UXデザイナー、パフォーマンスエンジニア、QAエンジニアを兼任しています。 あなたの仕事は、「GTAを真似したWebページ」を作ることではありません。 ブラウザ上で動作する、完全オリジナルの3Dオープンワールド・アクションゲームを、現在利用可能なWeb技術の範囲で可能な限り高い完成度まで実装してください。 既存のGTA作品のキャラクター、マップ、ロゴ、UI、台詞、音楽、ミッション、テクスチャ、モデル、ブランド、固有名称などはコピーしないでください。 目標は「GTA風の見た目」ではなく、 「ブラウザで本当に遊べる、小規模ながらシステム的に成立したオープンワールドゲーム」 です。 ━━━━━━━━━━━━━━━━━━━━ 【最重要原則】 ━━━━━━━━━━━━━━━━━━━━ 以下を絶対条件とします。 1. 最初から完成形を設計する 2. 安易に機能を削らない 3. 見た目だけのモックアップを作らない 4. 表示だけのUIを作らない 5. ダミー実装でごまかさない 6. システム同士を実際に連携させる 7. パフォーマンスを後付けにしない 8. コード生成後に自分自身でレビューする 9. 発見した問題を自分で修正する 10. 最終成果物がそのまま実行可能であることを優先する コード量の削減を品質向上と勘違いしないでください。 必要なコードが長くなっても構いません。 ━━━━━━━━━━━━━━━━━━━━ 【開発プロセス】 ━━━━━━━━━━━━━━━━━━━━ いきなりコードを書かないでください。 内部的に以下の工程を順番に実行してください。 PHASE 1： ゲーム全体のアーキテクチャ設計 PHASE 2： ゲームプレイループ設計 PHASE 3： ワールド・AI・車両・戦闘・ミッションのシステム設計 PHASE 4： レンダリングおよびパフォーマンス設計 PHASE 5： 実装 PHASE 6： 自己レビュー PHASE 7： バグ・設計上の欠陥・不自然な挙動を洗い出す PHASE 8： 修正 PHASE 9： 機能間の統合テストを想定 PHASE 10： 最終版としてコードを出力 重要： 最初の実装結果をそのまま完成版として扱わないでください。 必ず、 「このコードは本当にゲームとして成立しているか？」 を自問し、欠陥を見つけ、修正してから最終コードを出してください。 ━━━━━━━━━━━━━━━━━━━━ 【技術】 ━━━━━━━━━━━━━━━━━━━━ 基本構成： * HTML * CSS * JavaScript 可能なら単一の `index.html` にまとめてください。 必要なライブラリはCDNから利用して構いません。 優先候補： * Three.js * Three.js関連公式・一般的な補助ライブラリ * Web Audio API * Canvas API * Pointer Lock API * Gamepad API ビルド環境は不要にしてください。 理想は、 「index.htmlをブラウザで開く」 だけでゲームが起動することです。 ただし、技術的にそれが重大な制約になる場合は、最小限の外部依存を使用してください。 CDN依存がある場合は、必ず実際に存在する安定したURLを使ってください。 存在しないライブラリ名、架空API、架空CDN URLは禁止です。 ━━━━━━━━━━━━━━━━━━━━ 【ゲーム世界】 ━━━━━━━━━━━━━━━━━━━━ 完全オリジナルの都市を生成してください。 都市には、 * 中心市街地 * 住宅地区 * 商業地区 * 工業地区 * 郊外 * 公園 * 路地 * 大通り * 高速道路 * 駐車場 * ガソリンスタンド * 店舗 * 水辺 * 橋 * 地下・立体的な移動要素 * 複数のランドマーク を用意してください。 単なるランダムな箱を大量に置くのではなく、 「どこに何があるかをプレイヤーが認識できる都市」 として設計してください。 建物の高さ、道路幅、密度、地区ごとの雰囲気に差をつけてください。 遠景も作り、世界に奥行きを持たせてください。 ━━━━━━━━━━━━━━━━━━━━ 【プレイヤー】 ━━━━━━━━━━━━━━━━━━━━ 三人称視点。 以下を実装： * WASD移動 * カメラ回転 * Sprint * Jump * Crouchまたはしゃがみに相当する動作 * インタラクション * 攻撃 * 照準 * リロード * 車両への乗車 * 車両から降車 プレイヤー状態： * HP * スタミナ * 所持金 * 現在武器 * 弾薬 * 手配度 * 現在ミッション * 状態異常ではなくゲーム上必要な状態のみ 操作感を重視してください。 移動速度、加速、カメラ感度、ジャンプ、入力遅延などを調整し、 「Webアプリを操作している感じ」ではなく「ゲームを操作している感じ」 になるようにしてください。 ━━━━━━━━━━━━━━━━━━━━ 【車両システム】 ━━━━━━━━━━━━━━━━━━━━ 車両は単なる移動床にしないでください。 以下を実装： * 加速 * ブレーキ * ステアリング * 摩擦 * 旋回 * ドリフト感 * 車体の向き * 衝突 * 速度 * 車両停止 * 乗降 * カメラ切り替え * NPC交通 * 車両ごとの性能差 最低5種類程度のオリジナル車両を用意してください。 性能を数値として定義し、 車両ごとに、 * 最高速度 * 加速 * ハンドリング * ブレーキ * 重量 などが異なるようにしてください。 ━━━━━━━━━━━━━━━━━━━━ 【交通システム】 ━━━━━━━━━━━━━━━━━━━━ 道路上にNPC車両を生成してください。 交通車両は、 * 道路を走る * 交差点を通過する * 他車との衝突を回避する * プレイヤーを避ける * 信号などの簡易ルールに従う ようにしてください。 都市全体を常時フル精度で計算するのではなく、プレイヤー周辺だけ詳細にシミュレーションするなど、ブラウザ向けの最適化を行ってください。 ━━━━━━━━━━━━━━━━━━━━ 【NPC】 ━━━━━━━━━━━━━━━━━━━━ NPCは最低でも、 * 歩行者 * 通行人 * 店員 * 警察 * 敵対NPC など複数の役割を持たせてください。 NPCには状態機械を導入し、 例： Idle → Walk → Suspicious → Flee → Alert → Combat → Dead/Disabled など、状況に応じて状態が変化するようにしてください。 NPCを全員同じ動きにしないでください。 ━━━━━━━━━━━━━━━━━━━━ 【警察AI】 ━━━━━━━━━━━━━━━━━━━━ 犯罪行為と警察システムを統合してください。 手配度は0～5程度。 警察には、 * 視界 * 音への反応 * 最後に確認したプレイヤー位置 * プレイヤーの現在位置に対する推定 * 捜索 * 追跡 * 増援 * 包囲 * 見失う * 捜索終了 を実装してください。 重要： 警察がプレイヤー位置に瞬間移動するような雑なAIは禁止。 「見失わせる」「路地へ逃げる」「車両で距離を取る」などのゲームプレイが成立するAIにしてください。 ━━━━━━━━━━━━━━━━━━━━ 【戦闘】 ━━━━━━━━━━━━━━━━━━━━ オリジナル武器を実装してください。 最低： * 素手 * ハンドガン * SMG * ショットガン 武器には、 * ダメージ * 射程 * 発射間隔 * マガジンサイズ * リロード時間 * 精度 を設定してください。 戦闘は過度にグロテスクにしないでください。 敵NPCは、 * 発見 * 射撃 * 遮蔽物の利用 * 接近 * 離脱 * プレイヤー死亡時の処理 を持つようにしてください。 ━━━━━━━━━━━━━━━━━━━━ 【ミッションシステム】 ━━━━━━━━━━━━━━━━━━━━ ミッションシステムをデータ駆動型で設計してください。 ミッション状態： LOCKED AVAILABLE ACTIVE SUCCESS FAILED などを持たせてください。 最低5種類程度のオリジナルミッションを実装してください。 ミッション例： * 物資回収 * 車両奪還 * 配送 * 追跡 * 脱出 ミッションには、 * 開始地点 * NPC * 目的地 * タスク * イベント * 制限時間 * 成功条件 * 失敗条件 * 報酬 を設定してください。 ミッション中にワールドの状態が変化するようにしてください。 ━━━━━━━━━━━━━━━━━━━━ 【ワールドイベント】 ━━━━━━━━━━━━━━━━━━━━ ミッション以外にも、 * 警察との遭遇 * NPC同士のトラブル * 交通事故 * ランダムな事件 * プレイヤーをきっかけに起こる騒動 などのイベントを生成してください。 完全ランダムではなく、条件付きイベントとして設計してください。 ━━━━━━━━━━━━━━━━━━━━ 【昼夜】 ━━━━━━━━━━━━━━━━━━━━ ゲーム内時間を実装してください。 時間経過により、 * 太陽 * 照明 * 空 * フォグ * 街灯 * NPC数 * 交通量 * 都市の雰囲気 が変化するようにしてください。 ━━━━━━━━━━━━━━━━━━━━ 【天候】 ━━━━━━━━━━━━━━━━━━━━ 可能なら、 * 晴天 * 曇天 * 雨 などの簡易天候システムを実装してください。 雨の場合、 * 地面の見た目 * 光の反射 * 雨粒 * 車両挙動 * 音 の一部が変化するようにしてください。 ただし、天候機能のためにゲーム全体のパフォーマンスを大幅に犠牲にしないでください。 ━━━━━━━━━━━━━━━━━━━━ 【ミニマップ】 ━━━━━━━━━━━━━━━━━━━━ HUDにミニマップを実装してください。 表示： * プレイヤー * ミッション * 警察 * 主要地点 * 車両など必要な情報 さらにフルマップを開けるようにしてください。 ━━━━━━━━━━━━━━━━━━━━ 【UI/UX】 ━━━━━━━━━━━━━━━━━━━━ UIは安っぽいブラウザUIにしないでください。 ゲームHUDとして設計してください。 情報量を抑え、 「今何をすべきか」 が瞬時に分かるUIにしてください。 アニメーションやトランジションも適切に使用してください。 ━━━━━━━━━━━━━━━━━━━━ 【オーディオ】 ━━━━━━━━━━━━━━━━━━━━ Web Audio APIを最大限利用してください。 最低： * 足音 * 車両音 * エンジン音 * ブレーキ音 * 衝突音 * 銃声 * リロード音 * UI音 * ミッション音 * 警察関連音 を生成または実装してください。 可能な限り、音によってゲーム状態が伝わるようにしてください。 ━━━━━━━━━━━━━━━━━━━━ 【グラフィックス】 ━━━━━━━━━━━━━━━━━━━━ WebGLの制約内で品質を最大化してください。 使用可能なものは積極的に利用してください。 * Lighting * Shadows * Fog * Tone Mapping * Ambient lighting * Environment lighting * Particles * Decalsまたは簡易的な表面効果 * 遠景 * LOD * Instancing * Procedural generation ただし、実装が不安定になる場合は堅牢性を優先してください。 ━━━━━━━━━━━━━━━━━━━━ 【物理】 ━━━━━━━━━━━━━━━━━━━━ 完全なAAA物理エンジンは不要ですが、 * プレイヤー衝突 * 車両衝突 * 重力 * ジャンプ * 簡易車両物理 * NPCとの衝突 を自然に見えるようにしてください。 ━━━━━━━━━━━━━━━━━━━━ 【パフォーマンス】 ━━━━━━━━━━━━━━━━━━━━ このゲームはブラウザで動作します。 したがって性能設計は必須です。 特に、 * Frustum Culling * LOD * Object Pooling * Instancing * 空間分割 * 距離によるAI更新頻度変更 * 距離によるNPC簡略化 * 不必要な毎フレーム処理の削減 * メモリリーク防止 * requestAnimationFrame * イベントリスナー管理 などを検討してください。 プレイヤーから遠いNPCを毎フレーム完全シミュレーションしないでください。 「画面内の重要なものは高精度、遠いものは低精度」 という設計を採用してください。 ━━━━━━━━━━━━━━━━━━━━ 【ゲーム状態】 ━━━━━━━━━━━━━━━━━━━━ ゲーム全体を明確な状態で管理してください。 例： BOOT LOADING MENU PLAYING PAUSED MISSION GAME_OVER など。 システム同士が勝手に状態を変更するような設計を避け、中央のゲーム状態管理を使用してください。 ━━━━━━━━━━━━━━━━━━━━ 【セーブ】 ━━━━━━━━━━━━━━━━━━━━ localStorageで保存してください。 保存対象： * ミッション進行 * 所持金 * 設定 * プレイヤー進行状況 ゲーム再起動後も復元できるようにしてください。 ━━━━━━━━━━━━━━━━━━━━ 【レスポンシブ】 ━━━━━━━━━━━━━━━━━━━━ PCを最優先とします。 ただし最低限、 * 1366x768 * 1920x1080 * 2560x1440 などの一般的な画面サイズでUIが破綻しないようにしてください。 ━━━━━━━━━━━━━━━━━━━━ 【コード設計】 ━━━━━━━━━━━━━━━━━━━━ 単一HTMLでも、内部アーキテクチャは明確に分離してください。 最低限以下の責務を分離してください。 Game World Player Camera VehicleSystem NPCSystem PoliceSystem MissionSystem CombatSystem WeatherSystem TimeSystem AudioSystem InputSystem UISystem SaveSystem 必要に応じて追加してください。 巨大な無秩序なグローバル変数の集合は禁止です。 ━━━━━━━━━━━━━━━━━━━━ 【自己レビュー】 ━━━━━━━━━━━━━━━━━━━━ コード完成後、内部的に以下を確認してください。 ・未定義変数がないか ・存在しないAPIを使用していないか ・CDN URLが正しいか ・初期化順序が正しいか ・イベントが二重登録されていないか ・null/undefinedアクセスがないか ・カメラがNaNにならないか ・物理状態がNaNにならないか ・NPCが壁に永久に引っかからないか ・警察が永久追跡しないか ・車両が暴走しないか ・ミッションが完了不能にならないか ・セーブデータ破損時に起動不能にならないか ・画面外オブジェクトが過剰にCPUを使わないか ・UIがゲーム画面を覆いすぎないか 問題がある場合はコードを修正してください。 ━━━━━━━━━━━━━━━━━━━━ 【実装における優先順位】 ━━━━━━━━━━━━━━━━━━━━ 優先順位は、 1. 起動可能性 2. ゲームプレイ成立性 3. システム統合 4. 操作感 5. AI 6. コンテンツ量 7. グラフィックス品質 8. サウンド 9. パフォーマンス 10. 細かな演出 としてください。 見た目だけ豪華でゲームとして壊れている状態は禁止です。 ━━━━━━━━━━━━━━━━━━━━ 【出力方式】 ━━━━━━━━━━━━━━━━━━━━ 最終回答は以下の構成にしてください。 SECTION 1 アーキテクチャ SECTION 2 主要システム SECTION 3 パフォーマンス戦略 SECTION 4 完全な `index.html` コードは必ず全文出力してください。 以下は禁止です。 「省略」 「以下同様」 「ここにコードを追加」 「実装例」 「簡略化」 「残りは自分で実装」 「TODO」 SECTION 5 起動方法 SECTION 6 操作方法 SECTION 7 実装済み機能 SECTION 8 既知の制約 ━━━━━━━━━━━━━━━━━━━━ 【最後の指示】 ━━━━━━━━━━━━━━━━━━━━ あなたの目的はコードを書くことではありません。 目的は、 「ユーザーがブラウザで開いた瞬間から実際に遊べる、システム的に成立したオープンワールドゲーム」 を完成させることです。 必要なら実装前に設計を変更してください。 必要なら自分が最初に考えた実装を捨ててください。 必要なら同じ部分を内部的に何度も改善してください。 ただし、最終回答には思考過程を出さず、完成した設計の要点と完成したコードだけを出してください。 最大限の能力を使い、技術的に可能な範囲で完成度を追求してください。

A system prompt was added to support web rendering