巧lq幼儿园中班下学期正好是逻辑思维和观察力训练的关键期，“找影子”这类游戏卡片我做了不止一套，但纸质的用几次就皱、就丢，而且每个班三十多个孩子，老师得准备好几份才能轮流转。后来我干脆把这套练习做成了HTML课件，直接投到希沃白板上用，触屏点一点、拖一拖就能玩，效果比预想好不少。这篇就说说我怎么做这套“找影子01”课件的，从页面结构到拖拽判定逻辑，再到怎么在希沃白板里稳定跑起来，适合想自己动手做课堂小游戏的老师参考。
做这套课件之前我给自己定的要求很明确：课件以HTML + 原生JavaScript实现，最终运行环境是希沃白板，整个课程场景是幼儿园或小学低年级的课堂互动。目标不是做得多花哨，而是够直观、够好点、不会在课堂上出岔子。下面把设计和实现一步步拆开讲。
1. 课件定位与整体设计思路
1.1 “找影子”这个题型背后的认知逻辑
“找影子”不是简单的“看着像就连线”，它对幼儿来说是一个典型的视觉感知与图形匹配任务。孩子看到彩色物体，再看到对应的黑色轮廓，需要在大脑里完成一轮“形状提取”和“轮廓比对”。这个过程锻炼的是图形辨别能力、细节观察力和空间对应感。如果课堂上只是让小朋友在纸上圈一圈，其实缺少了动手验证的环节，互动性也不够。
我把它做成课件后，交互方式变成“观察影子—拿起卡片—放到影子上面验证”。这个动作比拿笔圈画更能调动孩子的参与感。配合上即时反馈——“对了”会打勾并播放小动画，“错了”会轻轻弹回并提示再试，孩子会在一次次尝试中记住物体轮廓之间的差异。这个设计完全是围绕儿童认知节奏来的，不是为技术而技术。
1.2 为什么选HTML而不是希沃自带的课堂活动
希沃白板自带的课堂活动模板确实方便，选个模板填词就行。但我做这套“找影子”时，为什么绕开它自己写HTML？原因有三个。
一是匹配模式不灵活。希沃自带的配对活动更适合“词语配图片”“单词配中文”这类有明确答案的文本型配对，对“彩色图对黑色剪影”这种既要看出轮廓、又需要漂亮视觉呈现的场景，模板的表现力有限。
二是改动成本不一致。自带的课堂活动一旦要换题型逻辑，基本等于重做一遍。而HTML课件是纯文本代码，我在备课时想调题目、换图形、加减难度，只要改一个数组，刷新页面就生效，根本不用重新开发。
三是这套课件不只是在这一个班级用。HTML文件拷到任何能打开浏览器的设备上都能运行，不管是希沃一体机、普通电脑加投影，还是后续想让学生自己在平板上玩，都无障碍。跨设备的自由度是课堂活动模板给不了的。
各方案对比可以看这张表：
| 对比项 | 希沃自带课堂活动 | HTML自研课件 |
|---|---|---|
| 模板灵活度 | 受限于内置题型 | 完全自定义 |
| 题目修改成本 | 逐个编辑 | 改数据数组即可 |
| 跨设备能力 | 依赖希沃账号体系 | 任意浏览器即可打开 |
| 视觉表现力 | 中规中矩 | 可自由设计 |
| 备课上手门槛 | 低 | 需要一点代码基础 |
1.3 页面布局与交互模式的规划
“找影子01”是第一课，整体难度设置为基础匹配，总共设计了6组物体，同一屏全部展示。页面采用左右分栏结构：左侧是一列黑色影子，右侧是彩色物体卡片，卡片顺序做了打乱处理。孩子们需要把右侧的彩色图拖到左侧对应的黑色轮廓上，匹配成功时卡片吸附到影子上，匹配失败则自动弹回原位。
这个布局参考了纸质练习册的分栏习惯，因为孩子对这种“左边是答案区、右边是素材区”的版式已经很熟悉。交互上每张卡片做得够大，间距拉开，避免手小的孩子误触相邻元素。重点是把误操作的可能性降下来。
为了照顾不同习惯的孩子，我还预设了两套操作方式。默认是拖拽式，直接按住彩色卡片拖去影子区域松手；同时支持点击式，点一下彩色卡片选中它，再点一下目标影子完成匹配。幼儿手指控制力不够精细，很多孩子拖到一半就松手了，这时候点击式就是很好的兜底方案。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 从零搭建课件页面结构与资源准备
2.1 页面基础结构
HTML的结构我保持得尽量简单。外层用一个容器限定宽高比例，因为希沃白板屏幕比例是16:9，页面就按16:9来定。标题栏放在上方，游戏区占剩余空间。游戏区左侧是影子列表，右侧是卡片区。
html复制<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>找影子01</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<header class="game-header">
<h1>找影子</h1>
<p class="subtitle">把右边的卡片拖到它对应的影子上面</p>
</header>
<main class="game-main">
<div class="shadow-zone" id="shadowZone"></div>
<div class="card-zone" id="cardZone"></div>
</main>
</div>
<script src="game.js"></script>
</body>
</html>
对于不熟悉代码的老师再说一句，这段HTML管理的是“页面上要显示哪些区域”，类似盖房子先搭框架。真正的房间隔断和装修，要交给CSS；负责通电和智能响应的，是后面的JavaScript。三者各司其职，缺一不可。
2.2 游戏中“图形素材”的选择与处理
课题是找影子，影子必须是黑色轮廓。做图案素材时，我用了两种方案结合。第一种是直接用SV