阿珏Blog十周年活動已經圓滿結束了。
今年參加的人比我預想中還要多，活動期間經常能看到大家在群裡討論線索、交換提示，也有不少人一路順利通關，拿到了最後的獎勵。看到自己折腾了這麼久(2年前就開始策劃)的東西真的有人認真玩完，還是挺開心的，雖然過程有ai的輔助。
如果你還沒有玩過，建議先去看看活動原文 ，這篇會直接公開全部答案，下面就是完整劇透，遊戲過程中會有許多颠覆你認知的知识內容。
先說一下整體流程
拆彈專家 → 點擊入口 → 調整黑圖 → 登錄與驗證碼 → 假 Cloudflare 頁面 → PDF 藏 ZIP → GalGame對話找線索 → 猜數字 → 扫描二維碼 → 找不同 → 明暗模式畫冊 → 拼圖 → 保险箱。
第 0 閘：拆彈專家
第一關實際上是一個小小的前奏。頁面上有四根不同顏色的線和一個倒計時，看起來像是要認真判斷哪一根能拆掉炸彈。
但這裡沒有正確答案，剪哪一根都會爆。爆炸以後，頁面會提示珍藏圖冊已經被炸成碎片，同時收集碎片。
接下來要做的事情也就很明確了：引出支線任務，把散落在後面關卡裡的拼圖碎片找回來。
所以這裡不用在四根線上浪費時間，直接剪一根看爆炸效果就行。
第 1 間：活動歡迎入口
正式進入活動入口頁，畫面中間的“立即參與”按鈕並不是普通的跳轉按鈕，而是通過圖片熱點區域實現的。看到圖片上的手形光標，直接點擊對應位置，就會進入下一關。這一關考驗的是觀察力，也順便用了一下 HTML 圖片熱點區域這種比較老但依然好用的功能。
點擊之後頁面會先變黑，再跳到一個看起來像是加載卡住的頁面。這個黑屏不是加載失敗，耐心看一會兒就能发现问题。
第 1.5 間：黑屏加載中
頁面看起來幾乎是一片黑。這裡沒有必要查看複雜的源代碼，直接把頁面截圖放進圖片編輯器，調整曝光、陰影和對比度就可以了。目的也很直接，就是考驗大家處理圖片、調整曝光和觀察低對比度信息的能力。
調亮之後能看到兩個重要信息：
- 邀請碼：
blog10years - 下一關：
/level/googleLogin/login.html
第 2 間：登錄頁
登錄頁需要用戶名、密碼和邀請碼。用戶名可以自己填，邀請碼就是上一關找到的 blog10years。
真正麻煩的是密碼。打開開發者工具，在 Console裡可以看到頁面已經定義好的 buildLoginHash 函數。直接調用它即可：
buildLoginHash("阿珏", "blog10years")
如果用戶名換成了別的內容，就把函數裡的用戶名一起換掉。複製函數返回的 HMAC-SHA256 字符串作為密碼，不需要自己手動計算。
登錄前還要完成驗證碼。選擇正確後才能真正登錄。
這一關主要考驗的是看源代碼和使用開發者工具的習慣。密碼雖然看起來像是一長串加密文本，但頁面已經把生成方法放在眼前了。
ps:阿珏醬使用過的頭像已經在這幾年中被多次透露過.
這裡順便埋了一個後面會用到的動態線索：登錄時頁面會生成瀏覽器指紋，並從其中保存兩位數字。它不會直接顯示成答案，但會參與最後的保险箱密碼。
ps:後期簡化後直接隨著URL跳轉
第 2.5 間：假的 Cloudflare 錯誤頁
登錄成功後會進入一個很像是 Cloudflare 的 500 錯誤頁面。很多人看到錯誤頁就關掉了，其實頁面裡唯一的 Host �鏈接就是下一条線索。
把鼠標移到 Host，或者直接查看源代碼，可以看到它實際指向：
https://AGX.MoeJue.cn/level/pdf/阿珏酱Blog十周年研究報告.pdf
這個頁面本身沒有壞，只是故意套了一層錯誤頁面的外觀。
第 3 間之前：PDF 藏 ZIP
這個文件實際上是一個正常 PDF 後面拼接了一個 ZIP 压縮包，所以它既能被 PDF 閱讀器打開，也能被解壓軟件識別。這一關考驗的是對文件格式和壓縮包的基本了解，也算是一次很輕量的文件取证。
用 7-Zip、WinRAR 或系統的解壓工具嘗試打開 PDF，就能看到後面的隱藏文件。
壓縮包裡有幾張拼圖碎片，還有一個 URL 快捷方式。打開這個 .url 文件，裡面的地址是：
https://agx.moejue.cn/level/three/start.html
這就是第三關的入口。PDF裡的研究報告本身也是故意寫得一本正經又不太正經，裡面已經給了“這個 PDF 如果你不懷疑它，它就是真的 PDF”這樣的提示。
第 3 間：GalGame
年齡確認只是進入不同的劇情和貼圖，真正重要的是後面的對話內容。這一關的對話比較長，裡面混了很多看起來沒有用的日常閒聊，所以很容易點着點着就開始跳過。
建議把對話完整看完，裡面至少有這些明確提示：
- 提到
md5和兩張看起來不一樣的照片，對應後面的找不同關卡。 - 提到“純白加純黑做出来的透明圖片”，對應明暗模式關卡。
- 提到左右掃描照片，對應二維碼關卡。
- 提到六位數的保险柜，對應最後的密碼組合。
把線索藏在大量日常對話裡，主要是想考驗大家的耐心和信息提取能力。不是每一句話都有用，但真正有用的幾句，基本都會在後面的關卡裡兑现。
ps:劇情裡的373520是誘餌
第 3.1 間：支線遊戲:猜數字
支線小遊戲會在 1 到 99 之間隨機生成一個數字，頁面中的下拉選項還會在操作後重新打亂，故意讓選擇過程有點煩人。
這裡沒有固定答案，只能根據“太大了”或“太小了”的提示慢慢猜。猜中之後，這個數字會被保存下來，作為最終密碼的一部分。
第 4 間：神奇的双重二維碼
來到二維碼頁面後，用手機或者電腦上的二維碼工具掃描就行。
但是關鍵就在這裡，這是一個藏着兩個結果的二維碼。
需要你了解二維碼的算法，從不同的方向開始掃描二維碼會得到不一樣的結果
掃描結果會給出下一關地址和一個密碼。頁面兩側飄着的圖片是需要收集拼圖碎片。
第 5 間：兩張圖實際上都是高坂桐乃
頁面上是兩張不同風格的高坂桐乃圖片，題目問的是兩張圖的共同點。答案其實就是同一個角色：高坂桐乃。這裡表面上是認角色，實際提交的是 MD5 值(沒想到md5也可以重複吧)。
第 6 間：畫冊、明暗模式和 Cookie
這一關表面上是一個可以翻頁的漫畫畫冊，左右角的裝飾還會隨著明暗模式變化。重點不是把漫畫看完，而是注意頁面提示，把瀏覽器的深色模式和淺色模式切換一下。
得到一個字謎：「我不住在伺服器，也不住在你心里。」「你關掉我之前，我一直陪着你。」
然後打開開發者工具的 Application 或 Storage，查看當前站點的 Cookies。裡面會出現：
url=puzzles
把它拼成成下一關的路径：
/level/puzzles/index.html
第 7 間：把一路撿到的碎片拼起來
拼圖頁面要求選擇本地碎片文件夹，把前面關卡裡拿到的碎片收齊，選擇文件夹後拖動到中間網格即可。
這一步不只是前端看起來拼對了就算完成，頁面還會計算每個圖片文件的 SHA-256，再交給伺服器驗證順序，所以隨便拿一張相似圖片替代是過不了的。
拼圖成功後才會進入最後的保险箱。
最後一關：保险箱
最後的密碼不是一個所有人都一樣的固定答案，而是一路根據當前會話動態拼出來的。這樣設計是為了避免大家直接複製一份固定答案，也讓前面幾個關卡收集到的線索真正串起來：
登錄階段保存的兩位動態 + 猜數字答案 + 69
登錄時保存的兩位數字來自瀏覽器指紋，猜數字關卡的答案是隨機生成的，最後的 69 則是二維碼中的。
保险箱打開後，點擊裡面的紙團，就會進入最終的感謝頁面(很貼心的使用了你登錄的用戶名)並生成優惠券碼。
好了，拿着你的兌換碼去兌換屬於你的福袋吧
寫在最後
這次活動的關卡並沒有刻意往特別專業的密碼學方向做，更多是把我平时瀏覽網頁時會遇到的需稀奇古怪的东西拿來當道具。
單看每一關都不算難，但它們串在一起以後，玩家需要不斷換思路。前一關還在調圖片，下一關就要看控制台，再下一關又要去解壓 PDF，最後還得記得把一路收集的碎片保存下來。
代碼和素材也已經公開，歡迎拿來學習、改造，或者做成你自己的網頁解密遊戲：
iAJue/MoeJueBlogAnniversaryGames
項目使用 HTML、CSS、原生 JavaScript 和 PHP 實現，沒有使用大型框架。想看某一關具體是怎麼做的，直接翻源代碼比看這篇文章更清楚。