蝙蝠爱虫子（BatLovesBugs）——iOS 休闲小游戏

The House 是一个以「房间」为舞台的网页点击式冒险小游戏，作者 Artur Kot 在 README 中把它明确标注为自己人生中的第一款游戏，也是在几乎没有 JavaScript 基础的情况下边学边做完成的练手项目。作品体量刻意做得很小，作者自己提醒读者「流程非常、非常短」，因此它更像是一个可运行、可阅读的完整小样，而不是内容厚实的商业作品。玩法上属于经典的 point-and-click 冒险：玩家操控主角在房屋内不同房间之间走动，点击场景中的桌子、窗户、门、电话等物件与之交互，通过收集和使用道具、与 NPC 对话、触发过场段落，把极短的一条故事线推进下去。作者给出了在线试玩地址 the-house.arturkot.pl，读者可以直接在浏览器里体验，再回到源码对照阅读。

项目的画面并不是 canvas 或 WebGL 绘制的，而是把每个房间当作一段结构化的 HTML 标记来处理：标记里定义桌子、窗户之类的物件以及它们对应的可点击区域，层级与位置由样式决定；CSS（源码使用 Less 预处理）负责把这些元素呈现成有氛围感的室内场景；JavaScript 承担剩下的全部工作，包括 DOM 动画、交互判定以及游戏进度的保存。这种「用网页排版来做冒险游戏场景」的路线，与作者此前做网站开发与设计的经验直接相关，他在 README 里也解释了为什么选择 HTML 作为起点。值得注意的是主角在房间内的移动并非瞬移式点击，room 脚本中接入了 Andrea Giammarchi 提供的 A*（A-Star）寻路函数，让角色沿网格路径走向目标点位，这也是这个练手作品里少数带有算法成分的部分。

源码的组织方式对阅读者相当友好：作者按职责把逻辑拆成一组独立脚本并在 README 中逐条说明。audio.js 集中定义全部音效与声音资源；data.js 负责游戏状态与存档；dialogue_box.js 管理各类弹出对话框；game.js 位于所有脚本之上，调用其他模块生成整个游戏；items.js 管理玩家拾取与持有的道具；npcs.js 处理非玩家角色；room.js 生成房间并处理主角与场景世界的交互；scenes.js 存放过场演出；settings.js 放置游戏设置（作者坦言当时主要用于重置存档）；text_cloud.js 绘制主角的对话气泡；tooltip.js 实现悬停提示；utility.js 是一个「超级简单的小工具」，用来定义网格上的点击热区；view.js 生成从窗户望出去的室外画面；old_browser.js 则在检测到不支持的浏览器时触发提示。这套分工对初学者理解「一个小游戏可以怎样切模块」很有参考价值。

核心特性

技术栈带有鲜明的 jQuery 时代特征。README 明确写出游戏重度依赖 jQuery，并列出配套使用的一系列插件与库：jQuery UI、由 Rico Sta. Cruz 提供的 jQuery Transit（用于补间动画）、Edwin Martin 的 jQuery Colors（颜色动画）、filament group 的预加载 CSS 图片方案、Artlogic 的 Spritely（精灵图动画）、schillmania 的 SoundManager 2（音频播放）、Andris Reinman 的 jStorage（本地存储，用于存档），以及 Modernizr 做特性检测。也就是说，动画、音频、存储、特性识别几乎都站在第三方库的肩膀上，项目自身更偏「用脚本把场景、物品、对话和演出编排起来」。这套组合在现代前端里大多有原生替代方案（Web Animations、CSS transition、Audio 元素、localStorage 等），阅读时不妨把它当成一次前后端技术演进的对照练习。

资源来源与授权是这个项目值得专门说明的一点。代码部分使用 MIT 许可证，允许自由使用、复制、修改与再分发；但美术素材另行采用 Creative Commons Attribution 3.0 授权，音频则全部来自 Freesound.org，README 里给出了完整清单，包括 ERH 的 Distant Shot 与 Swell Pad、Glaneur de sons 的 Electric Wooshes、patchen 与 suonho 的 Sad Pattern Drone、DJ Chronos 的 Horror Drone 001、FreqMan 的 Creepy Phone、troutstrangler 的 Adrift On A Glassy Sea loop、adegenerate 的 18 Close Door、fresco 的 Open and Close Wooden Door、Timbre 的 Buzzer Variants 等等；图形方面使用了 Christian Rambow 的 Bust Basemesh 以及 CG Textures 的贴图。这意味着如果你打算把项目用于二次分发或商业场景，必须分别处理代码与素材两套授权，尤其是署名要求不能被省略，这是一个容易被忽略却必须遵守的细节。

在运行与部署方面，README 提供的信息比较朴素：它是一个静态网页项目，给出的是在线试玩链接，没有描述打包工具、依赖安装命令或构建流程。由于样式使用 Less 编写，若要修改外观通常需要自行预编译 Less，具体步骤仓库未作说明，属于需要自行核验的部分。理论上这类纯静态页面可以在任意现代浏览器中打开，但项目中保留了 old_browser.js 这一分支，说明作者在当年仍需要考虑旧浏览器兼容性，读者在现代环境下遇到该提示时需要留意其触发条件。至于移动端触控适配、可访问性支持等，README 未提及，不能假定其已实现。

技术要点

适合从中学到的内容大致分三类。第一是工程组织：一个内容不多的小游戏如何通过命名清晰的小脚本、集中的资源定义与统一的状态存档，把代码拆得可读可改。第二是具体技法的实现思路：以 HTML 元素作为可交互热区的点击式冒险结构、DOM 补间动画驱动的角色与物件表现、气泡文字与提示框的 UI 反馈、基于本地存储的存档，以及用 A* 做网格寻路让角色走动。第三是项目边界与教训：作者毫不掩饰这是处女作、流程极短、当年只是 JS 初学者，读者不必期待完整的谜题设计或关卡深度；同时也要注意这是早期 jQuery 风格的代码库，直接照搬到现代前端项目中可能需要替换动画、音频与存储相关依赖。把它当作「读完就能改」的入门级源码范本，比当作可复用的游戏框架更合适。