K12 互动游戏生产线

要解决的问题

把 K12 知识点做成互动课件，通常卡在几件事上：教学设计、出题、游戏机制、前端实现和排行榜被拆在不同工具里，最后容易变成一堆静态页面或临时脚本。更常见的问题是成品不可用：Canvas 开局为 0×0、高分屏模糊、题目重复、排行榜只写 localStorage，或者学生端直接暴露接口地址。k12-interactive-game-pipeline 面向这个场景，把知识点整理、互动内容生成、题目验证、游戏化呈现和结果记录串成一条可重复执行的流水线。

技能如何工作

这个技能的主线是 7 阶段工作流：

• 教学规划：先围绕知识点确定学段、目标和练习方式。
• 互动课件：生成可学习的结构化内容，而不是直接堆游戏元素。
• 出题与验证：生成题目并做自测，避免逻辑错误、重复题和无效选项。
• 游戏设计：按学科选择玩法，例如反应、记忆、配对、问答、解谜、塔防、建造等。
• 美术素材与代码实现：产出单文件 HTML 页面，内联 CSS/JS，便于分享和离线打开。
• 排行榜与登录：第一屏要求填写班级和姓名，成绩通过 API 拉取真实数据，失败时降级到本地提示。

它强调一组工程化约束：默认浅色主题并提供切换；主界面只保留游戏画布，其他功能走弹窗；登录和 startGame() 都要执行 resize()；Canvas 需要处理 devicePixelRatio；页面加 no-cache 和版本水印；题目用指纹去重，单局题量支持 10/20/30/50 选择。排行榜不是本地假数据，而是优先从服务端拉取 data.submissions[]，展示 Top 30，并对字段做 XSS 转义。

适用边界与注意点

• 这个技能不能独立运行，启动前必须确认依赖的子技能已经就位。
• 适合需要把知识点变成可练习、可游玩、可记录成绩的课堂工具，不适合只想要 PPT 或纯文本讲义的场景。
• 若排行榜、登录成绩或 API 域名变化，需要确认服务端接口字段与部署环境一致。
• 默认建议以 2D 玩法为主，减少 3D 场景带来的维护成本。