🎮 安全防护新手村・探险
用「玩」的，把安全防护学起来。 村庄原本由五道安全防线守护，如今防线崩塌、世界褪色入夜。你的任务：走出村庄，寻回散落荒野的五座「安全遗迹」，打败守关怪物、逐一点亮防线，让新手村重新明亮；而每一道防线，都对应「安全防护新手村」网站上一整套可实际操作的安全教材。而点亮五道防线并不是终点——世界会就此翻成白天，村外浮现一座座可以反复练功的支线小站，等你来玩。
免安装、打开即玩
用浏览器直接玩，不必下载、不必注册。电脑、手机、平板都可以，加载后即使离线也能继续探索。界面支持正體中文／简体中文／English，会依你的设备语言自动切换。
📣 7/20 实体论坛・免费报名中
玩完游戏，想跟真人聊聊安全、把防线练得更扎实吗？开放文化基金会将在台北举办免费实体论坛 「公民社会的数字防线：共同面对数字威胁」，发表两份公民团体数字安全研究报告，并邀请安全研究者、实务工作者与政策专家对谈，一起守护公民社会的数字韧性。
- 📅 2026/7/20（一）14:30–17:10（14:00 开始报到）
- 📍 BEONE VISION SPACE 会议中心（台北市信义区基隆路一段 200 号 B1）
- 💵 免费入场，需事先报名
游戏画面
你会学到什么
游戏带你入门，完整、可逐步操作的内容都在「安全防护新手村」网站：
🎡 游戏里藏了多少东西
这不只是一条「闯关到底」的线。走进新手村，你可以——
- 🗺️ 寻迹点灯：走出村庄，在荒野找回五座安全遗迹，各由一只守关怪物看守；用课程里学到的观念答题回击，逐一点亮五道防线。
- 🧠 情境互动题：战斗不只是选择题——还会遇到钓鱼邮件辨识、真假网址识破、即时密码强度、深伪来电查证，像真的碰上一样做判断、看解说。
- 🌅 白天世界：五道防线齐备，世界从黑夜翻成白天——花海绽放、彩虹与热气球升空、帆船巡海、生态苏醒，村庄重见天光。
- 🎣 湖畔钓鱼信：站上码头把一封封信件钓上来，判断是钓鱼信还是正常信，练出对可疑邮件的直觉。
- 💎 收集与成就：拾取散落的日之碎片（每枚一句带得走的安全提示）、到观景点拍照收进摄影集，解锁一整面成就徽章墙。
- 📚 档案室：翻阅三份真实的数字威胁研究报告与安全陪伴计划成果。
- 🕵️ 自由探索：想直接逛白天？网址加上
?explore=1，或在开场点「☀️ 白天自由探索」，跳过闯关直接玩。 - 🗡️ 隐藏彩蛋：世界尽头藏着一款独立的 2D 小游戏「挥刀求生」，等你发现。
🛠️ 天亮后的五座「支线练习站」
白天，村外会浮现五座小站，把最实用的安全技能抽出来单独练到熟——边玩边把好习惯练成反射动作，各对一枚成就徽章：
怎么玩
- 移动：电脑用键盘
WASD或方向键；手机、平板用画面上的触控摇杆。 - 探索：走出村庄，循着小地图（会随镜头转向旋转）寻找散落各处的安全遗迹与地标。
- 闯关：走近遗迹与守关者互动，运用课程里学到的观念通过挑战，逐一点亮五道防线。
- 完成：五道防线全部修复，新手村就会重新明亮，别忘了把成果分享出去。
- 练功：天亮后，村外的五座支线练习站可以把密码、网址、两步验证、备份、防深伪单独反复练熟，各拿一枚成就徽章。
- 想直接玩白天：在网址加上
?explore=1，或在开场画面点「☀️ 白天自由探索」，即可跳过闯关、直接在白天世界探索。
可以在什么设备上玩？
这是一款在浏览器里实时运算的 3D 游戏，对设备几乎没有特殊要求：
- 浏览器：支持 WebGL2 与 ES modules 的现代浏览器即可：Chrome／Edge 89+、Firefox 108+、Safari 16.4+（iPhone／iPad 需 iOS／iPadOS 16.4 以上）。大致就是「近三年更新过的浏览器」。
- 电脑、手机、平板都行：桌机用键盘＋鼠标，手机与平板会自动显示触控摇杆。
- 网络：只有第一次加载需要联网（约 4 MB，含 Three.js 库与贴图）；加载后即使离线也能继续探索。
- 性能：普通集成显卡就跑得动。较旧或较慢的设备，可在开始画面把画质切到「精简」；画质分为自动／精简／精致三档，默认会依设备自动调整。
- 不需要：安装、注册或登录，也不会在你的设备留下个人资料。
适合谁
- 公民团体（CSO）/ NGO：当作安全培训的暖场破冰，或结训后的「回家闯关」作业。
- 个人：没有安全背景也能上手，边玩边建立基本防护观念。
- 想推广安全的人：免费、开源授权（CC‑BY 4.0），欢迎在课程、社团、活动中自由使用。
🛠️ 这款游戏是怎么做出来的（给想自己做的人）
整个世界都在浏览器里用 Three.js 实时运算，没有游戏引擎、没有打包工具、不连任何外部 CDN。如果你也想做一个类似的小游戏，这些是我们觉得值得分享的关键做法：
- 不用 build、打开文件就能跑：用浏览器原生的 ES modules ＋ import map 直接加载 Three.js（r184，整份自存在站上的
vendor/）。整个项目就是一份 HTML 加几个.js，不需要 webpack／vite 之类的打包工具。 - 大量植被用 InstancedMesh：上千棵树、草丛、石头若各画一次会拖垮性能；用
InstancedMesh让同一种物件「一次 draw call」画完，是维持流畅的关键。 - WebGPU 我们认真试过：另外做了一个 WebGPU 试作评估页，会自动选用 WebGPU、不支持就退回 WebGL2，并实时显示使用中后端、FPS 与 draw call。结论是：游戏已用 InstancedMesh 把 draw call 压得很低，实际负载下 WebGL2 就能稳定跑满屏幕刷新率，要把压力等级拉到远超游戏所需，才看得出 WebGPU 的差距。加上 WebGL2 在手机与各家浏览器（特别是 iOS／Safari）支持更普及，所以正式游戏就用 WebGL2 达标，不额外要求 WebGPU。
- 地形用函数算、不用图片：地面起伏由一个高度函数实时计算，再用顶点颜色画出沙地／草地／岩石，省下一张 heightmap 贴图。
- 水面的柔边：海岸用一张预烤的「离岸距离」贴图，让水的透明度渐变淡出，避免地面与水面交界处闪烁（z-fighting）。
- 一个参数控制日夜：用单一个「繁荣度」数值（0 夜晚 → 1 白天）同时驱动光照、色调、群山起伏、小地图与界面配色；改一个值，整个世界就跟着变。
- 后期让画面更耐看：用
EffectComposer串接 Bloom（让水晶与光束发光）、色彩分级与抗锯齿，并依设备性能自动开关。 - 3D 场景里的文字：遗迹名牌、NPC 对话气泡用
CSS2DRenderer，直接拿 HTML／CSS 当作 3D 世界中的标签；小地图则是另一块 2D canvas，会随镜头转向旋转。 - 角色动画不靠骨架：主角的走路、跳跃、二段跳转身，是用程序实时旋转四肢关节做出来的，没有导入骨架动画文件，文件小又好控制。
- 存档就用 localStorage：探索与闯关进度存在浏览器本地，关掉再打开还在，也不需要后端服务器。
- 顾及手机：用设备像素比上限（pixel-ratio clamp）＋画质分档，避免在高分辨率屏幕上把填充率（fill-rate）吃爆。
- 彩蛋是独立的 2D 小游戏：「挥刀求生」是一块独立的 2D canvas，与 3D 主世界完全解耦，互不影响性能。
整个游戏全程离线、无外部依赖，并以 CC‑BY 4.0 开源，源代码在 GitHub，欢迎拆开来看，照着做出你自己的版本。
关于这款游戏
由财团法人开放文化基金会（OCF）制作，是「安全防护新手村」教材网站的延伸实验。整个世界以 Three.js 在浏览器实时运算，全程离线、无外部依赖，源代码随网站一同开源于 GitHub。