リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: レトロ爆弾迷路
ステージクリア時のクリアボーナス演出とスコア内訳表示
## 1. 目的
現状はステージクリア後に即次ステージへ遷移するため、達成感が薄い。ステージクリア時に短い「ステージクリア」モーダルを表示し、残り時間・残りライフに応じたボーナススコアを加算する内訳を見せることで、プレイヤーの満足感と継続モチベーションを高める。
## 2. 具体的な仕様
### 2-1. ステージクリアモーダル
- 既存の `.modal` クラスを再利用し、`#stage-clear-modal` を追加する。
- 表示タイミング: 最後の敵を倒した直後(または全ブロック破壊条件があればその直後)にゲームループを一時停止してモーダルを開く。
- モーダルの内容(HTML構成):
```
★ STAGE X CLEAR! ★
─────────────────────
敵撃破スコア : XXXX
残り時間ボーナス: +XX × 10 = XXXX
残りライフボーナス: +X × 500 = XXXX
─────────────────────
合計加算 : XXXX
─────────────────────
[NEXT STAGE]
```
- 数値はカウントアップアニメーション(`setInterval` で1桁ずつ増やす、約800ms)で表示する。
- カウントアップ完了後、「NEXT STAGE」ボタンが出現し押下で次ステージへ遷移。
- カウントアップ中もボタンはDOMに存在するが `disabled` にし、完了後に `disabled` 解除。
- キーボード操作: スペースキーでもカウントアップ完了・ボタン有効化をスキップして即座に次ステージへ進めるようにする(既存のキーハンドラに分岐追加)。
### 2-2. ボーナス計算ロジック(JS側)
```js
// 既存の remainingTime, lives 変数を利用
const timeBonus = remainingTime * 10; // 残り秒 × 10点
const lifeBonus = (lives - 1) * 500; // 残りライフ(現ライフ含まず) × 500点
const totalBonus = timeBonus + lifeBonus;
score += totalBonus; // 既存 score 変数に加算
updateHUD(); // 既存HUD更新関数を呼ぶ
```
- ボーナス加算はモーダルのカウントアップアニメーション完了時点で実施する(視覚的に「増えた」と感じさせるため)。
### 2-3. スタイル追加(既存CSSに追記)
```css
#stage-clear-modal .clear-title {
color: #ffd60a; font-size: clamp(20px,5vw,32px); text-align:center;
text-shadow: 3px 3px 0 #000; margin-bottom:12px;
}
#stage-clear-modal .score-table {
width:100%; border-collapse:collapse; color:#f8f7e8; font-size:14px;
font-family: "Courier New", monospace;
}
#stage-clear-modal .score-table td { padding: 5px 8px; }
#stage-clear-modal .score-table .total-row { color:#ffd60a; font-weight:700; border-top:2px solid #ffd60a; }
#stage-clear-modal .next-btn {
display:block; width:100%; margin-top:14px; min-height:48px;
background:#16a34a; border:3px solid #05060a;
color:#fff; font-size:18px; font-weight:700;
box-shadow:4px 4px 0 #000; cursor:pointer;
}
#stage-clear-modal .next-btn:disabled { opacity:.4; cursor:default; }
```
## 3. 既存機能との整合
- 既存の `.modal` / `.modal.open` の開閉ロジックをそのまま流用するため、他モーダル(ゲームオーバー・ポーズ等)に影響しない。
- `score` / `lives` / `remainingTime` は既存変数をそのまま参照するだけで、変数名変更・削除は行わない。
- ハイスコア保存(localStorage)は次ステージ開始前に呼ぶ既存タイミングを変えず、ボーナス加算後の `score` が正しく保存される。
- タッチ操作(画面下部ボタン)はモーダル表示中は `pointer-events:none` をゲーム盤面側に設定し誤操作を防ぐ(既存のモーダル表示時と同様の処理)。
- BGM・効果音: クリア時に既存の WebAudio でシンプルな上昇音(ド→ミ→ソ→ド の4音、各100ms)を鳴らす。既存のミュート設定を尊重し、`isMuted` フラグで分岐。
現状はステージクリア後に即次ステージへ遷移するため、達成感が薄い。ステージクリア時に短い「ステージクリア」モーダルを表示し、残り時間・残りライフに応じたボーナススコアを加算する内訳を見せることで、プレイヤーの満足感と継続モチベーションを高める。
## 2. 具体的な仕様
### 2-1. ステージクリアモーダル
- 既存の `.modal` クラスを再利用し、`#stage-clear-modal` を追加する。
- 表示タイミング: 最後の敵を倒した直後(または全ブロック破壊条件があればその直後)にゲームループを一時停止してモーダルを開く。
- モーダルの内容(HTML構成):
```
★ STAGE X CLEAR! ★
─────────────────────
敵撃破スコア : XXXX
残り時間ボーナス: +XX × 10 = XXXX
残りライフボーナス: +X × 500 = XXXX
─────────────────────
合計加算 : XXXX
─────────────────────
[NEXT STAGE]
```
- 数値はカウントアップアニメーション(`setInterval` で1桁ずつ増やす、約800ms)で表示する。
- カウントアップ完了後、「NEXT STAGE」ボタンが出現し押下で次ステージへ遷移。
- カウントアップ中もボタンはDOMに存在するが `disabled` にし、完了後に `disabled` 解除。
- キーボード操作: スペースキーでもカウントアップ完了・ボタン有効化をスキップして即座に次ステージへ進めるようにする(既存のキーハンドラに分岐追加)。
### 2-2. ボーナス計算ロジック(JS側)
```js
// 既存の remainingTime, lives 変数を利用
const timeBonus = remainingTime * 10; // 残り秒 × 10点
const lifeBonus = (lives - 1) * 500; // 残りライフ(現ライフ含まず) × 500点
const totalBonus = timeBonus + lifeBonus;
score += totalBonus; // 既存 score 変数に加算
updateHUD(); // 既存HUD更新関数を呼ぶ
```
- ボーナス加算はモーダルのカウントアップアニメーション完了時点で実施する(視覚的に「増えた」と感じさせるため)。
### 2-3. スタイル追加(既存CSSに追記)
```css
#stage-clear-modal .clear-title {
color: #ffd60a; font-size: clamp(20px,5vw,32px); text-align:center;
text-shadow: 3px 3px 0 #000; margin-bottom:12px;
}
#stage-clear-modal .score-table {
width:100%; border-collapse:collapse; color:#f8f7e8; font-size:14px;
font-family: "Courier New", monospace;
}
#stage-clear-modal .score-table td { padding: 5px 8px; }
#stage-clear-modal .score-table .total-row { color:#ffd60a; font-weight:700; border-top:2px solid #ffd60a; }
#stage-clear-modal .next-btn {
display:block; width:100%; margin-top:14px; min-height:48px;
background:#16a34a; border:3px solid #05060a;
color:#fff; font-size:18px; font-weight:700;
box-shadow:4px 4px 0 #000; cursor:pointer;
}
#stage-clear-modal .next-btn:disabled { opacity:.4; cursor:default; }
```
## 3. 既存機能との整合
- 既存の `.modal` / `.modal.open` の開閉ロジックをそのまま流用するため、他モーダル(ゲームオーバー・ポーズ等)に影響しない。
- `score` / `lives` / `remainingTime` は既存変数をそのまま参照するだけで、変数名変更・削除は行わない。
- ハイスコア保存(localStorage)は次ステージ開始前に呼ぶ既存タイミングを変えず、ボーナス加算後の `score` が正しく保存される。
- タッチ操作(画面下部ボタン)はモーダル表示中は `pointer-events:none` をゲーム盤面側に設定し誤操作を防ぐ(既存のモーダル表示時と同様の処理)。
- BGM・効果音: クリア時に既存の WebAudio でシンプルな上昇音(ド→ミ→ソ→ド の4音、各100ms)を鳴らす。既存のミュート設定を尊重し、`isMuted` フラグで分岐。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (retro-bomb-maze))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「レトロ爆弾迷路」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=retro-bomb-maze
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/retro-bomb-maze/
ご利用ありがとうございます!
ご要望いただいた「レトロ爆弾迷路」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=retro-bomb-maze
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/retro-bomb-maze/
ご利用ありがとうございます!
Echo
Iris