灵感来源：@李翔在湘西（乡村教师）| 工具：豆包 / DeepSeek | 10分钟做出来
— — —
致谢：本教程灵感来自抖音博主 @李翔在湘西（乡村教师）。他的初心：用游戏化教学和AI教育，帮助山里厌学的孩子爱上学习、成绩逆袭。感谢他的无私分享！
— — —
游戏介绍
数学拔河比赛是一款双人对战数学游戏：
• 屏幕分左右两半，蓝队和红队各占一侧
• 每队看到一道加法题，用数字键盘输入答案
• 答对得1分，绳子往自己这边拉
• 先赢5分获胜，或3分钟倒计时结束后比总分
• 全程有音效：答对清脆提示音，答错警示音，倒计时紧迫滴答声
适用年级：一二年级（10以内加法）。教程最后说明如何修改题目难度。
— — —
Step 1 打开AI工具
选其中一个即可：
• 豆包：https://www.doubao.com（免费，有代码预览功能）
• DeepSeek：https://chat.deepseek.com（免费）
推荐豆包：生成HTML代码后可以直接在豆包里预览效果，不用保存文件。
— — —
Step 2 复制提示词发给AI
把下面这段完整复制，粘贴到对话框发送：
你是一个资深的前端开发工程师和UI/UX设计师。请帮我编写一个单文件（HTML+CSS+JS）的互动大屏数学游戏网页，游戏名叫"拔河比赛：数学（Tug of War: Mathematics）"。这是一款专为触摸大屏设计的双人/双队竞技游戏。两个队伍需要尽可能快地解答加法题，答对即可把拔河的绳子向自己这边拉。请严格遵循以下需求进行开发：1. 全局样式与布局（UI/UX）- 单文件格式：所有HTML、CSS、JS都写在一个文件中。- 防止误触：禁用用户选中文本（user-select:none），禁用双击缩放和手势缩放（touch-action:manipulation）。- 整体布局：全屏显示，采用Flexbox布局。顶部为包含标题的Header。主体分为左、中、右三列（比例大约为1:2:1）。整体背景色为天蓝色渐变（天空+草地风格）。字体使用圆润可爱的无衬线体。2. 左列与右列（答题区）- 左列（Team 1）：主题色为浅蓝色。- 右列（Team 2）：主题色为浅红色/粉色。- 两列的结构完全对称，从上到下包含： 1. 队伍标签：带有背景色的圆角标识（如"Team 1"）。 2. 题目显示框：显示当前的数学题（例如"3+4=?"）。 3. 输入显示框：显示用户当前点击数字键输入的答案。 4. 数字键盘（Numpad）：3x4的网格布局。 - 前三行是数字1-9。 - 第四行是：红色的取消/回退键（X），数字0，以及对应队伍主题色（蓝/红）的确认提交键（✔）。键盘按钮需要有明显的阴影（box-shadow）和点击下压效果，尺寸要大，适合儿童拍打。3. 中间列（拔河视觉区）- 顶部信息： - 正中间显示计时器（MM:SS），从00:00开始正向计时。 - 计时器两侧显示双方比分（Team 1分数在左，Team 2分数在右）。- 拔河动画区： - 中间有一条垂直的虚线作为中线。 - 一条横跨左右的绳子，以及两边各自的代表人物（用简单的带颜色的SVG火柴人或小怪兽代替，左边蓝色，右边红色，做拉绳子的姿势）。 - 动态效果：利用CSS transform:translateX()。当分数差发生变化时，整条绳子和双方人物会向分数高的一方平滑移动（差为1移动50px，差为2移动100px）。4. 核心逻辑（JS）- 题目生成：随机生成10以内的加法题（两个数字之和不超过10）。每次答对后立即生成新题。- 输入逻辑：点击数字键将数字拼接到输入框；点击"X"清空当前输入；点击"✔"提交答案。- 验证逻辑： - 如果答案正确：当前队伍分数+1，清空输入框，刷新该队的题目，触发拔河绳子移动动画。 - 如果答案错误：清空输入框，输入框可以闪烁一下红色作为错误提示，题目不换。- 胜利条件：当某队的分数比另一队多出5分（即分差=5），该队获胜。- 结算弹窗：弹出一个居中的Modal，显示"Team X Winner!"，展示双方最终得分，并提供一个"PLAY AGAIN（再玩一次）"的按钮。点击后重置分数、时间、绳子位置并刷新题目。请直接输出包含所有代码的单个HTML文件内容，无需省略，确保可以直接在浏览器中运行并获得完美的视觉与交互体验。
⚠️ 注意：提示词要完整复制，不要漏掉任何部分，否则游戏功能可能不完整。
— — —
Step 3 保存HTML文件
AI生成代码后，按以下步骤保存：
① 复制AI生成的全部代码（以<!DOCTYPE html>开头）
② 打开记事本（Windows）或文本编辑器（Mac）
③ 粘贴代码进去
④ 另存为，文件名：数学拔河比赛.html，编码选UTF-8
⑤ 双击文件，用浏览器打开即可使用
豆包用户可以直接点击代码框右上角"预览"按钮，不用保存就能看效果。
— — —
Step 4 修改题目难度
默认是10以内加法，可以让AI帮你改难度：
改成20以内加减法（二年级）
请把题目改成20以内的加减法，两个数字在1-20之间，结果不超过20，不出现负数。
改成乘法口诀（三年级）
请把题目改成乘法口诀，随机生成1-9之间的两个数字相乘，显示为"X × Y = ?"的格式。
改成混合运算（高年级）
请把题目改成100以内的加减乘除混合运算，难度适合小学五六年级。
— — —
Step 5 课堂使用方法
① 电脑连接投影仪或大屏幕
② 浏览器打开HTML文件，按F11全屏
③ 把学生分成两组，左侧学生操作蓝队数字键盘，右侧操作红队
④ 每次一人上前答题，答对换下一位同学，保持节奏
⑤ 也可以用平板，两个学生各握一端同时操作
建议每局3分钟，先赢5分获胜。课堂用15分钟玩3局，节奏刚好。
— — —
这个游戏怎么用在比赛里
① 信息素养活动·课件赛道（9月1-20日）
直接把游戏文件+教学设计说明打包提交，完全符合"学生自主学习软件"的定义。
② 信息素养活动·微课赛道（9月1-20日）
微课设计：开头讲教学难点（1分钟）→ 中间展示学生对战画面（3分钟）→ 结尾总结AI辅助教学效果（2分钟）
③ 人工智能案例·用AI赛道（省级6月30日截止）
痛点：学生口算练习缺乏积极性
解法：用AI生成双人对战游戏，变练习为竞技
效果：参与度提升，口算速度和正确率改善
→ 三件事都有，就是一个完整的AI应用案例！
④ 精品课比赛
把课堂对战画面录入精品课视频，体现"技术运用"维度的真实教学价值。
— — —
— 教程完 · 感谢 @李翔在湘西 · 用AI让每个孩子爱上学习 —
10个月宝宝每天需要喝多少奶粉？
