TeacherMa AI Lab

Phaser 2D platformer

English Word Adventure

控制像素勇者在森林遗迹里奔跑、跳跃、攻击和施法。敌人、宝箱、机关和 Boss 都绑定英语任务，答对才能削弱敌人、打开道路并获得奖励。

正在加载 Phaser 和像素素材... 如果第一次加载稍慢，是因为浏览器正在读取 gameress 目录里的图片资源。

Game design document

英语横板动作学习游戏设计方案

01

游戏世界观

世界名为 Wordland。词语水晶被暗影语法师打碎，森林、城堡、矿洞和机械城的道路被英文谜题封锁。玩家扮演像素勇者，用理解、拼写、听力和造句能力修复水晶。

02

核心玩法循环

探索关卡 → 遇到学习绑定对象 → 完成英语挑战 → 敌人虚弱或机关开启 → 获得金币、宝石和掌握经验 → 系统记录表现并安排复习 → 进入更难区域。

03

主要角色设计

主角是 Word Knight，会跑、跳、挥剑和释放拼写魔法。伙伴角色包括发音精灵、复习导师和词库工匠，后续可用于新手引导、听力播放和学习报告。

04

敌人和 Boss 设计

普通敌人头顶显示单词，答对中文含义后进入虚弱状态。Boss “Grammar Golem” 分阶段出题：单词含义、拼写、句子排序、听力选择和语法选择轮流出现。

05

单词学习机制

每个单词记录掌握等级、答题次数、正确率、平均反应时间、错误类型、复习次数和下次复习时间。答错时立即显示中文解释、英文例句和记忆提示。

06

句子学习机制

机关门使用词块排序，听力水晶先朗读句子再让玩家选择文字。句子题记录薄弱结构，例如主谓宾、介词短语、一般现在时和 can 句型。

07

关卡设计

森林训练基础名词和动作词；城堡加入门锁、宝箱和介词；矿洞练习资源词、路线指令和听力；机械城引入时态、条件选择和 Boss 综合战。

08

UI/UX 设计

画布保持 16:9，右侧显示任务、分数、生命、连击和掌握等级。题卡浮在游戏上方，按钮大、反馈短、移动端提供触屏方向、跳跃、攻击、魔法和互动按钮。

09

数据结构设计

{
  term: "bridge",
  zh: "桥",
  mastery: 2,
  attempts: 7,
  correct: 5,
  reactionTimes: [2100, 1650],
  errorTypes: { meaning: 1, spelling: 1 },
  reviewCount: 3,
  nextReviewAt: 1781280000000
}
10

Phaser 项目目录结构

english-platformer-game.php
assets/
  css/english-platformer-game.css
  js/english-platformer-game.js
gameress/
  craftpix-net-396765-free-simple-platformer-game-kit-pixel-art/
  craftpix-net-370528-free-medieval-ruins-cartoon-2d-tileset/
11

MVP 开发步骤

先完成可移动主角、平台、敌人和题卡；再接入单词、拼写、句子排序、听力和 Boss；然后加入 IndexedDB、间隔复习、动态难度；最后扩展词库、账号同步和排行榜。

12

基础原型代码

本页面就是可运行原型：Phaser 负责 Canvas/WebGL 横板动作；IndexedDB 保存学习进度；Web Speech API 朗读英文；Web Audio API 播放答题、攻击和奖励音效。