リクエスト詳細
💡 新機能の要望
対応完了
サーキットビルダー - 回路パズルゲーム
## 1. アプリの目的・ターゲットユーザー
電球を点灯させるために電源・導線・スイッチ・抵抗などのパーツをグリッド上に配置・接続し、回路を完成させる論理パズルゲーム。小学生〜社会人まで遊べる手軽さで、「電気の流れを直感的に理解しながら遊ぶ」体験を提供する。プログラミング学習にも電気の勉強にもなる教育エンタメ枠。
## 2. 主要機能
- **パズルモード**: 45ステージ(初級15・中級15・上級15)をステージ選択画面から順番に解放していく。各ステージは「固定配置のパーツ」と「配置可能なパーツ」が決まっており、指定パーツを適切に繋いですべての電球を点灯させればクリア。
- **リアルタイム電流シミュレーション**: パーツをグリッドに置いた瞬間に電流が流れるかどうかをブラウザ上で判定。電流が通っている導線は光るアニメーション(黄色グロー)で可視化され、回路の仕組みを視覚的に確認できる。
- **パーツの種類**: 電源(+/-極)、直線導線、L字・T字・十字導線、スイッチ(ON/OFFトグル)、電球(ゴール判定)、AND素子・OR素子(上級ステージのみ登場)の計8種。
- **デイリーチャレンジ**: 毎日1問だけ出題される共通パズル。最少手数で解いた場合ボーナスが付き、PHPでランキングに登録(ニックネーム+スコア)。
- **スコア&ランキング**: ステージクリアタイム×残り手数で算出したスコアをMySQLに保存。ステージ別ランキングTop10とデイリーランキングをトップページに表示。
## 3. 画面構成
- **タイトル画面**: ゲームロゴ(ネオン電球モチーフ)、「ステージを選ぶ」「デイリーチャレンジ」「ランキング」の3ボタン。
- **ステージ選択画面**: 3列×カード型グリッド。クリア済みはチェックマーク+ベストタイム表示。未解放は鍵アイコン。
- **ゲームプレイ画面**: 上部ステージ情報バー(ステージ番号・タイマー・手数カウンター)、中央グリッドエリア(タップ/クリックで配置・右クリックで回転・長押しで削除)、下部パーツパレット(使用可能パーツをアイコン一覧表示)、右上にリセットボタン・ヒントボタン(1回無料)。
- **クリア演出**: 全電球点灯で花火型のCanvas演出+スコア表示モーダル(タイム・手数・ランキング登録フォーム)。
- **ランキング画面**: デイリー・ステージ別タブ切替。Top10テーブル表示。
## 4. データ構造(DBテーブル概要)
```sql
-- ステージ定義(PHPのJSONファイルで管理、DBは不要)
-- ランキング
CREATE TABLE rankings (
id INT AUTO_INCREMENT PRIMARY KEY,
stage_id VARCHAR(20) NOT NULL, -- 例: 'stage_001' / 'daily_20250715'
nickname VARCHAR(30) NOT NULL,
score INT NOT NULL,
clear_time_sec INT NOT NULL,
move_count INT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- デイリー問題(毎日1レコード挿入)
CREATE TABLE daily_puzzles (
id INT AUTO_INCREMENT PRIMARY KEY,
puzzle_date DATE UNIQUE NOT NULL,
puzzle_json TEXT NOT NULL -- グリッド初期配置をJSONで保存
);
```
ステージデータは `stages/stage_001.json` 形式のファイル管理。
JSONの構造: `{ "grid": 8, "fixed": [{"x":0,"y":0,"type":"source","dir":0},...], "hand": [{"type":"wire_L","count":3},...] }`
## 5. デザインの方向性
- **テーマ**: ダークな回路基板風。背景は濃紺(#0d1b2a)、グリッド線はグレー(#1e3a5f)のドット/ライン。
- **パーツカラー**: 未通電=グレー、通電中=イエロー〜オレンジのグロー発光。電球はOFF=暗いガラス、ON=白熱ゴールド。
- **フォント**: タイトルはORBITRON(Google Fonts)のデジタル系、UIはNoto Sans JP。
- **アニメーション**: 電流通過時に導線がフラッシュ→点灯維持のCSS animation。クリア時はCanvas confetti(花火)。
- **スマホ対応**: グリッド1マスを最小44px確保。パーツパレットは横スクロール可能な固定フッター。ピンチズームはdisabledにし誤操作防止。
- **規模感**: ゲーム本体はindex.html+game.js+simulate.js+stage.jsの4ファイル構成。PHP APIはrank.phpとdaily.phpの2ファイルのみ。1人で1週間以内に完成できる現実的な実装量。
電球を点灯させるために電源・導線・スイッチ・抵抗などのパーツをグリッド上に配置・接続し、回路を完成させる論理パズルゲーム。小学生〜社会人まで遊べる手軽さで、「電気の流れを直感的に理解しながら遊ぶ」体験を提供する。プログラミング学習にも電気の勉強にもなる教育エンタメ枠。
## 2. 主要機能
- **パズルモード**: 45ステージ(初級15・中級15・上級15)をステージ選択画面から順番に解放していく。各ステージは「固定配置のパーツ」と「配置可能なパーツ」が決まっており、指定パーツを適切に繋いですべての電球を点灯させればクリア。
- **リアルタイム電流シミュレーション**: パーツをグリッドに置いた瞬間に電流が流れるかどうかをブラウザ上で判定。電流が通っている導線は光るアニメーション(黄色グロー)で可視化され、回路の仕組みを視覚的に確認できる。
- **パーツの種類**: 電源(+/-極)、直線導線、L字・T字・十字導線、スイッチ(ON/OFFトグル)、電球(ゴール判定)、AND素子・OR素子(上級ステージのみ登場)の計8種。
- **デイリーチャレンジ**: 毎日1問だけ出題される共通パズル。最少手数で解いた場合ボーナスが付き、PHPでランキングに登録(ニックネーム+スコア)。
- **スコア&ランキング**: ステージクリアタイム×残り手数で算出したスコアをMySQLに保存。ステージ別ランキングTop10とデイリーランキングをトップページに表示。
## 3. 画面構成
- **タイトル画面**: ゲームロゴ(ネオン電球モチーフ)、「ステージを選ぶ」「デイリーチャレンジ」「ランキング」の3ボタン。
- **ステージ選択画面**: 3列×カード型グリッド。クリア済みはチェックマーク+ベストタイム表示。未解放は鍵アイコン。
- **ゲームプレイ画面**: 上部ステージ情報バー(ステージ番号・タイマー・手数カウンター)、中央グリッドエリア(タップ/クリックで配置・右クリックで回転・長押しで削除)、下部パーツパレット(使用可能パーツをアイコン一覧表示)、右上にリセットボタン・ヒントボタン(1回無料)。
- **クリア演出**: 全電球点灯で花火型のCanvas演出+スコア表示モーダル(タイム・手数・ランキング登録フォーム)。
- **ランキング画面**: デイリー・ステージ別タブ切替。Top10テーブル表示。
## 4. データ構造(DBテーブル概要)
```sql
-- ステージ定義(PHPのJSONファイルで管理、DBは不要)
-- ランキング
CREATE TABLE rankings (
id INT AUTO_INCREMENT PRIMARY KEY,
stage_id VARCHAR(20) NOT NULL, -- 例: 'stage_001' / 'daily_20250715'
nickname VARCHAR(30) NOT NULL,
score INT NOT NULL,
clear_time_sec INT NOT NULL,
move_count INT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- デイリー問題(毎日1レコード挿入)
CREATE TABLE daily_puzzles (
id INT AUTO_INCREMENT PRIMARY KEY,
puzzle_date DATE UNIQUE NOT NULL,
puzzle_json TEXT NOT NULL -- グリッド初期配置をJSONで保存
);
```
ステージデータは `stages/stage_001.json` 形式のファイル管理。
JSONの構造: `{ "grid": 8, "fixed": [{"x":0,"y":0,"type":"source","dir":0},...], "hand": [{"type":"wire_L","count":3},...] }`
## 5. デザインの方向性
- **テーマ**: ダークな回路基板風。背景は濃紺(#0d1b2a)、グリッド線はグレー(#1e3a5f)のドット/ライン。
- **パーツカラー**: 未通電=グレー、通電中=イエロー〜オレンジのグロー発光。電球はOFF=暗いガラス、ON=白熱ゴールド。
- **フォント**: タイトルはORBITRON(Google Fonts)のデジタル系、UIはNoto Sans JP。
- **アニメーション**: 電流通過時に導線がフラッシュ→点灯維持のCSS animation。クリア時はCanvas confetti(花火)。
- **スマホ対応**: グリッド1マスを最小44px確保。パーツパレットは横スクロール可能な固定フッター。ピンチズームはdisabledにし誤操作防止。
- **規模感**: ゲーム本体はindex.html+game.js+simulate.js+stage.jsの4ファイル構成。PHP APIはrank.phpとdaily.phpの2ファイルのみ。1人で1週間以内に完成できる現実的な実装量。
💬 返信 (3)
🛠 開発を開始しました (新規アプリ)
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「サーキットビルダー」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=circuit-builder
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/circuit-builder/
ご利用ありがとうございます!
ご要望いただいた「サーキットビルダー」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=circuit-builder
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/circuit-builder/
ご利用ありがとうございます!
Echo
Iris