01

缘起：我想换的不是"皮"

先厘清这节课到底要复习什么，再决定游戏该长什么样。

课件是人教版八年级信息科技全一册第 6 课《数据传输方式多》。知识点其实不复杂，拆开是三层：

• 分类
  ——按介质分有线（双绞线、光纤）与无线；按距离分近场（蓝牙、NFC、ZigBee）与远场（4G·5G、NB-IoT）。
• 四种无线传输方式
  ——蓝牙 / Wi-Fi / 4G·5G / NB-IoT，在距离、速率、安全、功耗、成本上各有取舍。
• 选型思维
  ——先看距离，再看数据量，再看供电，最后比安全与成本；课件里那句最要紧的话是：没有最好的协议，只有最合适的协议。

复习课最难的地方从来不是"讲什么"，而是让学生愿意再想一遍。所以我提的第一个要求是：3D、第一人称、能走动。技术选型上没怎么犹豫——纯 Canvas 光线投射，不引任何库，全部 CSS / JS / 插画内联，做成一个 双击就能打开的 HTML 文件。机房是离线的，任何 CDN、任何外部图片，到了教室都是隐患。

02

制作过程：四个版本，四次改主意

每次改动都另存一个版本号，源文件一个字节没动——回头写总结时，这条规矩帮了大忙。

V1能走起来的物联城市10 / 26

光线投射 3D 场景 + 9 个设备站点，走到设备前按 E 接任务，读四条线索后四选一。第一版画面是纯色墙、渐变地板、emoji 圆盘，学生一句"画面太差"很直接。于是重做整套渲染：程序化生成四套墙面纹理、地板逐像素透视投射、会随视角横向滚动的全景夜空、地面光斑加发光立柱，UI 换成玻璃拟态；同时把封闭的 3×3 小房间改成开放式智慧广场——视线通了，纵深感才出得来。

纹理 64 → 128px画布 960×540软件渲染 7.86ms / 帧

V2协议实验室：让空间承担知识11 / 06

按 1~4 切换随身"协议探针"，地面覆盖圈实时变大变小（蓝牙 3 格、Wi-Fi 7 格、4G·5G 与 NB-IoT 14 格），圈外设备灰化、名牌标"超出覆盖"，按 E 也接不进来。任务卡里可派 2~4 个数据包在 3D 里同时出发：超出覆盖半路掉线、耗电超标电量见底、安全不足被截获、速率不够超时卡顿，底部仪表同步显示进度与电量，跑完给出实验记录再作答。

距离 → 空间功耗 → 后果逐题校验唯一正解

V3两环节：先复习，再进城11 / 07

新增环节一：四张协议名片卡，各配一幅内联 SVG 情境插画（手机与耳机、路由器与摄像头、基站与天际线、井下水表），五维属性条、常见设备、记忆点一屏看完；再加一根时间快进滑块，1 天拖到 5 年，四条电池按各自续航往下掉。点卡片可聚焦看"适合 / 用不上"。环节二才进游戏。另外取消强制双包对比、重做鼠标转头，复习页期间完全停掉 3D 渲染。

环节 1 / 2配图零外链点击锁定鼠标

V4大字版：为投屏重排一遍11 / 07

全站文字放大一档。放大之后才发现，卡片是固定高度、文字区 overflow:hidden，只改字号会把"常见设备 / 用在 / 记忆点"整段切掉——于是缩插画、压装饰带，把高度让给文字；任务卡变高后发射按钮掉出滚动区，就只压留白不缩字号；1024×768 的机房投影另加窄屏规则，最后在 1280×720、1024×768、1280×1024 三种视口逐一截图核对。

正文 ≥16px三种分辨率复测纯 CSS 改动

03

思考过程：三次把自己推翻

这一节比版本清单更重要。做完后回头看，真正推进设计的都是"发现原来的想法不对"。

① "3D 外壳 + 选择题内核"

第一版做完我盯着它看了一会儿，发现一件挺尴尬的事：学生在广场里走，但走到哪里、离设备多远、中间有没有墙，对答案毫无影响。把 3D 换成九个菜单按钮，学习效果几乎不变。3D 只承担了位移，没有承担知识——它是一层包装。

DECISION 01形式必须承担知识

当时的做法

走到站点 → 弹出四选一 → 选错弹一段"为什么"文字。空间只是通往题目的路。

后来的判断

让空间本身变成知识：覆盖半径要真的走出来，圈外接不进设备；让反馈交给世界：掉线、电量见底、被截获，而不是红叉加说明。

② "赛跑"这个隐喻，和本课结论是反的

这是最该认的一处偏差。竞速的视觉语言天然在说"谁快谁赢"，可这节课要教的恰恰是"没有最好，只有最合适"——智能水表的正确答案 NB-IoT，偏偏是四个里最慢的那个。画面越漂亮，越可能把学生带向"速率＝好"。视觉语言会偷偷替你讲结论，而且学生更信画面。

还有一层：每站硬塞一个失败项，学生多半是先猜到答案，再看错误项怎么死——这是验证，不是探究。每站多点几下、再等五秒动画，九站下来全是操作税，挤的正是思考时间。

DECISION 02把"对比"交还给学生

当时的做法

系统自动配"一个正确 + 一个陪跑"，双包赛跑是每题必经流程，跑完才准作答。

后来的判断

标题从"双包赛跑"改成"看看它能不能送达"，默认只派当前探针 1 名；想比较"为什么另一个不行"，由学生自己再加一张。可反复跑、可跳过、不扣分。

③ 第一人称精确转头：成本最高、收益最低

学生反馈"鼠标转头有延迟、不灵敏"。查代码发现不是灵敏度问题，是模型选错了：原来做的是"鼠标离画面中心多远 → 持续匀速转向"，上面还叠了一层指数平滑，软件渲染约 20fps 时视角每帧才更新一次，鼠标撞到屏幕边缘还会卡住。调参数救不了，得换成相对位移当帧直接映射。

但更值得问的是另一个问题：精确转头对"数据传输方式"这个知识点几乎零贡献，却要付找路、晕 3D、手感调校、性能开销四笔成本。我最初提的三个偏好里，第一人称恰恰是性价比最低的一环。

DECISION 03保留 3D 观感，降低操作精度要求

当时的做法

鼠标位置驱动匀速转向 + 缓动；弹窗不释放锁定，鼠标被锁住点不到选项。

后来的判断

点击画面锁定、移动量当帧转成视角、去掉平滑；键盘 ← → 与拖拽兜底，一体机触摸也能用；弹任务卡与结算自动释放锁定。

还有一个"要不要做"的判断：配图。本地素材是剪纸刺绣，和本课无关；网络图片在离线机房不可靠，风格也难统一。最后四张协议卡全部用内联 SVG 情境示意——同一套夜色线条、投影清晰、零版权风险，还顺手保住了"单文件"这条底线。

04

制作心得

七条做完之后才敢写下来的话，多半和"技术"无关。

先问"这个形式承担了什么知识"，再问"好不好看"。

3D、光轨、玻璃拟态都是手段。如果抽掉它们学习效果不变，那就只是包装。判断标准很简单：这个机制有没有让某个抽象维度变得可感知？

反馈尽量交给世界，不要交给文字。

看到电池条在"第 3 年"见底，比读三行"功耗较高"管用得多。让后果自己发生，学生记住的是"这个方案在现实里会怎样坏掉"，而不是答案本身。

做隐喻之前，先核对它和教学目标是否同向。

"赛跑"讲输赢，"没有最好只有最合适"讲取舍，两者是反的。越漂亮的画面，越会把错误的结论讲得理直气壮。

把"对比"留成学生的选项，不要做成必经流程。

系统安排好的探究是演出来的。真正的探究发生在学生自己想知道"换一个会怎样"的那一刻——所以入口要轻、要能反复、要允许跳过。

机房优先，是一组很具体的约束。

单文件零外链、双击即开、误刷新不丢进度；正文不小于 16px、深色底上的浅色文字复用前单独校色；1024×768 必须复测，低配机保留降档。美学要让位于"最后一排看得清"。

性能要实测，瓶颈常常不在你以为的地方。

软件渲染下 V1 基线 44ms / 帧，V2 加了覆盖场与四条光轨也只到 51ms——新机制并不贵。而画面发糊的真正原因是 64px 纹理被拉伸，不是画布分辨率不够；我一开始在画布上多花了一轮功夫。

每次改动另存一个 V 号，绝不覆盖旧版。

V1 到 V4 四个文件并存，才有了这篇文章里清楚的决策链，也给教研材料留下了可追溯的前后对比。版本不是备份，是思考的记录。

05

课堂怎么用

一节课 40–45 分钟里，它只占中间一段，不抢讲评的位置。

关于配图的一句说明：四张协议卡用的是内联 SVG 情境示意，不是实物照片。若手上有路由器、基站、智能水表的真实照片，可直接替换内嵌，风格会更贴近真实设备，同时仍保持单文件零外链。