ゲームの仕様書をブラッシュアップしてからAIにゲーム作ってもらう（o3-mini-high）
仕様を軽くまとめてから、o3と詰めました。
↓これをコピペで最低限遊べてびっくりです。
以下の内容でJavaScriptでゲームを作り、HTMLで出力して。 1. 概要 タイトル: Fruit Merge Puzzle Game ジャンル: パズルゲーム プラットフォーム: Webブラウザ（HTML5, JavaScript） エンジン / ライブラリ: 物理: Matter.js レンダリング: HTML5 Canvas（複数のレイヤーを使用） キャンバスサイズ: 600 × 800 ピクセル 2. ゲーム概要 Fruit Merge Puzzle Game は、2D物理演算を利用したパズルゲームです。 プレイヤーは猫キャラクターを操作して果物を発射します。 落下する果物はゆっくりと重力の影響を受け、同じレベルの果物同士が衝突すると合体し、より高いレベルの果物に変化します。 合体によって得点が加算され、いずれかの果物の上端がキャンバスの上端に達するとゲームオーバーとなり、ランキング画面で最終スコアと上位スコアが表示されます。 3. ゲームの流れ スタート画面: 全画面オーバーレイでゲームタイトルと「スタート」ボタンが表示される。 プレイヤーがスタートボタンをクリックまたはタップすると、ゲームが開始される。 ゲームプレイ: 猫の移動: プレイヤーはタッチまたはマウスのドラッグで、猫の水平方向の位置を移動できる。 猫の位置はキャンバス内に制限される。 発射機構: 次に発射される果物はランダムに決定され、画面右上に小さなプレビュー（50×50ピクセル）で表示される。 プレイヤーがタッチやマウスボタンを離す（touchend/mouseup）と、現在の猫の位置から果物が発射される。 発射された果物は、下方向へゆっくり（初速例：下方向3）の速度で落下する。 ガイドライン: 猫の下部中心から床の直上まで、点線のガイドラインが別のキャンバスに描画され、果物の落下軌道の目安となる。 果物の合体: 落下中の果物は Matter.js による物理演算下で移動し、同一レベルの果物が衝突すると合体する。 合体時、2つの果物は中央位置で次のレベル（最大レベル6）の果物に変化し、得点が加算される。 ゲームオーバー: いずれかの果物の上端がキャンバスの上端に達するとゲームオーバーとなる。 ゲームオーバー後、ランキング画面が表示され、最終スコアおよび localStorage に保存された上位5スコアが表示される。 「リスタート」ボタンを押すと、ゲームが再起動される。 4. ユーザーインターフェース (UI) 背景: 背景色は黒 (#000) に設定する。 ヘッダー: 画面上部中央にゲームタイトルを表示する。 スコア表示: 画面左上に現在のスコアを表示する。 次に発射される果物のプレビュー: サイズは 50 × 50 ピクセルの小さなキャンバスで表示。 画面右上に配置し、ユーザー操作の邪魔にならないように pointer-events: none を設定する。 ガイドライン: 猫の下部から床の上部までの点線を、専用のキャンバスに描画する。 操作説明: 画面下部中央に「タッチ＆ドラッグで猫を動かし、指を離すと果物発射！」などの説明文を表示する。 スタート画面: 全画面オーバーレイで、タイトルと「スタート」ボタンが表示される。 ランキング画面: ゲームオーバー時に表示される全画面オーバーレイで、最終スコアと上位5スコアのランキングリスト、及び「リスタート」ボタンを含む。 5. ゲームメカニクス 5.1 猫キャラクター 役割: 果物発射の起点となる。 初期位置: 画面上部（y = 80ピクセル）に配置。 移動: タッチまたはマウスによる水平移動が可能。 猫の位置はキャンバス内にクランプされる。 5.2 果物の生成と発射 果物の種類: 以下の6種類の果物が存在し、それぞれレベルごとに半径、色、得点が設定される。 レベル 果物名 半径 (ピクセル) 色 得点 1 ぶどう 20 purple 10 2 イチゴ 30 red 20 3 オレンジ 40 orange 30 4 りんご 50 green 40 5 パイナップル 60 yellow 50 6 スイカ 70 pink 100 ランダム選択: 次に発射される果物は 1～6 のレベルからランダムに選ばれ、そのプレビューが更新される。 発射プロセス: プレイヤーがタッチまたはマウスボタンを離すと、現在の猫の位置から果物が生成される。 発射された果物は、下方向へ初速（例：y方向3）で発射され、ゆっくりと落下する。 合体メカニズム: Matter.js の物理演算により、果物は重力と衝突の影響を受ける。 同じレベルの果物が衝突すると、2つの果物は中央位置で合体し、次のレベルの果物に変化する（最大レベル6まで）。 合体時に、果物のレベルに応じた得点が加算される。 5.3 物理シミュレーション 物理エンジン: Matter.js を利用して 2D 物理シミュレーションを実現する。 重力: world.gravity.y を 0.5 に設定し、果物の落下速度をゆっくりにする。 境界: キャンバスの床、左右の壁、天井は静的オブジェクトとして設定する。 衝突検知: Matter.js の衝突イベントを利用して、同レベルの果物が衝突した際に合体処理を実行する。 6. ゲームオーバーとランキング ゲームオーバー条件: 任意の果物の上端がキャンバス上端に到達した場合、ゲームオーバーとなる。 ランキングシステム: ゲームオーバー時に最終スコアを表示する。 得点は localStorage に保存され、上位5スコアがランキングリストとして表示される。 リスタート機能: ランキング画面に「リスタート」ボタンがあり、クリックまたはタップすることでゲームが再起動される。 7. 技術仕様 プログラミング言語: JavaScript (ES6+) レンダリング: 複数の HTML5 Canvas 要素を使用 メインゲームキャンバス: Matter.js による描画用 ガイドキャンバス: 猫の下部から床までの点線描画用 次の果物プレビューキャンバス: 小さな果物プレビュー用 物理: Matter.js（CDN で読み込み） ユーザー入力: モバイル向けタッチイベント デスクトップ向けマウスイベント データ永続化: localStorage により、上位5スコアを保存・取得 8. その他の注意事項 UI の考慮点: 次に発射される果物のプレビューは 50 × 50 ピクセルとし、画面右上に配置してユーザー操作の邪魔にならないようにする。 ガイドラインは別レイヤのキャンバスに描画し、ユーザー入力に影響を与えないようにする（pointer-events: none）。 レスポンシブ対応: キャンバスサイズは 600 × 800 ピクセルに固定するが、UI要素はレイヤリングして、モバイルおよびデスクトップ環境で見やすくする。 拡張性: 現在の設計は、将来的なレベル追加、果物の種類追加、その他のゲームメカニクスの拡張に柔軟に対応できるように設計されている。1. 概要
タイトル: Fruit Merge Puzzle Game
ジャンル: パズルゲーム
プラットフォーム: Webブラウザ（HTML5, JavaScript）
エンジン / ライブラリ:
物理: Matter.js
レンダリング: HTML5 Canvas（複数のレイヤーを使用）
キャンバスサイズ: 600 × 800 ピクセル
2. ゲーム概要
Fruit Merge Puzzle Game は、2D物理演算を利用したパズルゲームです。
プレイヤーは猫キャラクターを操作して果物を発射します。
落下する果物はゆっくりと重力の影響を受け、同じレベルの果物同士が衝突すると合体し、より高いレベルの果物に変化します。
合体によって得点が加算され、いずれかの果物の上端がキャンバスの上端に達するとゲームオーバーとなり、ランキング画面で最終スコアと上位スコアが表示されます。
3. ゲームの流れ
スタート画面:
全画面オーバーレイでゲームタイトルと「スタート」ボタンが表示される。
プレイヤーがスタートボタンをクリックまたはタップすると、ゲームが開始される。
ゲームプレイ:
猫の移動:
プレイヤーはタッチまたはマウスのドラッグで、猫の水平方向の位置を移動できる。
猫の位置はキャンバス内に制限される。
発射機構:
次に発射される果物はランダムに決定され、画面右上に小さなプレビュー（50×50ピクセル）で表示される。
プレイヤーがタッチやマウスボタンを離す（touchend/mouseup）と、現在の猫の位置から果物が発射される。
発射された果物は、下方向へゆっくり（初速例：下方向3）の速度で落下する。
ガイドライン:
猫の下部中心から床の直上まで、点線のガイドラインが別のキャンバスに描画され、果物の落下軌道の目安となる。
果物の合体:
落下中の果物は Matter.js による物理演算下で移動し、同一レベルの果物が衝突すると合体する。
合体時、2つの果物は中央位置で次のレベル（最大レベル6）の果物に変化し、得点が加算される。
ゲームオーバー:
いずれかの果物の上端がキャンバスの上端に達するとゲームオーバーとなる。
ゲームオーバー後、ランキング画面が表示され、最終スコアおよび localStorage に保存された上位5スコアが表示される。
「リスタート」ボタンを押すと、ゲームが再起動される。
4. ユーザーインターフェース (UI)
背景:
背景色は黒 (#000) に設定する。
ヘッダー:
画面上部中央にゲームタイトルを表示する。
スコア表示:
画面左上に現在のスコアを表示する。
次に発射される果物のプレビュー:
サイズは 50 × 50 ピクセルの小さなキャンバスで表示。
画面右上に配置し、ユーザー操作の邪魔にならないように pointer-events: none を設定する。
ガイドライン:
猫の下部から床の上部までの点線を、専用のキャンバスに描画する。
操作説明:
画面下部中央に「タッチ＆ドラッグで猫を動かし、指を離すと果物発射！」などの説明文を表示する。
スタート画面:
全画面オーバーレイで、タイトルと「スタート」ボタンが表示される。
ランキング画面:
ゲームオーバー時に表示される全画面オーバーレイで、最終スコアと上位5スコアのランキングリスト、及び「リスタート」ボタンを含む。
5. ゲームメカニクス
5.1 猫キャラクター
役割:
果物発射の起点となる。
初期位置:
画面上部（y = 80ピクセル）に配置。
移動:
タッチまたはマウスによる水平移動が可能。
猫の位置はキャンバス内にクランプされる。
5.2 果物の生成と発射
果物の種類:
以下の6種類の果物が存在し、それぞれレベルごとに半径、色、得点が設定される。レベル果物名半径 (ピクセル)色得点1ぶどう20purple102イチゴ30red203オレンジ40orange304りんご50green405パイナップル60yellow506スイカ70pink100
ランダム選択:
次に発射される果物は 1～6 のレベルからランダムに選ばれ、そのプレビューが更新される。
発射プロセス:
プレイヤーがタッチまたはマウスボタンを離すと、現在の猫の位置から果物が生成される。
発射された果物は、下方向へ初速（例：y方向3）で発射され、ゆっくりと落下する。
合体メカニズム:
Matter.js の物理演算により、果物は重力と衝突の影響を受ける。
同じレベルの果物が衝突すると、2つの果物は中央位置で合体し、次のレベルの果物に変化する（最大レベル6まで）。
合体時に、果物のレベルに応じた得点が加算される。
5.3 物理シミュレーション
物理エンジン:
Matter.js を利用して 2D 物理シミュレーションを実現する。
重力:
world.gravity.y を 0.5 に設定し、果物の落下速度をゆっくりにする。
境界:
キャンバスの床、左右の壁、天井は静的オブジェクトとして設定する。
衝突検知:
Matter.js の衝突イベントを利用して、同レベルの果物が衝突した際に合体処理を実行する。
6. ゲームオーバーとランキング
ゲームオーバー条件:
任意の果物の上端がキャンバス上端に到達した場合、ゲームオーバーとなる。
ランキングシステム:
ゲームオーバー時に最終スコアを表示する。
得点は localStorage に保存され、上位5スコアがランキングリストとして表示される。
リスタート機能:
ランキング画面に「リスタート」ボタンがあり、クリックまたはタップすることでゲームが再起動される。
7. 技術仕様
プログラミング言語: JavaScript (ES6+)
レンダリング:
複数の HTML5 Canvas 要素を使用
メインゲームキャンバス: Matter.js による描画用
ガイドキャンバス: 猫の下部から床までの点線描画用
次の果物プレビューキャンバス: 小さな果物プレビュー用
物理:
Matter.js（CDN で読み込み）
ユーザー入力:
モバイル向けタッチイベント
デスクトップ向けマウスイベント
データ永続化:
localStorage により、上位5スコアを保存・取得
8. その他の注意事項
UI の考慮点:
次に発射される果物のプレビューは 50 × 50 ピクセルとし、画面右上に配置してユーザー操作の邪魔にならないようにする。
ガイドラインは別レイヤのキャンバスに描画し、ユーザー入力に影響を与えないようにする（pointer-events: none）。
レスポンシブ対応:
キャンバスサイズは 600 × 800 ピクセルに固定するが、UI要素はレイヤリングして、モバイルおよびデスクトップ環境で見やすくする。
拡張性:
現在の設計は、将来的なレベル追加、果物の種類追加、その他のゲームメカニクスの拡張に柔軟に対応できるように設計されている。
以上です！