尧图网站建设 
OpenMAIC 教育游戏组件生成实战从 game-content 提示词模板到可运行 HTML 小游戏【免费下载链接】OpenMAICOpen Multi-Agent Interactive Classroom — Get an immersive, multi-agent learning experience in just one click项目地址: https://gitcode.com/GitHub_Trending/op/OpenMAIC本篇技术指南围绕 OpenMAIC 生成流水线中的game-content提示词模板user.md 与配套的 system.md展开讲解平台如何让大模型为课堂场景生成好玩、可交互、真正是游戏而不是测验的自包含 HTML 组件。读完本文你将掌握该模板的全部变量槽位与强制技术要求、提示词在生成流水线中的装配与后处理调用链以及一套可直接复用的教育游戏组件质量标准。一、模板在生成流水线中的位置game-content是 OpenMAIC 中Ultra Mode交互组件生成所注册的 13 类提示词之一其 ID 明确列在 PromptId 联合类型 中并对外暴露为PROMPT_IDS.GAME_CONTENT见 src/prompts/index.ts。当课堂场景的 outline 指定widgetType game时generateWidgetContent 会做如下装配case game: promptId PROMPT_IDS.GAME_CONTENT; variables { title: outline.title, gameType: widgetOutline.gameType || quiz, description: outline.description, keyPoints: (outline.keyPoints || []).join(\n), scoring: { correctPoints: 10, speedBonus: 5 }, languageDirective: languageDirective || , }; break;随后调用buildPrompt(promptId, variables)完成snippets → 条件块 → 变量插值三级装配实现见 src/prompts/loader.ts把渲染后的 system 与 user 两份提示词交给AICallFn模型入口最终返回{ html, widgetType, widgetConfig }。注意generateWidgetContent返回null时如无法构建提示词、模型输出无法解析为 HTML会先通过onFailure回调携带prompt-unavailable或invalid-model-output原因。gameType在 outline 层面的合法取值定义于 outline-types.tsquiz | puzzle | strategy | card | action与模板中的偏好排序基本对应。二、用户提示词骨架六个插值变量user.md是发给模型的任务书首部声明了 6 个{{placeholders}}槽位生成时必须全部被填充变量含义来源见 generateWidgetContent{{title}}游戏主题名称outline.title{{gameType}}游戏类型widgetOutline.gameType缺省为quiz{{description}}场景/知识点描述outline.description{{keyPoints}}教学要点列表按行拼接outline.keyPoints.join(\n){{scoring}}计分配置JSON 序列化默认{ correctPoints: 10, speedBonus: 5 }{{languageDirective}}语言指令由调用方传入的languageDirective变量插值由 interpolateVariables 实现{{(\w)}}匹配到的对象值会JSON.stringify(value, null, 2)展开未提供的变量则原样保留不会静默替换为空字符串——因此调用方如果漏传keyPoints、scoring模板会把这些占位符直接暴露给模型影响生成质量。2.1 scoring 的语义scoring默认值为{ correctPoints: 10, speedBonus: 5 }含义是correctPoints完成任务/达成目标的基础得分如安全着陆得 10 分speedBonus限时或加速完成获得的额外奖励分。模板允许生成方在user.md中按该结构传入更丰富的计分配置模型的输出侧则会在widget-config的scoring字段里给出最终方案。三、核心设计原则这是 GAME不是 QUIZuser.md的强制要求第一节标题即Game Design (CRITICAL - NOT A QUIZ!)配套 system.md 更是开门见山地声明Core Principle: GAMES, NOT QUIZZES。四条铁律交互式玩法玩家必须控制某个有意义的东西而不是单纯点击答案真实游戏机制要有计时、瞄准、拖拽、平衡、接物或搭建等机制基于技能的成功结果取决于玩家操作而非仅凭答对题目沉浸式反馈为每一次操作提供动画、音效与视觉特效。判断是否达标有一个很直白的自检把正确答案选择拿掉之后游戏是否还成立如果成立才是真正的游戏。四、游戏类型偏好排序模板按优先度列出 6 类玩法越靠前越鼓励物理/动作类控制参数达成目标安全着陆、命中目标、保持平衡计时/瞄准类在正确时机点击或调整准星拖拽类通过拖拽进行分类、排序、搭建模拟类让玩家调节变量、通过实验找到解卡牌/配对类记忆或配对游戏Quiz 类仅作最后手段且必须做得视觉上足够有趣。这与outline-types.ts的gameType联合类型quiz/puzzle/strategy/card/action基本同构模型生成的游戏应优先落入 action、puzzle、card 等类型quiz是兜底。Quiz 不可避免时怎么办见 system.md让它可交互拖答案到目标区而非点单选按钮、叠加物理/动作成分答对解锁下一段玩法、用图形化题干识别图示而非纯文本、题目控制在 3–5 题以内、把解释做成玩法奖励而不是惩罚。五、模拟即玩法让玩家亲手调参数如果游戏包含可视化模拟三条要求必须同时满足模拟可交互——玩家要能控制模拟中的某个参数模拟有意义——玩家的操作直接影响结果模拟与教学目标对齐——玩家调节的物理量正是正在学习的知识点。模板给出了一组鲜明的对照BAD模拟只是装饰题目问1000kg、9.8m/s² 需要多大推力给 4 个选项玩家点答案、播一段成功/失败动画。玩家全程没有与模拟互动。GOOD模拟即玩法游戏目标安全着陆航天器——玩家通过推力滑块0–15000N控制下降物理实时计算(thrust - mass*g)决定下落加速度挑战是让着陆速度 5m/s速度表实时可视化。玩家通过调推力、看结果亲身体验 Fma这就是 system.md 反复强调的Learning happens through PLAY。一句话口诀模板原文不要问需要多大推力——让玩家自己去调推力并看到结果六、游戏元素清单六件套无论哪种类型模板要求成品游戏具备以下要素清晰目标安全着陆命中目标正确分类玩家控制滑块、按钮、拖拽区或点击目标实时反馈分数、进度条、可视化指示器关卡/挑战难度逐级递进成就系统达成成就解锁徽章重玩价值随机元素或多条解法。配合 system.md 的 Engagement Features反馈要即时对错立刻可见、奖励要可视化动画/粒子/音效、关卡要变难、高分要记录。七、视觉设计四要点与主题匹配的吸引人主题风格控制与反馈的 UI 清晰明了成功/失败均有动画反馈响应式布局移动端 桌面端。八、强制技术要求MANDATORYuser.md列出 9 条硬性技术约束system.md 又对前四条做了展开论证这是组件能否在课堂 iframe 中稳定运行的关键1. 开始按钮必须用内联 onclick!-- CORRECT: 内联 onclick必定可用 -- button onclickstartGame()开始游戏/button !-- WRONG: addEventListener 在脚本出错时会静默失效 -- button idstart-btn开始游戏/button script // 若此前任何一行脚本报错这里绑定的事件将永远不会生效 document.getElementById(start-btn).addEventListener(click, startGame); /script2. 优先自定义 CSS避免 Tailwindlayer utilitiesTailwind CDN 的layer utilities在部分环境无法正确编译可能导致元素无样式甚至不可见。应使用普通 CSS确需 Tailwind 时只使用flex、text-center这类基础工具类避开layer utilities块。3. 脚本必须包进 DOMContentLoaded 或置于 body 末尾script document.addEventListener(DOMContentLoaded, function() { // 此时所有元素必然已存在 const canvas document.getElementById(gameCanvas); function startGame() { ... } }); /script4.startGame()必须是全局函数被内联 onclick 调用的函数必须全局可见。若把代码写在 DOMContentLoaded 内需显式window.startGame function() { ... }暴露出去。5. 内嵌widget-config配置必须包含script typeapplication/json idwidget-config。这一步与源码有直接契约流水线会调用 extractWidgetConfig 用正则/script typeapplication\/json idwidget-config([\s\S]*?)\/script/从 HTML 中提取该块并JSON.parse得到WidgetConfig供平台端使用。若配置缺失或不是合法 JSON返回undefined。6.requestAnimationFrame驱动游戏循环所有流畅动画必须走requestAnimationFrame这也是源码侧实时游戏循环的标准做法。7. 触控友好控制件最小 44px 触控目标保证移动端可玩。8. localStorage 记录进度与最高分9. 暂停功能九、输出格式只返回一份完整 HTML模板在Output一节明确Return ONLY the HTML document。system.md 补充了更严格的防重复规则只输出恰好一个!DOCTYPE html的文档不得复制 HTML 内容、不得出现多个 DOCTYPE、不得追加第二份副本结尾格式固定为/html后即结束无任何多余内容若发现自己开始重复输出立即停止只保留第一份完整文档。这条规则与流水线的解析逻辑一一对应generateWidgetContent拿到模型响应后调用 extractHtml优先匹配完整的!DOCTYPE html...文档其次回退到代码块提取若响应以html开头则直接裁剪使用都失败则记日志并返回null。模型一旦违反单一文档约束解析层将退回低置信度路径甚至直接判定invalid-model-output。十、生成后的自动后处理返回给宿主前生成的 HTML 还会经过 postProcessInteractiveHtml 两道增强游戏组件里书写数学公式时需留意LaTeX 定界符转换$$...$$→\[...\]、$...$→\(...\)且转换过程先以占位符保护所有script块避免误伤 JS 里的$如 jQuery、模板字符串KaTeX 注入若 HTML 中尚无katex字样自动在/head前注入 KaTeX CSS/JS 与 auto-render并通过MutationObserver对动态插入的内容自动渲染数学公式。因此游戏说明、结算面板中可以直接书写$Fma$之类的公式平台会自动完成渲染无需组件自己引入数学库。十一、配套系统提示词中的硬性质量门槛虽然user.md是任务书主体但真正落地执行时同一目录下的 system.md 为模型补充了三道一票否决级约束值得在生成与评测游戏组件时直接当作验收清单11.1 公平开局Fair Start绝不允许玩家在开局瞬间失败前 3–5 秒为安全宽限不判定失败条件默认参数下玩家至少能存活 10 秒游戏对象出生在安全位置远离危险区初始速度等物理参数必须先做稳定性核算再写入如轨道类游戏先验证initial_velocity sqrt(GM/r)。反例是地球距太阳 250 距离、初速 2.4远低于轨道速度一点开始就坠入太阳 → Mission Failed正例是先把初速算到稳定轨道 ≈sqrt(1500*200/250) ≈ 35或开局提供 3 秒碰撞禁用宽限。11.2 布局与定位避免 UI 遮挡计算游戏对象位置时必须为 HUD 和控制面板预留空间const TOP_MARGIN 100; // 顶部 HUD/统计区 const BOTTOM_MARGIN 250; // 底部控制区 const playableHeight canvas.height - TOP_MARGIN - BOTTOM_MARGIN; const objectY groundY - BOTTOM_MARGIN - (altitude / maxHeight) * playableHeight;附加规则控制面板不超过屏幕高度 30%移动端可折叠或并排主游戏对象必须始终可见canvas 填满容器但不与固定 UI 重叠。11.3 postMessage 监听器与平台驱动协议对接平台通过向 iframe 投递消息来驱动组件四条消息类型必须被监听否则静默失效消息类型作用典型实现SET_WIDGET_STATE按 key 设置控件/游戏参数按{param}-slider、{param}或[data-var]找到控件并触发input事件存在window.setGameParam则调用之HIGHLIGHT_ELEMENT高亮指定元素设置 3px 紫色 outline pulse-highlight动画3 秒后清除ANNOTATE_ELEMENT元素旁弹出教师批注在元素上方创建 fixed 定位 tooltip4 秒后移除REVEAL_ELEMENT显隐元素恢复display与opacity为此system.md 定义了元素命名规范保证消息能稳定命中控件滑块id{param}-slider如thrust-slider按钮id{action}-btn如start-btn、reset-btn纯 JS 状态参数暴露全局window.setGameParam(key, value)供SET_WIDGET_STATE驱动。监听器应在 body 末尾或 DOMContentLoaded 内注册配套pulse-highlight、fadeIn两个关键帧动画的style一并注入。11.4 简单直接的初始化流程startGame()建议四步完成隐藏开始遮罩 → 置gameActive true→initLevel()→requestAnimationFrame(gameLoop)。避免在事件绑定前读 localStorage、避免初始化阶段串联多个异步操作或 Promise 链——这些都会引入时序风险。十二、从 Widget Config Schema 到验收清单system.md 给出了游戏组件的配置契约示例供生成方与宿主对齐{ type: game, gameType: action, description: ..., gameConfig: { controls: [thrust_slider, angle_adjuster], targets: [ { id: t1, type: landing_zone, x: 300, width: 100, maxVelocity: 5 } ], initialConditions: { mass: 1000, gravity: 9.8, altitude: 500, initialVelocity: 0 }, successCondition: landingVelocity 5, levels: [] }, scoring: { completionPoints: 50, accuracyBonus: lower velocity more points, timeBonus: true }, achievements: [ { id: soft_landing, name: Butter Landing, description: Land at 2m/s, icon: } ] }提交前对照 system.md 的 16 条质量清单逐项核验重点游戏可交互而非纯测验、玩家确有有意义的控制、模拟参与玩法而非装饰、成败取决于技能、开局 3–5 秒不可失败、默认参数可存活、反馈即时清晰、触控友好、有开局说明、有成就激励、恰一个 DOCTYPE、对象不被 UI 遮挡。十三、相关源码与测试索引模板本体user.md、system.md提示词装配src/prompts/loader.ts、src/prompts/types.ts游戏组件生成入口generateWidgetContent、HTML 提取 extractHtml、配置提取 extractWidgetConfig后处理src/interactive-post-processor.tsOutline 类型与 gameType 取值src/outline-types.ts测试资产清单含 game-content 必须存在test/assets.test.ts至此一条从教师输入标题与知识点到可嵌入课堂 iframe、可被平台消息驱动、带计分与成就的自包含 HTML 游戏的完整链路已经清晰。遵循模板的变量契约与强制技术要求是让模型稳定产出高质量、可验收教育游戏组件的前提。【免费下载链接】OpenMAICOpen Multi-Agent Interactive Classroom — Get an immersive, multi-agent learning experience in just one click项目地址: https://gitcode.com/GitHub_Trending/op/OpenMAIC创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 OpenMAIC 教育游戏组件生成实战：从 game-content 提示词模板到可运行 HTML 小游戏
OpenMAIC 教育游戏组件生成实战从 game-content 提示词模板到可运行 HTML 小游戏【免费下载链接】OpenMAICOpen Multi-Agent Interactive Classroom — Get an immersive, multi-agent learning experience in just one click项目地址: https://gitcode.com/GitHub_Trending/op/OpenMAIC本篇技术指南围绕 OpenMAIC 生成流水线中的game-content提示词模板user.md 与配套的 system.md展开讲解平台如何让大模型为课堂场景生成好玩、可交互、真正是游戏而不是测验的自包含 HTML 组件。读完本文你将掌握该模板的全部变量槽位与强制技术要求、提示词在生成流水线中的装配与后处理调用链以及一套可直接复用的教育游戏组件质量标准。一、模板在生成流水线中的位置game-content是 OpenMAIC 中Ultra Mode交互组件生成所注册的 13 类提示词之一其 ID 明确列在 PromptId 联合类型 中并对外暴露为PROMPT_IDS.GAME_CONTENT见 src/prompts/index.ts。当课堂场景的 outline 指定widgetType game时generateWidgetContent 会做如下装配case game: promptId PROMPT_IDS.GAME_CONTENT; variables { title: outline.title, gameType: widgetOutline.gameType || quiz, description: outline.description, keyPoints: (outline.keyPoints || []).join(\n), scoring: { correctPoints: 10, speedBonus: 5 }, languageDirective: languageDirective || , }; break;随后调用buildPrompt(promptId, variables)完成snippets → 条件块 → 变量插值三级装配实现见 src/prompts/loader.ts把渲染后的 system 与 user 两份提示词交给AICallFn模型入口最终返回{ html, widgetType, widgetConfig }。注意generateWidgetContent返回null时如无法构建提示词、模型输出无法解析为 HTML会先通过onFailure回调携带prompt-unavailable或invalid-model-output原因。gameType在 outline 层面的合法取值定义于 outline-types.tsquiz | puzzle | strategy | card | action与模板中的偏好排序基本对应。二、用户提示词骨架六个插值变量user.md是发给模型的任务书首部声明了 6 个{{placeholders}}槽位生成时必须全部被填充变量含义来源见 generateWidgetContent{{title}}游戏主题名称outline.title{{gameType}}游戏类型widgetOutline.gameType缺省为quiz{{description}}场景/知识点描述outline.description{{keyPoints}}教学要点列表按行拼接outline.keyPoints.join(\n){{scoring}}计分配置JSON 序列化默认{ correctPoints: 10, speedBonus: 5 }{{languageDirective}}语言指令由调用方传入的languageDirective变量插值由 interpolateVariables 实现{{(\w)}}匹配到的对象值会JSON.stringify(value, null, 2)展开未提供的变量则原样保留不会静默替换为空字符串——因此调用方如果漏传keyPoints、scoring模板会把这些占位符直接暴露给模型影响生成质量。2.1 scoring 的语义scoring默认值为{ correctPoints: 10, speedBonus: 5 }含义是correctPoints完成任务/达成目标的基础得分如安全着陆得 10 分speedBonus限时或加速完成获得的额外奖励分。模板允许生成方在user.md中按该结构传入更丰富的计分配置模型的输出侧则会在widget-config的scoring字段里给出最终方案。三、核心设计原则这是 GAME不是 QUIZuser.md的强制要求第一节标题即Game Design (CRITICAL - NOT A QUIZ!)配套 system.md 更是开门见山地声明Core Principle: GAMES, NOT QUIZZES。四条铁律交互式玩法玩家必须控制某个有意义的东西而不是单纯点击答案真实游戏机制要有计时、瞄准、拖拽、平衡、接物或搭建等机制基于技能的成功结果取决于玩家操作而非仅凭答对题目沉浸式反馈为每一次操作提供动画、音效与视觉特效。判断是否达标有一个很直白的自检把正确答案选择拿掉之后游戏是否还成立如果成立才是真正的游戏。四、游戏类型偏好排序模板按优先度列出 6 类玩法越靠前越鼓励物理/动作类控制参数达成目标安全着陆、命中目标、保持平衡计时/瞄准类在正确时机点击或调整准星拖拽类通过拖拽进行分类、排序、搭建模拟类让玩家调节变量、通过实验找到解卡牌/配对类记忆或配对游戏Quiz 类仅作最后手段且必须做得视觉上足够有趣。这与outline-types.ts的gameType联合类型quiz/puzzle/strategy/card/action基本同构模型生成的游戏应优先落入 action、puzzle、card 等类型quiz是兜底。Quiz 不可避免时怎么办见 system.md让它可交互拖答案到目标区而非点单选按钮、叠加物理/动作成分答对解锁下一段玩法、用图形化题干识别图示而非纯文本、题目控制在 3–5 题以内、把解释做成玩法奖励而不是惩罚。五、模拟即玩法让玩家亲手调参数如果游戏包含可视化模拟三条要求必须同时满足模拟可交互——玩家要能控制模拟中的某个参数模拟有意义——玩家的操作直接影响结果模拟与教学目标对齐——玩家调节的物理量正是正在学习的知识点。模板给出了一组鲜明的对照BAD模拟只是装饰题目问1000kg、9.8m/s² 需要多大推力给 4 个选项玩家点答案、播一段成功/失败动画。玩家全程没有与模拟互动。GOOD模拟即玩法游戏目标安全着陆航天器——玩家通过推力滑块0–15000N控制下降物理实时计算(thrust - mass*g)决定下落加速度挑战是让着陆速度 5m/s速度表实时可视化。玩家通过调推力、看结果亲身体验 Fma这就是 system.md 反复强调的Learning happens through PLAY。一句话口诀模板原文不要问需要多大推力——让玩家自己去调推力并看到结果六、游戏元素清单六件套无论哪种类型模板要求成品游戏具备以下要素清晰目标安全着陆命中目标正确分类玩家控制滑块、按钮、拖拽区或点击目标实时反馈分数、进度条、可视化指示器关卡/挑战难度逐级递进成就系统达成成就解锁徽章重玩价值随机元素或多条解法。配合 system.md 的 Engagement Features反馈要即时对错立刻可见、奖励要可视化动画/粒子/音效、关卡要变难、高分要记录。七、视觉设计四要点与主题匹配的吸引人主题风格控制与反馈的 UI 清晰明了成功/失败均有动画反馈响应式布局移动端 桌面端。八、强制技术要求MANDATORYuser.md列出 9 条硬性技术约束system.md 又对前四条做了展开论证这是组件能否在课堂 iframe 中稳定运行的关键1. 开始按钮必须用内联 onclick!-- CORRECT: 内联 onclick必定可用 -- button onclickstartGame()开始游戏/button !-- WRONG: addEventListener 在脚本出错时会静默失效 -- button idstart-btn开始游戏/button script // 若此前任何一行脚本报错这里绑定的事件将永远不会生效 document.getElementById(start-btn).addEventListener(click, startGame); /script2. 优先自定义 CSS避免 Tailwindlayer utilitiesTailwind CDN 的layer utilities在部分环境无法正确编译可能导致元素无样式甚至不可见。应使用普通 CSS确需 Tailwind 时只使用flex、text-center这类基础工具类避开layer utilities块。3. 脚本必须包进 DOMContentLoaded 或置于 body 末尾script document.addEventListener(DOMContentLoaded, function() { // 此时所有元素必然已存在 const canvas document.getElementById(gameCanvas); function startGame() { ... } }); /script4.startGame()必须是全局函数被内联 onclick 调用的函数必须全局可见。若把代码写在 DOMContentLoaded 内需显式window.startGame function() { ... }暴露出去。5. 内嵌widget-config配置必须包含script typeapplication/json idwidget-config。这一步与源码有直接契约流水线会调用 extractWidgetConfig 用正则/script typeapplication\/json idwidget-config([\s\S]*?)\/script/从 HTML 中提取该块并JSON.parse得到WidgetConfig供平台端使用。若配置缺失或不是合法 JSON返回undefined。6.requestAnimationFrame驱动游戏循环所有流畅动画必须走requestAnimationFrame这也是源码侧实时游戏循环的标准做法。7. 触控友好控制件最小 44px 触控目标保证移动端可玩。8. localStorage 记录进度与最高分9. 暂停功能九、输出格式只返回一份完整 HTML模板在Output一节明确Return ONLY the HTML document。system.md 补充了更严格的防重复规则只输出恰好一个!DOCTYPE html的文档不得复制 HTML 内容、不得出现多个 DOCTYPE、不得追加第二份副本结尾格式固定为/html后即结束无任何多余内容若发现自己开始重复输出立即停止只保留第一份完整文档。这条规则与流水线的解析逻辑一一对应generateWidgetContent拿到模型响应后调用 extractHtml优先匹配完整的!DOCTYPE html...文档其次回退到代码块提取若响应以html开头则直接裁剪使用都失败则记日志并返回null。模型一旦违反单一文档约束解析层将退回低置信度路径甚至直接判定invalid-model-output。十、生成后的自动后处理返回给宿主前生成的 HTML 还会经过 postProcessInteractiveHtml 两道增强游戏组件里书写数学公式时需留意LaTeX 定界符转换$$...$$→\[...\]、$...$→\(...\)且转换过程先以占位符保护所有script块避免误伤 JS 里的$如 jQuery、模板字符串KaTeX 注入若 HTML 中尚无katex字样自动在/head前注入 KaTeX CSS/JS 与 auto-render并通过MutationObserver对动态插入的内容自动渲染数学公式。因此游戏说明、结算面板中可以直接书写$Fma$之类的公式平台会自动完成渲染无需组件自己引入数学库。十一、配套系统提示词中的硬性质量门槛虽然user.md是任务书主体但真正落地执行时同一目录下的 system.md 为模型补充了三道一票否决级约束值得在生成与评测游戏组件时直接当作验收清单11.1 公平开局Fair Start绝不允许玩家在开局瞬间失败前 3–5 秒为安全宽限不判定失败条件默认参数下玩家至少能存活 10 秒游戏对象出生在安全位置远离危险区初始速度等物理参数必须先做稳定性核算再写入如轨道类游戏先验证initial_velocity sqrt(GM/r)。反例是地球距太阳 250 距离、初速 2.4远低于轨道速度一点开始就坠入太阳 → Mission Failed正例是先把初速算到稳定轨道 ≈sqrt(1500*200/250) ≈ 35或开局提供 3 秒碰撞禁用宽限。11.2 布局与定位避免 UI 遮挡计算游戏对象位置时必须为 HUD 和控制面板预留空间const TOP_MARGIN 100; // 顶部 HUD/统计区 const BOTTOM_MARGIN 250; // 底部控制区 const playableHeight canvas.height - TOP_MARGIN - BOTTOM_MARGIN; const objectY groundY - BOTTOM_MARGIN - (altitude / maxHeight) * playableHeight;附加规则控制面板不超过屏幕高度 30%移动端可折叠或并排主游戏对象必须始终可见canvas 填满容器但不与固定 UI 重叠。11.3 postMessage 监听器与平台驱动协议对接平台通过向 iframe 投递消息来驱动组件四条消息类型必须被监听否则静默失效消息类型作用典型实现SET_WIDGET_STATE按 key 设置控件/游戏参数按{param}-slider、{param}或[data-var]找到控件并触发input事件存在window.setGameParam则调用之HIGHLIGHT_ELEMENT高亮指定元素设置 3px 紫色 outline pulse-highlight动画3 秒后清除ANNOTATE_ELEMENT元素旁弹出教师批注在元素上方创建 fixed 定位 tooltip4 秒后移除REVEAL_ELEMENT显隐元素恢复display与opacity为此system.md 定义了元素命名规范保证消息能稳定命中控件滑块id{param}-slider如thrust-slider按钮id{action}-btn如start-btn、reset-btn纯 JS 状态参数暴露全局window.setGameParam(key, value)供SET_WIDGET_STATE驱动。监听器应在 body 末尾或 DOMContentLoaded 内注册配套pulse-highlight、fadeIn两个关键帧动画的style一并注入。11.4 简单直接的初始化流程startGame()建议四步完成隐藏开始遮罩 → 置gameActive true→initLevel()→requestAnimationFrame(gameLoop)。避免在事件绑定前读 localStorage、避免初始化阶段串联多个异步操作或 Promise 链——这些都会引入时序风险。十二、从 Widget Config Schema 到验收清单system.md 给出了游戏组件的配置契约示例供生成方与宿主对齐{ type: game, gameType: action, description: ..., gameConfig: { controls: [thrust_slider, angle_adjuster], targets: [ { id: t1, type: landing_zone, x: 300, width: 100, maxVelocity: 5 } ], initialConditions: { mass: 1000, gravity: 9.8, altitude: 500, initialVelocity: 0 }, successCondition: landingVelocity 5, levels: [] }, scoring: { completionPoints: 50, accuracyBonus: lower velocity more points, timeBonus: true }, achievements: [ { id: soft_landing, name: Butter Landing, description: Land at 2m/s, icon: } ] }提交前对照 system.md 的 16 条质量清单逐项核验重点游戏可交互而非纯测验、玩家确有有意义的控制、模拟参与玩法而非装饰、成败取决于技能、开局 3–5 秒不可失败、默认参数可存活、反馈即时清晰、触控友好、有开局说明、有成就激励、恰一个 DOCTYPE、对象不被 UI 遮挡。十三、相关源码与测试索引模板本体user.md、system.md提示词装配src/prompts/loader.ts、src/prompts/types.ts游戏组件生成入口generateWidgetContent、HTML 提取 extractHtml、配置提取 extractWidgetConfig后处理src/interactive-post-processor.tsOutline 类型与 gameType 取值src/outline-types.ts测试资产清单含 game-content 必须存在test/assets.test.ts至此一条从教师输入标题与知识点到可嵌入课堂 iframe、可被平台消息驱动、带计分与成就的自包含 HTML 游戏的完整链路已经清晰。遵循模板的变量契约与强制技术要求是让模型稳定产出高质量、可验收教育游戏组件的前提。【免费下载链接】OpenMAICOpen Multi-Agent Interactive Classroom — Get an immersive, multi-agent learning experience in just one click项目地址: https://gitcode.com/GitHub_Trending/op/OpenMAIC创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考