🎮 資安防護新手村・探險
用「玩」的，把資安防護學起來。 村莊原本由五道資安防線守護，如今防線崩塌、世界褪色入夜。你的任務：走出村莊，尋回散落荒野的五座「資安遺跡」，打敗守關怪物、逐一點亮防線，讓新手村重新明亮；而每一道防線，都對應「資安新手村」網站上一整套可實際操作的資安教材。而點亮五道防線並不是終點——世界會就此翻成白天，村外浮現一座座可以反覆練功的支線小站，等你來玩。
免安裝、開啟即玩
用瀏覽器直接玩，不必下載、不必註冊。電腦、手機、平板都可以，載入後即使離線也能繼續探索。介面支援正體中文／简体中文／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。