[{"data":1,"prerenderedAt":584},["ShallowReactive",2],{"project-detail-zh-picolock":3},{"locale":4,"slug":5,"detailPath":6,"renderMode":7,"category":8,"categories":9,"title":10,"summary":11,"roles":12,"period":17,"status":18,"stack":19,"tags":22,"cover":23,"coverImageLayout":24,"coverAspectRatio":25,"links":26,"highlights":39,"featured":43,"order":44,"ogImage":23,"media":45,"page":122,"blocks":421},"zh","picolock","\u002Fprojects\u002Fpicolock","blocks","game",[8],"PicoLock","一款通过鼠标驱动卡牌交互，引导中学生理解密码学概念的网页解谜游戏。",[13,14,15,16],"programmer","gameplay-design-role","level-design","sound-design","2023.9 ~ 2023.12","completed",[20,21],"unity","webgl",[],"\u002Fproject-media\u002Fpicolock\u002Fcover.png","full","16 \u002F 10",[27,31,35],{"label":28,"url":29,"kind":30},"Itch 试玩","https:\u002F\u002Fpicolock.itch.io\u002Fpicolockgame","store",{"label":32,"url":33,"kind":34},"项目网站","https:\u002F\u002Fprojects.etc.cmu.edu\u002Fpicolock\u002F","live",{"label":36,"url":37,"kind":38},"YouTube 演示","https:\u002F\u002Fyoutu.be\u002Fi9p3cGoeeJQ","video",[40,41,42],"用卡牌把密码学概念拆成可以直接操作的谜题","3 关流程从古典密码推进到 RSA","Unity WebGL 接入 PicoCTF，正式版支持账号存档",false,"30",[46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118],{"id":47,"kind":48,"src":23,"alt":49,"aspectRatio":25},"cover","image","PicoLock cover image",{"id":51,"kind":48,"src":52,"alt":53,"aspectRatio":25},"cover-svg","\u002Fproject-media\u002Fpicolock\u002Fcover.svg","PicoLock cover (vector)",{"id":55,"kind":48,"src":56,"alt":57,"aspectRatio":25},"gallery-01","\u002Fproject-media\u002Fpicolock\u002Fgallery-01.png","PicoLock gameplay screenshot",{"id":59,"kind":48,"src":60,"alt":61,"aspectRatio":25},"gallery-02","\u002Fproject-media\u002Fpicolock\u002Fgallery-02.png","PicoLock puzzle iteration screenshot",{"id":63,"kind":48,"src":64,"alt":65,"aspectRatio":25},"gallery-03","\u002Fproject-media\u002Fpicolock\u002Fgallery-03.png","PicoLock core mechanics screenshot",{"id":67,"kind":48,"src":68,"alt":69,"aspectRatio":25},"gallery-01-svg","\u002Fproject-media\u002Fpicolock\u002Fgallery-01.svg","PicoLock gameplay screenshot (vector)",{"id":71,"kind":48,"src":72,"alt":73,"aspectRatio":25},"gallery-02-svg","\u002Fproject-media\u002Fpicolock\u002Fgallery-02.svg","PicoLock puzzle iteration screenshot (vector)",{"id":75,"kind":48,"src":76,"alt":77,"aspectRatio":25},"gallery-03-svg","\u002Fproject-media\u002Fpicolock\u002Fgallery-03.svg","PicoLock core mechanics screenshot (vector)",{"id":79,"kind":48,"src":80,"alt":81,"aspectRatio":25},"class","\u002Fproject-media\u002Fpicolock\u002Fclass.png","PicoLock class diagram or course context screenshot",{"id":83,"kind":48,"src":84,"alt":85,"aspectRatio":25},"core-mechanic","\u002Fproject-media\u002Fpicolock\u002Fcore-mechanic.png","PicoLock core mechanic overview",{"id":87,"kind":48,"src":88,"alt":89,"aspectRatio":25},"check1","\u002Fproject-media\u002Fpicolock\u002Fcheck1.png","PicoLock screenshot — check 1",{"id":91,"kind":48,"src":92,"alt":93,"aspectRatio":25},"check2","\u002Fproject-media\u002Fpicolock\u002Fcheck2.png","PicoLock screenshot — check 2",{"id":95,"kind":48,"src":96,"alt":97,"aspectRatio":25},"check3","\u002Fproject-media\u002Fpicolock\u002Fcheck3.png","PicoLock screenshot — check 3",{"id":99,"kind":48,"src":100,"alt":101,"aspectRatio":25},"levels-1","\u002Fproject-media\u002Fpicolock\u002FLevels (1).png","PicoLock level flow or layout — part 1",{"id":103,"kind":48,"src":104,"alt":105,"aspectRatio":25},"levels-2","\u002Fproject-media\u002Fpicolock\u002FLevels (2).png","PicoLock level flow or layout — part 2",{"id":107,"kind":48,"src":108,"alt":109,"aspectRatio":25},"modify-inspector","\u002Fproject-media\u002Fpicolock\u002FModifyInspector.png","PicoLock Unity Inspector — modify tool",{"id":111,"kind":48,"src":112,"alt":113,"aspectRatio":25},"rotate-inspector","\u002Fproject-media\u002Fpicolock\u002FRotateInspector.png","PicoLock Unity Inspector — rotate tool",{"id":115,"kind":48,"src":116,"alt":117,"aspectRatio":25},"scale-inspector","\u002Fproject-media\u002Fpicolock\u002FScaleInspector.png","PicoLock Unity Inspector — scale tool",{"id":119,"kind":48,"src":120,"alt":121,"aspectRatio":25},"translate-inspector","\u002Fproject-media\u002Fpicolock\u002FTranslateInspector.png","PicoLock Unity Inspector — translate tool",{"locale":4,"title":10,"summary":11,"roles":123,"period":17,"highlights":124,"links":125,"seo":129,"blocks":131},[13,14,15,16],[40,41,42],[126,127,128],{"label":28,"url":29,"kind":30},{"label":32,"url":33,"kind":34},{"label":36,"url":37,"kind":38},{"title":10,"description":130,"image":47},"CMU ETC 与 PicoCTF 合作的密码学教育向 WebGL 解谜游戏。",[132,147,189,228,231,272,334,344,388,398,409,417],{"id":133,"type":134,"region":135,"title":136,"items":137},"project-facts","metrics","hero","项目信息",[138,141,144],{"label":139,"value":140},"团队规模","5",{"label":142,"value":143},"平台","PC Website",{"label":145,"value":146},"技术栈","Unity WebGL",{"id":148,"type":149,"region":150,"title":151,"document":152},"project-intro","rich-text","main","项目简介",{"id":153,"title":154,"body":155,"description":161,"extension":182,"meta":183,"navigation":184,"path":185,"seo":186,"stem":187,"__hash__":188},"projectBlocks\u002Fprojects\u002Fpicolock\u002Fzh\u002Fblocks\u002Foverview.md","Overview",{"type":156,"value":157,"toc":175},"minimark",[158,162,166,169,172],[159,160,161],"p",{},"PicoLock 是一款面向中学生的网页解谜游戏，核心目标很直接：把原本抽象的密码学概念，改写成玩家可以亲手尝试、立刻看到反馈的互动过程。项目由 CMU ETC 与 CMU CyLab PicoCTF 协作完成。",[163,164,165],"h3",{"id":165},"项目背景",[159,167,168],{},"团队希望先解决一个具体问题：很多入门级密码学内容停留在讲解层，学生知道名词，却很难真正理解规则是怎样运作的。PicoLock 选择从可操作的谜题入手，把学习过程放进一套短时长、低门槛的网页体验里。",[163,170,171],{"id":171},"交互方式",[159,173,174],{},"游戏全程使用鼠标操作。玩家需要选择功能卡，把它作用到场景里的对象上，再根据对象状态的变化继续推理下一步。输入方式保持得很克制，目的是让注意力始终停留在规则本身，而不是操作记忆上。",{"title":176,"searchDepth":177,"depth":177,"links":178},"",2,[179,181],{"id":165,"depth":180,"text":165},3,{"id":171,"depth":180,"text":171},"md",{},true,"\u002Fprojects\u002Fpicolock\u002Fzh\u002Fblocks\u002Foverview",{"description":161},"projects\u002Fpicolock\u002Fzh\u002Fblocks\u002Foverview","kLxOy7jtdTkaH9zHohUwYfx1yDnTvbKOF0ssH1gOZyg",{"id":190,"type":149,"region":150,"title":191,"document":192},"intro-structure","设计概览",{"id":193,"title":194,"body":195,"description":176,"extension":182,"meta":223,"navigation":184,"path":224,"seo":225,"stem":226,"__hash__":227},"projectBlocks\u002Fprojects\u002Fpicolock\u002Fzh\u002Fblocks\u002Fintro-structure.md","Intro Structure",{"type":156,"value":196,"toc":219},[197,200,203,206],[163,198,199],{"id":199},"设计目标",[159,201,202],{},"PicoLock 的设计重点不是把理论一次讲完，而是先让玩家建立对系统行为的直觉。每一次拖卡、作用、观察结果，都是在帮助玩家理解密码学规则是怎样被执行出来的。",[163,204,205],{"id":205},"关卡结构",[207,208,209,213,216],"ol",{},[210,211,212],"li",{},"第一关从古典密码入手，用最直接的物体变化建立基本交互语言。",[210,214,215],{},"第二关开始引入 RSA，把公钥和私钥的关系转成更有推理性的谜题结构。",[210,217,218],{},"第三关继续沿着 RSA 往下走，重点放在思路判断，而不是暴力尝试。",{"title":176,"searchDepth":177,"depth":177,"links":220},[221,222],{"id":199,"depth":180,"text":199},{"id":205,"depth":180,"text":205},{},"\u002Fprojects\u002Fpicolock\u002Fzh\u002Fblocks\u002Fintro-structure",{"description":176},"projects\u002Fpicolock\u002Fzh\u002Fblocks\u002Fintro-structure","43UTWpyC0eC25OxOmPk_hk8CuCw07Otq8NIs2MPIUUw",{"id":229,"type":48,"region":150,"item":230},"intro-visual",{"id":79,"kind":48,"src":80,"alt":81,"aspectRatio":25},{"id":232,"type":149,"region":150,"title":233,"document":234},"project-contributions","我的职责",{"id":235,"title":236,"body":237,"description":241,"extension":182,"meta":267,"navigation":184,"path":268,"seo":269,"stem":270,"__hash__":271},"projectBlocks\u002Fprojects\u002Fpicolock\u002Fzh\u002Fblocks\u002Fresponsibilities.md","Responsibilities",{"type":156,"value":238,"toc":263},[239,242,245,257,260],[159,240,241],{},"我在项目中同时负责程序、玩法设计、关卡设计和音效设计。我的工作集中在玩家最先接触到的部分：规则是否清楚、第一关是否能把玩法语言建立起来、反馈是否足够明确。",[163,243,244],{"id":244},"具体投入",[246,247,248,251,254],"ul",{},[210,249,250],{},"实现核心卡牌交互逻辑。",[210,252,253],{},"负责第一关的谜题编排与节奏调整。",[210,255,256],{},"处理点击、状态切换和关键节点的音效反馈。",[163,258,259],{"id":259},"结果",[159,261,262],{},"这部分工作的重点不是单纯增加内容量，而是把学习曲线压进前几分钟里。玩家需要先理解“卡牌会对对象造成什么变化”，后面的密码学概念才有办法顺着这个基础往上搭。",{"title":176,"searchDepth":177,"depth":177,"links":264},[265,266],{"id":244,"depth":180,"text":244},{"id":259,"depth":180,"text":259},{},"\u002Fprojects\u002Fpicolock\u002Fzh\u002Fblocks\u002Fresponsibilities",{"description":241},"projects\u002Fpicolock\u002Fzh\u002Fblocks\u002Fresponsibilities","jlrOPqQ0pbWbzc5Ug9tW7cP1Le91iQFf8rl3y1ahHZg",{"id":273,"type":149,"region":150,"title":274,"document":275},"implementation-core","技术实现",{"id":276,"title":277,"body":278,"description":176,"extension":182,"meta":329,"navigation":184,"path":330,"seo":331,"stem":332,"__hash__":333},"projectBlocks\u002Fprojects\u002Fpicolock\u002Fzh\u002Fblocks\u002Fimplementation-core.md","Implementation Core",{"type":156,"value":279,"toc":325},[280,283,303,306],[163,281,282],{"id":282},"卡牌系统",[159,284,285,286,290,291,294,295,298,299,302],{},"核心玩法围绕四张可复用的功能卡展开：",[287,288,289],"code",{},"Translate"," 用于平移，",[287,292,293],{},"Rotate"," 用于旋转，",[287,296,297],{},"Modify"," 用于切换状态，",[287,300,301],{},"Scale"," 用于缩放。每张卡都对应一种稳定、可预测的物体变化方式，玩家通过不断试验，逐步记住系统的行为规则。",[163,304,305],{"id":305},"交互对象",[159,307,308,309,312,313,316,317,320,321,324],{},"场景里的可交互对象建立在 ",[287,310,311],{},"InteractableBase"," 上，再按卡牌类型挂接具体行为组件。例如，",[287,314,315],{},"IB_Translate"," 会在使用平移牌后移动到下一个可用位置；",[287,318,319],{},"IB_Modify"," 可以配合 ",[287,322,323],{},"SO_ModifyObjects"," 定义一组顺序状态。这样一来，关卡搭建更像是在组合规则，而不是为每个物体重写一套单独逻辑。",{"title":176,"searchDepth":177,"depth":177,"links":326},[327,328],{"id":282,"depth":180,"text":282},{"id":305,"depth":180,"text":305},{},"\u002Fprojects\u002Fpicolock\u002Fzh\u002Fblocks\u002Fimplementation-core",{"description":176},"projects\u002Fpicolock\u002Fzh\u002Fblocks\u002Fimplementation-core","cvSDurRuh5nUinjBJDyzsXOF63xhzA2TGSFCgd63bVU",{"id":335,"type":336,"region":150,"variant":337,"title":338,"items":339},"implementation-grid","gallery","equal-grid","卡牌系统框架",[340,341,342,343],{"id":119,"kind":48,"src":120,"alt":121,"aspectRatio":25},{"id":111,"kind":48,"src":112,"alt":113,"aspectRatio":25},{"id":115,"kind":48,"src":116,"alt":117,"aspectRatio":25},{"id":107,"kind":48,"src":108,"alt":109,"aspectRatio":25},{"id":345,"type":149,"region":150,"title":346,"document":347},"implementation-delivery","校验链路与 Web 发布",{"id":348,"title":349,"body":350,"description":176,"extension":182,"meta":383,"navigation":184,"path":384,"seo":385,"stem":386,"__hash__":387},"projectBlocks\u002Fprojects\u002Fpicolock\u002Fzh\u002Fblocks\u002Fimplementation-delivery.md","Implementation Delivery",{"type":156,"value":351,"toc":379},[352,355,372,376],[163,353,354],{"id":354},"校验链路",[159,356,357,358,361,362,365,366,368,369,371],{},"第一关的答案校验链路是 ",[287,359,360],{},"CipherTarget"," -> ",[287,363,364],{},"IB_CheckerManager"," -> 子 Checker。",[287,367,360],{}," 用来定义目标状态，",[287,370,364],{}," 负责汇总场景中各个对象的结果，再交给不同的 Checker 判断条件是否成立。",[163,373,375],{"id":374},"web-发布","Web 发布",[159,377,378],{},"项目使用 Unity 开发，最终导出为 WebGL 版本，再接入 PicoCTF 的插件体系部署到官网。正式版支持学生账号保存和读取进度，这让教学场景下的回访和继续体验更容易落地。",{"title":176,"searchDepth":177,"depth":177,"links":380},[381,382],{"id":354,"depth":180,"text":354},{"id":374,"depth":180,"text":375},{},"\u002Fprojects\u002Fpicolock\u002Fzh\u002Fblocks\u002Fimplementation-delivery",{"description":176},"projects\u002Fpicolock\u002Fzh\u002Fblocks\u002Fimplementation-delivery","OYWV3IUkTjFCWvOZYKzDDTq1-VdHqN62X7bSq0_t77o",{"id":389,"type":336,"region":150,"variant":390,"title":391,"items":392,"stageScale":396,"stageSideGap":397},"implementation-carousel","carousel","校验链路框架",[393,394,395],{"id":87,"kind":48,"src":88,"alt":89,"aspectRatio":25},{"id":91,"kind":48,"src":92,"alt":93,"aspectRatio":25},{"id":95,"kind":48,"src":96,"alt":97,"aspectRatio":25},1,50,{"id":399,"type":336,"region":150,"variant":390,"title":400,"items":401,"stageScale":407,"stageSideGap":408},"project-gallery","项目图库",[402,403,404,405,406],{"id":99,"kind":48,"src":100,"alt":101,"aspectRatio":25},{"id":103,"kind":48,"src":104,"alt":105,"aspectRatio":25},{"id":55,"kind":48,"src":56,"alt":57,"aspectRatio":25},{"id":59,"kind":48,"src":60,"alt":61,"aspectRatio":25},{"id":63,"kind":48,"src":64,"alt":65,"aspectRatio":25},0.9,40,{"id":410,"type":411,"region":412,"items":413},"outbound-links","links","aside",[414,415,416],{"label":28,"url":29,"kind":30},{"label":32,"url":33,"kind":34},{"label":36,"url":37,"kind":38},{"id":418,"type":419,"region":412,"items":420},"key-highlights","highlights",[40,41,42],[422,427,447,471,473,499,533,539,565,570,577,582],{"id":133,"type":134,"region":135,"title":136,"items":423},[424,425,426],{"label":139,"value":140},{"label":142,"value":143},{"label":145,"value":146},{"id":148,"type":149,"region":150,"title":151,"document":428},{"id":153,"title":154,"body":429,"description":161,"extension":182,"meta":445,"navigation":184,"path":185,"seo":446,"stem":187,"__hash__":188},{"type":156,"value":430,"toc":441},[431,433,435,437,439],[159,432,161],{},[163,434,165],{"id":165},[159,436,168],{},[163,438,171],{"id":171},[159,440,174],{},{"title":176,"searchDepth":177,"depth":177,"links":442},[443,444],{"id":165,"depth":180,"text":165},{"id":171,"depth":180,"text":171},{},{"description":161},{"id":190,"type":149,"region":150,"title":191,"document":448},{"id":193,"title":194,"body":449,"description":176,"extension":182,"meta":469,"navigation":184,"path":224,"seo":470,"stem":226,"__hash__":227},{"type":156,"value":450,"toc":465},[451,453,455,457],[163,452,199],{"id":199},[159,454,202],{},[163,456,205],{"id":205},[207,458,459,461,463],{},[210,460,212],{},[210,462,215],{},[210,464,218],{},{"title":176,"searchDepth":177,"depth":177,"links":466},[467,468],{"id":199,"depth":180,"text":199},{"id":205,"depth":180,"text":205},{},{"description":176},{"id":229,"type":48,"region":150,"item":472},{"id":79,"kind":48,"src":80,"alt":81,"aspectRatio":25},{"id":232,"type":149,"region":150,"title":233,"document":474},{"id":235,"title":236,"body":475,"description":241,"extension":182,"meta":497,"navigation":184,"path":268,"seo":498,"stem":270,"__hash__":271},{"type":156,"value":476,"toc":493},[477,479,481,489,491],[159,478,241],{},[163,480,244],{"id":244},[246,482,483,485,487],{},[210,484,250],{},[210,486,253],{},[210,488,256],{},[163,490,259],{"id":259},[159,492,262],{},{"title":176,"searchDepth":177,"depth":177,"links":494},[495,496],{"id":244,"depth":180,"text":244},{"id":259,"depth":180,"text":259},{},{"description":241},{"id":273,"type":149,"region":150,"title":274,"document":500},{"id":276,"title":277,"body":501,"description":176,"extension":182,"meta":531,"navigation":184,"path":330,"seo":532,"stem":332,"__hash__":333},{"type":156,"value":502,"toc":527},[503,505,515,517],[163,504,282],{"id":282},[159,506,285,507,290,509,294,511,298,513,302],{},[287,508,289],{},[287,510,293],{},[287,512,297],{},[287,514,301],{},[163,516,305],{"id":305},[159,518,308,519,312,521,316,523,320,525,324],{},[287,520,311],{},[287,522,315],{},[287,524,319],{},[287,526,323],{},{"title":176,"searchDepth":177,"depth":177,"links":528},[529,530],{"id":282,"depth":180,"text":282},{"id":305,"depth":180,"text":305},{},{"description":176},{"id":335,"type":336,"region":150,"variant":337,"title":338,"items":534},[535,536,537,538],{"id":119,"kind":48,"src":120,"alt":121,"aspectRatio":25},{"id":111,"kind":48,"src":112,"alt":113,"aspectRatio":25},{"id":115,"kind":48,"src":116,"alt":117,"aspectRatio":25},{"id":107,"kind":48,"src":108,"alt":109,"aspectRatio":25},{"id":345,"type":149,"region":150,"title":346,"document":540},{"id":348,"title":349,"body":541,"description":176,"extension":182,"meta":563,"navigation":184,"path":384,"seo":564,"stem":386,"__hash__":387},{"type":156,"value":542,"toc":559},[543,545,555,557],[163,544,354],{"id":354},[159,546,357,547,361,549,365,551,368,553,371],{},[287,548,360],{},[287,550,364],{},[287,552,360],{},[287,554,364],{},[163,556,375],{"id":374},[159,558,378],{},{"title":176,"searchDepth":177,"depth":177,"links":560},[561,562],{"id":354,"depth":180,"text":354},{"id":374,"depth":180,"text":375},{},{"description":176},{"id":389,"type":336,"region":150,"variant":390,"title":391,"items":566,"stageScale":396,"stageSideGap":397},[567,568,569],{"id":87,"kind":48,"src":88,"alt":89,"aspectRatio":25},{"id":91,"kind":48,"src":92,"alt":93,"aspectRatio":25},{"id":95,"kind":48,"src":96,"alt":97,"aspectRatio":25},{"id":399,"type":336,"region":150,"variant":390,"title":400,"items":571,"stageScale":407,"stageSideGap":408},[572,573,574,575,576],{"id":99,"kind":48,"src":100,"alt":101,"aspectRatio":25},{"id":103,"kind":48,"src":104,"alt":105,"aspectRatio":25},{"id":55,"kind":48,"src":56,"alt":57,"aspectRatio":25},{"id":59,"kind":48,"src":60,"alt":61,"aspectRatio":25},{"id":63,"kind":48,"src":64,"alt":65,"aspectRatio":25},{"id":410,"type":411,"region":412,"items":578},[579,580,581],{"label":28,"url":29,"kind":30},{"label":32,"url":33,"kind":34},{"label":36,"url":37,"kind":38},{"id":418,"type":419,"region":412,"items":583},[40,41,42],1786880260805]