把HTML小游戏搬上希沃白板：找影子互动课件完整制作实录

最近在整理交互课件素材库，翻到这套编号“白板类-02-01”的课件时，我盯着文件名看了几秒——2026年3月26日做的“找影子01”，形态是html页面，运行场景写的是“希沃白板”。这个组合对很多老师来说可能有点陌生，但其实拆开看就是两件事：用html写一个小游戏，再放到教室的希沃触控大屏上让孩子玩。它解决的是一个很实在的问题：幼儿园和低年级孩子做影子配对练习时，不再需要用纸卡一张张摆，也不用老师在PPT里点来点去帮孩子翻页。孩子自己用手指在屏幕上点选，页面马上会用颜色、音效和动画给出反馈，像玩游戏一样就把观察力练了。这篇就把我制作、调试、现场使用这套课件的完整过程写出来，包括踩过的坑和可以直接复制的html源码。

1. “找影子01”到底是什么课

1.1 先说玩法：为什么孩子愿意反复点

这个游戏的核心交互非常简单，屏幕中央出现一只彩色的小动物，比如小猫，右侧或下方同时出现3个影子按钮，其中只有一个是这只小猫的影子轮廓。孩子需要观察彩色图的外形，再在几个黑色剪影里找出对应的一项，用手指点一下。点对了，页面播放一声轻快的提示音，按钮出现正确反馈，然后自动跳到下一题；点错了，按钮会轻轻抖一下，提示孩子再想一想，但不会直接跳到下一题，也不会扣分。

这个设计天然适合幼儿园中班到大班，也适合一年级刚接触“光和影子”概念的孩子。和传统纸质教具相比，它最大的优势是即时反馈。纸质卡片孩子答完，必须等老师确认，一对一场景还好，全班集体活动时后排孩子根本看不清，注意力很快就散了。而大屏页面上的反馈是即时的、视觉化的、有声音的，点一次就得到一次回应，这种“操作-反馈”的闭环是孩子愿意反复玩的核心原因。

很多老师第一反应是：这不就是用希沃白板自带课堂活动也能做吗？确实能做个大概，但希沃自带的模板通常把选项位置、题目格式、背景样式都固定了，想做出“左侧彩色图，右侧三个垂直排列的大影子按钮”这种适合低龄孩子的布局，反而要绕不少弯路。用html写的好处是，每一块位置、每一个大小、每一种反馈都是自己说了算，做完之后打开浏览器就能跑，不用安装任何额外软件。

1.2 这个活动真正在训练孩子的能力

从教育目标角度看，找影子绝对不是简单的“猜一猜”。孩子在完成配对时，其实在做三种认知活动：第一是观察轮廓，彩色小动物身上有颜色、花纹、眼睛、嘴巴这些细节，但影子是纯黑色块，孩子必须忽略颜色和花纹，只抓外形边缘，这属于视觉辨别能力训练；第二是整体与局部的关系理解，同一个动物的正面图轮廓和黑影轮廓看起来不完全一样，孩子需要在脑海里做一次“图形旋转和对应”；第三是规则意识与自控力，要等彩色图看清了再点，而不是随便乱按。

每次只出现3个备选影子，也是有讲究的。选项太少练习密度不够，选项太多孩子容易受干扰。对4岁左右的孩子，3选1是最舒服的难度；等玩熟了，再加到4选1，或者把干扰项换成轮廓非常接近的动物，比如猫和狐狸这种，挑战性自然就上来了。课件文件名里的“01”就是这个系列里最简单的第一版，后续我会在同一套页面上直接升级，不用新建文件。

1.3 日期和编号不是多余的

课件文件名里的“20260326”是制作日期，“白板类-02-01”是我自己的一套资源管理逻辑，“白板类”指适合在教室大屏白板上玩的交互课件，“02”是该大类下的第2个模块，“01”是模块里的第1个文件。这种命名方式第一次看会觉得啰嗦，但半年后回找资源时效率翻倍。我见过很多老师桌面上的文件名是“游戏.html”“最终版1.html”“新建文档(3).html”，过两周自己都不知道哪个能用。

做教学资源的人都有体会，很多看似普通的课件，课后再改一两次就能变成另一个主题。我习惯把同一套html的所有内容放在同一个文件夹里，图片、源码、字体都在一起，后期复制整个文件夹改个编号就能复用，不会出现图片丢失、链接失效这种烂摊子。这个习惯从这节“找影子01”就开始养成了。

2. 设计阶段的两个核心选择

2.1 点击配对和拖拽配对，我为什么选点击

影子类游戏常见的交互方式有两种，一种是孩子把彩色动物图片拖到对应影子上，另一种是像这套课件一样，直接点击影子按钮。拖拽看起来更好玩，但对幼儿园孩子来说其实风险不小。孩子手指头粗，触控一体机上拖拽的判定区域如果不够大，很容易拖到半路就掉，再加上很多一体机的触控驱动和系统白板软件之间会互相抢手势，拖到一半页面可能自己滚动起来，现场体验很糟糕。

点击配对则是把所有误操作的可能性降到最低。孩子只需要判断“是哪一个”，然后手指落下去，这一下就是全部操作。从代码实现角度来说，点击事件也是最不容易出问题的，touch事件、mouse事件、click事件在很多设备上最终都会触发click，但不一定会稳定触发drag事件。对低龄课堂来说，稳定压倒一切，所以即便拖拽效果更炫，我仍然把第一版做成点击配对。

2.2 影子素材是最大的坑，两种做法都要知道

制作这套页面之前，我以为最大的技术难点在代码，实际做下来才发现，最难的是搞定素材。一张普通彩色图片直接放上去不行，因为影子必须是单色轮廓。这里有两种可行的做法。

方案A：准备一套独立的影子PNG图片。先在Photoshop或其他抠图工具里把彩色动物从背景里抠出来，导出透明背景的PNG，再把这个PNG整体填充成黑色，另存一份带“-shadow”后缀的文件。页面上彩色图和影子图分别调用这两个文件。这样做的好处是完全可控，影子轮廓、深浅、大小都能自己调，在任何浏览器里的显示效果都一样。

方案B：用CSS的filter滤镜，直接给同一张透明背景图片加一个filter:brightness(0)，浏览器会把整张图压成纯黑色。这样不需要单独做影子文件，维护起来更省事。但这里有一个非常大的前提：原图必须是已经抠好背景的透明PNG。如果原图带白色背景，filter一压，白底和动物一起变黑，最后屏幕上就是一块黑色方块。对不熟悉抠图的老师来说，方案B容易翻车，所以第一次做建议老老实实准备影子图，成功率高。

另外提醒一句，影子最好用纯黑或者非常深的深灰色，不要用半透明灰。半透明影子一旦盖在浅色背景上，边缘轮廓会变模糊，孩子看起来费劲，也就失去了找影子练习的意义。背景色我用的是浅蓝到浅绿的渐变，这是做过几次对比之后确定的——浅色背景下，纯黑轮廓的边缘识别度最高，孩子一眼就能把视线锁定到影子上。

2.3 为什么选项里不能全是“完全不同”的动物

做题库的时候，有一个细节很容易被忽略：干扰项的相似度。如果一道题的正确答案是小猫，另外两个干扰影子选的是大象和小鸟，轮廓差异极大，孩子不用仔细看就能蒙对。这样的题没有练习价值。比较理想的出题逻辑是，每道题的3个影子在整体大小差不多的情况下，一个正确答案、一个明显不同的干扰项、一个形似的干扰项。比如小猫配小狗和兔子，小猫和小狗的耳朵轮廓差异能促使孩子去真正比较细节。

我这里第一版为了照顾刚开始玩的孩子，暂时没用高相似干扰项，但代码结构里已经把题目和选项做成了独立数组，后续要升级干扰难度，只需要在数组里调整选项路径，不用改任何逻辑代码。这就是html课件相比固定PPT模板最舒服的地方——改一个数据就等于出新课。

2.4 题目数量控制在多少合适

幼儿园课堂上，一节课的专注时间有限，找影子游戏只是完整教学流程中的一环，不是整节课的全部。第一版我设置了4道题，正常孩子大约40秒到1分钟就能完成一轮。题量太小时，刚进入状态就结束，练习量不够；题量太大，后面几个孩子明显开始不耐烦。4到6题是一个比较合适的区间，如果课堂上时间充裕，可以在第一轮结束后点击“再玩一次”，题目顺序会随机重排，孩子还能再玩一轮而不会背下答案顺序。

3. 实操实现：从空白页面到可上课的完整源码

3.1 文件目录与素材命名规范

在正式开始写代码前，先把文件目录建好。我在D盘下建了一个叫“findshadow”的文件夹，里面放一个“images”子文件夹，再放一个“index.html”文件。所有图片资源都放进images，所有代码都写在index.html里。图片命名统一用英文小写加连字符，比如cat.png、cat-shadow.png、dog.png、dog-shadow.png。为什么不用中文名？不是因为中文不能显示，而是部分触控一体机的浏览器在读取带中文或空格的本地路径时会有兼容问题，现场一报错很难排查，直接用英文小写最省心。

目录结构大致是这样：

text复制findshadow/
├─ images/
│  ├─ cat.png
│  ├─ cat-shadow.png
│  ├─ dog.png
│  ├─ dog-shadow.png
│  ├─ duck.png
│  ├─ duck-shadow.png
│  ├─ bird.png
│  ├─ bird-shadow.png
│  ├─ fish.png
│  ├─ fish-shadow.png
│  ├─ rabbit.png
│  └─ rabbit-shadow.png
└─ index.html

如果以后要加更多动物，在images里新增一对同名图片就好，一个是正常彩色图，一个是对应的黑色影子图。

3.2 页面结构怎么搭

页面代码由三部分组成，这也是html课件最基础的三件套：HTML负责页面上有什么元素，CSS负责这些元素长什么样、放在什么位置，JavaScript负责点击之后发生什么。用大白话说，html决定了首页有“大标题”“动物图片”“影子按钮”，css决定了标题大小、按钮颜色、图片间距，javascript决定了孩子点中影子后系统如何判断对错、如何进入下一题。

整体布局采用上下结构：顶部显示题目序号和帮助成功数，中间是当前题目的彩色动物大图，底部横向排开3个影子按钮。按钮设计得很大，单个按钮宽约220像素、高约180像素，图片居中显示。幼儿园孩子的精细动作能力弱，点击区域必须足够大，缩小到鼠标能点的大小完全不够，手指头一按就可能点偏。页面字体也全部加大，至少28像素起，保证教室里后排的孩子能看清关键反馈