BennyKok/omg.dev

キットからスマホ向けWebゲームを構築する

web-game テンプレートは、Vite + React + TypeScript で作られた完成済みゲーム（Coin Dash）です。あなたの仕事は、そのルール、ビュー、テキスト、アートをユーザーのゲーム用に置き換えることです。モバイルファースト：縦向きのスマホ（390 x 844）、片手操作。デスクトップでも動作する必要があります。

固定ルール

1. 何よりも先にライブプレビューを起動してください（ビルド順序のステップ1）。その後、コードを書きます：最大10行で計画を立て、編集します。1ターンにつき1ファイルまたは1機能、その後 bun run typecheck を実行します。
2. キットがすでに持っているもの（以下のリスト）を再構築しないでください。ゲームエンジン、UIライブラリ、または @react-three/fiber を追加しないでください。
3. ゲームルールは src/games/<game>/logic.ts 内の純粋関数です：React、DOM、描画、Date.now() または Math.random() を使用しません。代わりに seeded(seed) を使用します。同じシードは同じゲームを生成する必要があります：デイリーチャレンジとフレンド対戦ラウンドはこれに依存します。
4. サーバーは不要、サインインも不要です。進行状況は localStorage に保存されます（キットが行います）。
5. テキスト内の主張はすべて、ゲームの動作と一致している必要があります。
6. 「動作確認済み」とは、bun run check:play がパスし、そのスクリーンショットをスマホサイズで確認したことを意味します。ライブリンクからのHTTP 200はテストではありません。check:play はヘッドレスで動作し、デスクトップやブラウザウィンドウは必要ありません。

キットがすでに行っていること（再構築しないこと）

• 固定ステップループ、キーボードおよびタッチ入力（どこでもドラッグ、スティック、Dパッド、ステアリング、アクションボタン、マルチタッチ、2プレイヤー、コンピュータ上でのマウスドラッグ）、カメラ、衝突判定、タブ非表示時の一時停止。
• 2Dおよび3D用の1つのゲームUIが src/ui/ にあります：メニュー、HUDストリップ（スコアバッジ、ハート、タイマー、一時停止）、一時停止、結果、アンロック、遊び方とFAQ、端末を回転してください、トースト、ルーター、保存されたプロフィール。
• src/ui/theme.ts のテーマ：softCandy（デフォルト）、glassNeon、cleanMinimal。?theme=glassNeon で別のテーマをプレビューできます。
• ベストスコアとアンロック、デイリーチャレンジ（日付シード、発売日からの日数、連続記録）、チャレンジリンク ?c=<seed>&s=<score>&n=<name>（パラメータはサニタイズ済み、「あなたの勝ち / あなたの負け」と「送り返す」ボタン付き）、navigator.share またはクリップボードコピーでの共有、最初のタップ後のWeb Audioサウンド（ミュート記憶付き）、警告なしで失敗するバイブレーション。
• track(name, data) と game_open、game_start、game_over、play_engaged（45秒）、share、challenge_open、daily_complete イベント。コンソールにログを出力し、公開ページではomg analyticsに送信します。play.tsx 内の useRun がこれらを送信するので、再度送信しないでください。
• 100dvh、セーフエリア、スクロールやズームなし、48pxのタッチターゲット、動きの軽減。
• src/app/about.ts から構築されるSEO：タイトル、説明、Open Graph、共有画像、VideoGame と FAQPage データ。インストールマニフェストは、public/icons/ のアイコンを使用してomg Viteプラグインから生成されます。

2Dまたは3Dを選択

デフォルトは2D（スクリプトのgzipサイズ約100KB）。3Dは、アイデアに奥行きが必要な場合のみ使用します。three.js（gzipサイズ約137KB）が追加され、メニュー表示中にロードされ、2Dビルドでは決して読み込まれません。src/app/view.ts の1行で切り替え、その後使用しないビューファイルを削除します。

コントロールを選択

src/app/about.ts の GAME.controls で一度設定します：kind、touchHint（スマホのメニュー用）、keysHint（コンピュータのメニュー用）。play.tsx は GAME.controls.kind を <TouchControls> に渡します。2つのヒントと howToPlay は、同じコントロールを説明する必要があります。ボタンがあるゲームで「ドラッグ」と書いたり、ドラッグゲームで「矢印をタップ」と書いたりしないでください。check:ui と check:play は、別のコントロールを名指しするヒントを失敗とみなします。

ゲーム	kind	プレイヤーの操作	ルールが読み取るもの
パドル、キャッチ、ランナー、レーンよけ、スリングショット	drag	フィールド上の任意の場所をドラッグ	axisX/axisY；mode="absolute" の場合は dragTarget によりパドルが指の下に配置される
トップビュー、自由移動、ツインスティック	stick	左下のジョイスティックを操作	axisX/axisY
グリッド移動：迷路、スネーク、倉庫番	dpad	4方向矢印をタップ	axisX/axisY または wasTapped
レース、2キーによるレーン切り替え	steer	左または右を長押し	axisX
ワンタップ：フラッピー、ジャンプ、タイミング	buttons	アクションボタンをタップ	wasTapped(input, "p1", "a")

任意の kind に buttons={[...]} でアクションボタンを追加できます。axes="x" はドラッグを左右に制限します。キーボードは常に動作します：矢印キーまたはWASD、Space。

ビルド順序

1. プレビューを最初に、ファイルを編集する前に： プロジェクトディレクトリで node_modules がない場合は bun install を実行します。bun run dev をバックグラウンドで起動します（ポート5174）。omg_expose_port をポート5174で呼び出します（expoGo はなし）。ユーザーに伝えます：「プレビューは下のカードで準備できました。ビルド中に更新されます。」Viteはここからのすべての保存でプレビューをリロードします。最初の実行ステップで既にこれを行っている場合、またはこのプロジェクトの開発サーバーがポート5174を既に使用している場合は、ステップ2に進みます。
2. 計画： 1行でコアループ、コントロールの種類（上の表）、勝利、敗北、スコア、およびラウンドの終了方法（タイマー、ライフ、または落下アイテム）を記述します。README.md に記述します。
3. ルール： coin-dash/logic.ts を src/games/<game>/logic.ts にコピーします。createGame(players, seed)、stepGame(game, input, dt)、finalScore、events（サウンド用）、UNLOCKS、shareLine は保持します。axisX/axisY/wasTapped で入力を読み取ります。
4. ビュー： view-2d.ts（キャンバス：drawWorld、drawShadow、loadImage）または view-3d.ts（three.js：createStage、chaseCamera、billboard、checkerTexture；共有ジオメトリ、Lambertマテリアル、ブラブシャドウ、シャドウマップなし）をコピーします。アートスロット画像が設定されている場合は描画し、そうでない場合はプレースホルダー形状を描画します。
5. 配線： src/app/play.tsx でインポート、HUDの数値、FEEDBACK（イベントごとのサウンド）、ボタン、および run.finish({...}) の行を変更します。<TouchControls kind={GAME.controls.kind}>、<HudScore icon={ART.scoreIcon}>、run.step、run.finish は保持します。
6. 文言： src/app/about.ts を記入します（名前、検索ワードを含むタイトル、説明、タグライン、コントロール、発売日、向き、3〜5ステップの遊び方、ヒント、4〜6のFAQ）。
7. アート（必須）： キットにはCoin Dashのサンプルアートが同梱されており、それがユーザーのゲームに届いてはいけません。theme.ts のプリセットを選ぶか、またはプリセットを拡張して顧客の色を設定します。omg_generate_image を使用して1つのスタイルで画像を作成し（シート状にし、透明なPNGにカット、ゲーム全体で3MB未満）、以下のすべてのアイテムを置き換えます：
   • src/app/art.ts 内の ART.hero（ロゴの下のメニューアート）と ART.scoreIcon（HUDスコアアイコン）。public/art/hero.svg と public/art/score.svg を削除します。
   • ART.items（アンロックごとに1つ）と ART.sprites。
   • public/icons/（pwa-192x192.png、pwa-512x512.png、pwa-512x512-maskable.png、180x180の apple-touch-icon.png）と public/og.png（1200 x 630）。 その後、メニュー、プレイ、結果のスクリーンショットを確認します：赤いランナー、コイン、コインバッジが表示されていないことを確認します（ゲームがコインに関するものでない限り）。
8. チェック： bun run typecheck、bun test、bun run check:ui、次に bun run check:play を実行します。check:play は390 x 844でタッチ操作による1ラウンドを実行します：メニュー、プレイ、コントロール、一時停止、再開、結果、コンソールエラー、サンプルアート。.omg/ui-check/ と .omg/play-check/ 内のすべてのPNGを開きます。各FAILとWARNを修正し、再度実行します。check:play がパスするまで公開しないでください。
9. 公開： omg_deploy を実行します。初回公開時には public/omg-store/1.png 〜 3.png（390 x 844のメニュー、プレイ、結果）が必要です。1分待ってから、bun run check:play -- --url <ライブリンク> を実行し、そのスクリーンショットを確認します。そこでパスしたものだけを報告します。

キットのバグがあなたを妨げる場合にのみ src/ui/、src/game/、src/render/ を編集します。ヘルパーはゲームフォルダに追加します。

スマホのルール

• ビューポートタグ、styles.css、page.ts は保持します。HUDアイテムは <Hud> 内に配置します。重要なコントロールは下半分に配置します。
• ゲームタイムに setInterval、setTimeout、Date.now() を使用しないでください：代わりに dt をカウントします。
• alert、confirm、prompt、外部フォントやスクリプトを使用しないでください。
• 3D：最大で数百メッシュ、ジオメトリとマテリアルは再利用、ポストプロセッシングなし、大きなテクスチャなし。
• スマホでは、omgインストールバーがゲームの下に表示され、ゲームはその上のカードになります。これを非表示にしたり移動したりしないでください。

最終報告

1. ライブリンク。2. 1文でのゲームの説明。3. テストした内容とサイズ、ライブリンクでの check:play の結果。4. メニュー、プレイ、結果のスクリーンショット。5. 既知の問題または次のアイデア（最大5つ）。3Dを実際のスマホで確認したかどうかを記載してください。

これまでの教訓

• 横スクロールする行の最後にあるボタンが画面外に出て、プレイヤーが操作できなくなることがありました。check:ui はそのようなボタンを失敗とみなします。360pxで重要なボタンが画面に収まるようにしてください。
• 「動作確認済み」が、デプロイ直後でライブサイトがまだ古いビルドを配信しているときに主張されました。少し待ってから再確認してください。
• ゲームのコピーがソースから乖離することがありました。1つのフォルダからビルドし、コピーにパッチを適用しないでください。
• Fruit Catcher（10月22日）では、一対の矢印ボタンの上に「バスケットを動かすには左右にドラッグしてください」と表示されていましたが、ドラッグは何も起こりませんでした。GAME.controls を設定し、check:play で駆動させてください。
• 同じゲームが、キットの赤いランナー、コイン、コインスコアバッジ、コインアプリアイコンとともに出荷されました。ステップ7でこれらをすべて置き換えます。check:play はサンプルファイルがあると失敗します。
• ポートが公開されなかったため、ユーザーは5分間プレビューを見ることができませんでした。ステップ1は編集の前に行います。
• エージェントが「デスクトップブラウザが実行されていませんでした」と述べ、HTTPのみでライブリンクをチェックしました。check:play はヘッドレスです。ライブリンクで実行してください。
• 新しいカスタムイベント（play_engaged）に最適化された広告がドロップされました。標準的なゴールで広告を開始し、イベントが週に約50回発生し始めたら切り替えてください。