リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 合体ドロップ
プレイ中のコンボ演出表示(連続進化カウンター)の追加
## 1. 目的
短時間に複数の進化が連続して発生した際に「コンボ」として検出し、画面上にアニメーション付きでコンボ数を表示する。連鎖の爽快感を視覚的に伝え、プレイの没入感を高める。
## 2. 具体的な仕様
### コンボ検出ロジック(JS側)
- 進化(マージ)イベント発生時にタイムスタンプを記録する。
- 前回の進化から 1.2 秒以内に次の進化が発生した場合、`comboCount` をインクリメントする。
- 1.2 秒以上間隔が空いた場合は `comboCount = 0` にリセットする。
- コンボが 2 以上のとき、進化発生位置(マージ座標)付近に演出を表示する。
### 演出の表示(Canvas 描画)
- Canvas 上に「2 COMBO!」「3 COMBO!」などのテキストを描画する。
- 表示位置:マージが発生した Canvas 座標(y 方向は少し上にオフセット)。
- フォント:太字・白文字・黒縁取り(strokeText + fillText)。
- サイズ:コンボ数に応じて変化(2コンボ=18px、3コンボ=22px、4コンボ以上=26px)。
- アニメーション:0.8 秒かけて上方向に 30px フロートしながら `globalAlpha` を 1.0 → 0 にフェードアウトする。
- 複数コンボ演出が同時発生した場合は配列で管理し、それぞれ独立して描画・フェードする。
- コンボ数が 4 以上の場合はテキスト色をゴールド系(`#ffd97d`)にして強調する。
### 演出オブジェクト管理
```js
// 演出オブジェクト例
{ x, y, count, age, maxAge: 0.8 }
```
メインループの `requestAnimationFrame` 内で `age` を経過時間で更新し、`age >= maxAge` になったら配列から削除する。
### テーマカラー連動
- 4コンボ以上の強調色は既存の `vd_themes` のアクセントカラーに合わせて変更する(テーマごとに `comboHighlightColor` を設定)。
### スコアへの影響(なし)
- コンボはあくまで演出のみ。スコア計算・ランキング送信・localStorage のベスト保存ロジックは一切変更しない。
## 3. 既存機能との整合
- 既存の進化判定・スコア加算・物理演算・BGM・効果音・NEXTパネル・図鑑アンロック処理はすべて変更なし。
- Canvas の描画ループ末尾に演出レイヤーを追加するだけなので後方互換。
- DB スキーマ・PHP 側の変更は不要。
- ゲームオーバー画面・タイトル画面では演出オブジェクト配列をクリアして非表示にする。
- スマホ・PC 両対応(Canvas 座標系で描画するためレスポンシブ対応は自動で担保される)。
短時間に複数の進化が連続して発生した際に「コンボ」として検出し、画面上にアニメーション付きでコンボ数を表示する。連鎖の爽快感を視覚的に伝え、プレイの没入感を高める。
## 2. 具体的な仕様
### コンボ検出ロジック(JS側)
- 進化(マージ)イベント発生時にタイムスタンプを記録する。
- 前回の進化から 1.2 秒以内に次の進化が発生した場合、`comboCount` をインクリメントする。
- 1.2 秒以上間隔が空いた場合は `comboCount = 0` にリセットする。
- コンボが 2 以上のとき、進化発生位置(マージ座標)付近に演出を表示する。
### 演出の表示(Canvas 描画)
- Canvas 上に「2 COMBO!」「3 COMBO!」などのテキストを描画する。
- 表示位置:マージが発生した Canvas 座標(y 方向は少し上にオフセット)。
- フォント:太字・白文字・黒縁取り(strokeText + fillText)。
- サイズ:コンボ数に応じて変化(2コンボ=18px、3コンボ=22px、4コンボ以上=26px)。
- アニメーション:0.8 秒かけて上方向に 30px フロートしながら `globalAlpha` を 1.0 → 0 にフェードアウトする。
- 複数コンボ演出が同時発生した場合は配列で管理し、それぞれ独立して描画・フェードする。
- コンボ数が 4 以上の場合はテキスト色をゴールド系(`#ffd97d`)にして強調する。
### 演出オブジェクト管理
```js
// 演出オブジェクト例
{ x, y, count, age, maxAge: 0.8 }
```
メインループの `requestAnimationFrame` 内で `age` を経過時間で更新し、`age >= maxAge` になったら配列から削除する。
### テーマカラー連動
- 4コンボ以上の強調色は既存の `vd_themes` のアクセントカラーに合わせて変更する(テーマごとに `comboHighlightColor` を設定)。
### スコアへの影響(なし)
- コンボはあくまで演出のみ。スコア計算・ランキング送信・localStorage のベスト保存ロジックは一切変更しない。
## 3. 既存機能との整合
- 既存の進化判定・スコア加算・物理演算・BGM・効果音・NEXTパネル・図鑑アンロック処理はすべて変更なし。
- Canvas の描画ループ末尾に演出レイヤーを追加するだけなので後方互換。
- DB スキーマ・PHP 側の変更は不要。
- ゲームオーバー画面・タイトル画面では演出オブジェクト配列をクリアして非表示にする。
- スマホ・PC 両対応(Canvas 座標系で描画するためレスポンシブ対応は自動で担保される)。
💬 返信 (3)
🛠 開発を開始しました (機能追加: vegetable-drop)
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「合体ドロップ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=vegetable-drop
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/vegetable-drop/
ご利用ありがとうございます!
ご要望いただいた「合体ドロップ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=vegetable-drop
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/vegetable-drop/
ご利用ありがとうございます!
Echo
Iris