🎮 今すぐ遊ぶ: https://codequest-rpg-theta.vercel.app
ドラクエ風の2DピクセルRPGで JavaScriptを学ぶ 教育Webアプリ。 フィールドを探索し、プログラミング概念を擬人化したモンスター15体(バグスライム、ヌルポインタゴースト、むげんループドラゴン、さいきのまじん リカージョン、はいれつクラーケン…)とエンカウント。クイズに正解すると攻撃がヒットし、敵を倒して経験値を稼ぎ、レベルアップしながら**5つのエリア(変数・条件分岐・ループ・関数・配列)**を攻略する。全60問。
- 🏫 0からの初心者OK: 各エリアの「まなびの石碑」で長老が戦う前に基礎を教える(変数=なまえつきの はこ)。アニメーションデモ付き(箱に値が入る/条件分岐の分かれ道/ループのカウンタ/関数の機械/配列の棚)。初回バトルは長老がガイド、詰まったら「ヒント」ボタン(答えでなく考え方を提示、代わりにダメージ半減)。まなぶ→ためす→たすけありで たたかうの3層構造
- 🎮 ゲームが先、教材が中身: グリッド移動・エンカウント・コマンドバトル・レベルアップ・エリア解放を備えた本格RPG構造
- 🔥 連続正解コンボ: 2連続でダメージx1.5、3連続以上でx2! ダメージ数字がポップアップし、敵は襲いかかり、勇者は歩行アニメで駆け回る
- 🗺️ メニューシステム: Esc/Xキーまたはメニューボタンで「つよさ」「ちず(世界地図)」「タイトルへ」。分野別の正答率・勝利数・最高コンボなど学習データをいつでも確認できる
- 🎁 ちしきのたからばこ: 各エリアに隠された宝箱で経験値ボーナス+全回復
- 📚 学習科学ベース: 即時フィードバック(全問解説付き)、誤概念ベースの誤答選択肢、間違えた問題ほど再出題される重み付き出題(間隔反復)
- 🕹️ 完全アセットレス: ドット絵はコード内の文字マップから描画、効果音はWeb Audio APIでファミコン風に合成。画像・音声ファイルゼロ
- 💾 セーブ対応: localStorageに自動保存(認証不要・上書き確認付き)。旧バージョンのセーブも自動マイグレーション
- 📱 タッチ対応: キーボードでもタップでも遊べる(長押しで連続移動)
| 操作 | キー |
|---|---|
| 移動 | 矢印キー / WASD / タップ長押し |
| 決定・メッセージ送り | Enter / Space / Z |
| クイズ回答 | 1〜4 / ↑↓+Enter / タップ |
| メニュー(つよさ・まなぶ・ちず・タイトルへ) | Esc / X / メニューボタン |
| クイズ中のヒント | H / ヒントボタン |
村(赤い屋根)に入るとHP全回復。ボスを倒すと次のエリアへの道が開く。
npm install
npm run dev # 開発サーバー
npm run test # ユニットテスト(ロジック・データ整合性)
npm run build # 型チェック + 本番ビルド- Vite + TypeScript(フレームワークなし・実行時依存ゼロ)
- Canvas 2D API(論理解像度256×192を3倍拡大、
image-rendering: pixelated) - Web Audio API(矩形波・三角波・ノイズによるSE合成)
- Vitest(出題ロジック・経験値計算・セーブ・データ整合性のテスト)
- 企画会議議事録 — 天才4人衆によるコンセプト会議
- 設計打ち合わせ議事録 — アーキテクチャ・データ設計
- 初心者対応会議議事録 — 「0から学べる」への改善方針
- 学習効果シミュレーション — 学び度合いの定量分析(
npm run simulateで再現可能)
MIT