正经网站上会出现小游戏的位置其实很固定：节日活动页、抽奖与刮奖、404 页上的彩蛋、品牌 H5。这几个位置有个共同点——流量几乎全部来自手机，因为它们大多是从社交平台点进来的。
而网页小游戏源码这一类资源，相当一部分是照着桌面写的：方向键、WASD、鼠标悬停、滚轮缩放。这些东西在手机上要么不存在，要么不好用。MDN 对 CSS 的 hover 媒体特性把后半句写成了标准：取值 none 指的是「主要输入方式完全无法悬停，或者无法方便地悬停（例如许多移动设备靠用户长按来模拟悬停，而这并不方便），或者根本不存在主要的指点输入设备」。触屏设备匹配的正是 none。至于方向键，手机上连模拟都谈不上。
所以挑这类源码，第一个要问的不是「好不好玩」，而是「玩家用什么在玩」。下面十八款就按这个排：
只用点（六款）——从 10 秒的活动页互动，到一盘用算法现出题的数独；
要拖要划（四款）——其中一款其实是可以直接改成刮奖卡的组件；
只认键盘（三款）——里面有一款作者推荐用在 404 页，这恰好是个反例；
两种设备都写到了（四款）——对外的活动页从这一组里挑；
桌面专属的重量级那一款——它不适合活动页，但值得单独看。
只用点
这一组的交互全部收敛成「点中某个东西」。点击是触屏和鼠标之间转换成本最低的动作，基本不需要额外适配，嵌进活动页或内容页里最省心。
01. 万圣节戳泡泡：10 秒限时
罐子里飘出带南瓜、幽灵、蝙蝠的透明泡泡，玩家在 10 秒内尽量多点，时间一到剩下的自动爆掉。HTML5 加 JavaScript 和 CSS，没有第三方依赖。10 秒这个长度决定了它的用法：一轮从开始到结束就是十几秒，一个自然的收束点摆在那儿，后面接什么由你定。
02. Emoji 翻牌配对：不用素材图的记忆游戏
牌面全部是 emoji 字符，所以整个游戏没有一张图片要下载，也没有一张图需要处理版权。经典翻牌找相同的玩法，只用 HTML 和 CSS 实现。想换主题，把 emoji 换成你自己的产品图标就行，卡片翻转那部分不用动。
03. HSL 色彩挑战：从一堆相近色块里找出不同的那个
难度靠 HSL 色彩模型来控制：调色相、调饱和度还是调亮度，调多少，直接决定这一关有多难。把难度压缩成三个连续数值的好处是关卡不会用完。设计、印刷、涂料这类天天跟颜色打交道的行业，拿它做官网上的小互动很贴题。
04. 数独：用 DLX 算法现生成题目
界面是干净的数独盘，可选简单或困难模式生成新题，另有一个「使用 DLX 求解」的按钮。DLX 是 Dancing Links，高德纳用来实现 Algorithm X 的那套数据结构，专门解精确覆盖问题——数独正是其中一例。它在这里同时承担出题和验解，所以这一款不依赖预置题库。那个求解按钮对玩家意义不大，但把算法过程摆到台面上，本身就是不错的技术展示素材。
05. 推箱子：把方向键画进页面里
5 关 撤销 / 重置 / 音效开关
方向键被画进了页面，于是手机上也有得按。整个游戏做成一台老式掌机：灰色机身、黑色屏幕，屏幕下方是实体按键样式的方向键和功能键，作者也确实写了「手机电脑都能玩」。顶部显示当前关卡和步数，底部三个功能键是撤销、重置和音效开关。推箱子走错一步就得重来，撤销键不是锦上添花。
06. 纯 CSS 石头剪刀布：一行 JavaScript 都没有
玩家出一个手势，电脑出一个，结果直接显示出来——全靠 :checked 伪类配合相邻兄弟选择器（+）和通用兄弟选择器（~）完成，没有 JavaScript。它的代价写在自己的说明里：一局结束后要刷新页面才能重开。拿它当技术演示、当 404 页上的彩蛋都合适，当活动页里的正经互动环节就别指望了。
要拖、要划
拖动在触屏上是原生动作，反而比鼠标顺手。这一组的注意力要放在别处：拖拽事件有 drag 系和 touch 系两套，作者写没写第二套，直接决定手机上能不能动。下面四款里只有第一款明确写了触屏，其余三款上线前得自己在手机上点一遍。
07. 解结：把交错的线理清楚
Canvas 2D + GSAP 10 关 鼠标与触屏都支持 界面已汉化
屏幕上散着由线段相连的圆点，初始状态彼此交错，玩家逐个拖动圆点，直到所有连线互不相交。交叉的线是红色，理清的转绿，顶部实时显示剩余交叉数。10 关，节点从 4 个逐关加到 10 个并加入额外连线；卡住时点提示，系统会算出「最乱」的那个点并给出虚影指引。图形全部是代码实时绘制的，没有任何图片素材，界面也已经汉化，省掉一轮翻译。
08. 刮冰：这一款其实是刮奖组件
Canvas 加 CSS 模拟结霜的玻璃，用鼠标或手指拖动就能刮开冰层，露出下面藏着的画面。它被归在小游戏里，但本质是一个可复用的「擦除揭示」组件：把冰层换成灰色涂层、把插画换成奖品文案，就是刮刮卡；换成商品图，就是新品揭晓。节日贺卡、活动页、儿童互动都能用，是这一批里离商用最近的一款。
09. 纯 CSS 拼图：用 :checked 模拟拖放
无 JavaScript，拖放逻辑同样靠 :checked 伪类和兄弟选择器搭出来，只有放对位置的拼图才会吸附。支持自定义图片和网格尺寸，换张自家产品图就能变成品牌互动。「仅用 CSS 实现拖放」这件事是有边界的：它模拟的是「选中一块、再选中一个位置」，不是跟手的拖拽手感，作者也把它定位成轻量网页游戏与 UI 交互实验。
10. 拖方块填格子：一个诚实的半成品
原生 JS 加 CSS，把方块拖到指定网格，填满即胜利并重置。作者自己在说明里写的是「这款半成品小游戏实现的很简单，可以在此基础上随意发挥想象力」。这句话该当真：它给的是一套能跑的拖放骨架，不是一个做完的游戏。想直接嵌进页面用的别选它，想在现成逻辑上改出自己玩法的，它比从零写省事。
只认键盘的三款
这三款都要求玩家按方向键。放在给同行看的技术页面上正合适，放进面向普通访客的活动页就是事故——没有键盘的设备上，它们是一张静止的画面。
11. 纯 CSS 马里奥吃金币
不用一行 JavaScript，靠 :focus-within 配合动画，用键盘方向键操控角色移动吃金币。作者自己的定位是技术演示与创意实验，这个定位是准确的——它的看点是「CSS 居然能接住键盘」，而不是这个游戏本身好不好玩。
12. 复选框贪吃蛇：蛇身是一排 checkbox
把普通的复选框变成像素格子，勾选状态就是蛇身，点击开始，方向键或 WASD 控制行进。CSS、HTML 加一点 JavaScript，总代码量 5K——这个体量意味着你可以把它整段塞进页面，不用为它单独规划资源。它的趣味有一半来自「原来复选框还能这么用」，另一半才是游戏本身。
13. 像素马沙漠跑酷：作者推荐它做 404 彩蛋，这恰好是个反例
HTML5 Canvas 箭头键 + 空格 CRT 扫描线
8-Bit 视觉，画布实时渲染像素马和仙人掌，配 CRT 扫描线，黑白调性的怀旧氛围做得很足，操作只有箭头键和空格。作者给它的推荐位是 404 页面的趣味补偿、品牌营销页的解压彩蛋——而这两个位置恰恰是手机流量最集中的地方。用它可以，但得先补一套触屏操作，或者干脆只在桌面端加载。这是本文那条规则最具体的一个例子：好素材和放错位置，是两件可以同时发生的事。
两种设备都写到了
接下来四款的作者把手机这件事真正当回事：要么明写了双操作模式，要么干脆按竖屏优先来设计。对外的页面从这一组里挑。
14. 鸭子闯迷宫：54 关，总大小不超过 30K
54 个关卡 小于 30K 键盘 + 点击按钮双操作
通过注水让小鸭子上浮，或者旋转箱子改变它的位置，最终送进目标方格。关卡越往后障碍越多、水位线也会变，54 关想通关并不容易。技术上只有 JavaScript 加 CSS，不引任何第三方插件，总大小不超过 30K，却装了 54 个关卡。它的操作方式是本组的范本：既支持键盘上下左右，也支持鼠标点击页面上的控制按钮，所以电脑、手机、平板都能玩。
15. 8 位像素网球：竖版优先，滑动与方向键双模式
竖版移动端优先 移动滑动 + 桌面方向键
还原 NES 时代的像素质感，配扫描线滤镜和芯片音乐，计分用的是完整的网球专业规则，也就是 15–30–40 那一套，不是简单累加。它的设计顺序和其他款相反：先定竖屏，再补桌面。走位自动完成，玩家只管击球时机和方向，所以在手机上单手就能玩。H5 互动营销要找现成素材，这一款的完成度最高。
16. 霓虹桌上冰球：Canvas 2D 自己算物理
Canvas 2D 鼠标与触控全兼容 CPU AI 对战
矢量碰撞、粒子火花、慢动作绝杀、击中震屏，观感接近街机。它没有引物理引擎，而是用轻量的 Canvas 2D 绘图加自定义向量计算跑出高帧率。作者点出这一行最怕的两件事是操控有延迟感和碰撞逻辑穿模；而当碰撞体简单到只有两个圆和四面墙时，自己写向量计算反而更可控，也少掉一份依赖。
17. 1KB 的 3D 跑酷：1019 字节，没有任何 3D 库
1019 字节 鼠标 + 键盘 + 触屏 无图片素材
控制一颗小球在悬空跑道上前进，鼠标左右挪、点一下跳，掉下去重开；跑道边跑边随机生成，越往后越窄越快。整个 3D 透视、跑道生成、小球影子和星空全是纯数学算出来再画上去的，最终代码 1019 字节，没有调用任何 3D 库，也没有一张图片素材。更难得的是三套输入都支持：鼠标、键盘（AD 移动、空格跳、R 重开）和触屏。同样的 3D 观感，引库的做法要重多少，对着Three.js 与 WebGL 网页 3D 特效那篇看一眼就有数了。
最后一款：桌面专属，但值得单独看
18. 3D 植物商店：完整闭环的经营游戏
React Three Fiber + Three.js 13 种植物 本地自动存档
去集市买种子、种进温室花盆、按时浇水、成熟卖出，玩法是个完整闭环。操作是鼠标拖拽环绕温室、滚轮缩放、点击花盆完成种植浇水与出售，空格暂停，1/2/3 切换速度——拖拽环绕和滚轮缩放这两样，正是触屏上最难原样复刻的动作，所以它单独成组。13 种植物在种子成本、成熟时长、耗水速度和售价之间各有取舍：芦荟近两分钟才要补水，兰花利润最高却二十多秒就干，这套数值本身就是一份现成的经营平衡设计。花盆、温室玻璃、植株和水花都是实时三维建模与动画，进度自动存在本地。
它的技术栈是 React Three Fiber 加 Three.js，不是复制一个 HTML 文件就能用的东西，要按前端工程来接。但反过来说，它证明了浏览器里能装下的东西比多数人以为的多——从第 06 款那个刷新才能重开的纯 CSS 猜拳，到这一款带存档的 3D 经营游戏，中间只隔着十六款源码。
以上十八款可以在童哲网前端特效里直接预览试玩。不带游戏性质、直接解决问题的那一类嵌入式功能，看能直接嵌进网站的在线小工具；想把互动放在错误页上当彩蛋，创意 404 / 403 错误页模板那篇里有现成的壳子。
