PicoLock
A browser puzzle game that uses card-based interactions to help middle school students explore cryptography.
Project Description
PicoLock is a browser puzzle game for middle school students. The idea is simple: take cryptography concepts that usually stay abstract and turn them into a system players can test with their own hands. The project was developed in collaboration with CMU ETC and CMU CyLab PicoCTF.
Project background
The team was trying to solve a practical problem. Introductory cryptography material often explains the terms, but students still do not get a feel for how the rules actually behave. PicoLock moves that learning into a short browser experience built around puzzle interaction.
Interaction model
The game uses mouse-only input. Players choose a card, apply it to an object in the scene, and read the resulting state change before deciding on the next step. That constraint keeps the controls simple and leaves the player's attention on the rule set instead of the interface.
Design Overview
Design goals
The goal was not to explain the theory all at once. We wanted players to build intuition for how the system behaves first. Every card action and object response was meant to make the underlying cryptography feel concrete instead of distant.
Level structure
- Level 1 starts with classical ciphers and uses direct object changes to establish the core interaction language.
- Level 2 introduces RSA and turns the public and private key relationship into puzzle logic.
- Level 3 continues that RSA framing and pushes the player toward reasoning instead of brute force.
My Contributions
I worked across programming, gameplay design, level design, and sound design. Most of my effort went into the parts players touch first: whether the rules read clearly, whether Level 1 teaches the interaction language well, and whether the feedback feels immediate enough to trust.
What I owned
- Core card interaction implementation
- Level 1 gameplay and puzzle structure
- Audio feedback for clicks, state shifts, and key puzzle responses
Result
The goal was not to add more content for its own sake. It was to make the first few minutes do the heavy lifting, so players understand what each card changes before the cryptography layer starts asking more of them.
Technical Implementation
Card system
The core loop is built around four reusable cards: Translate for movement, Rotate for orientation, Modify for state switching, and Scale for resizing. Each card maps to one stable kind of object change, so players learn the system by testing it and reading the result.
Interactive objects
Scene objects inherit from InteractableBase, then receive specific behavior components based on the card they respond to. An IB_Translate object moves to its next available position when the translate card is used. An IB_Modify object can work with SO_ModifyObjects to define an ordered state sequence. That setup keeps level building flexible and removes the need to script each prop from scratch.
Card System Framework
Validation Flow & Web Delivery
Validation flow
Level 1 ends with a target-state check built as CipherTarget -> IB_CheckerManager -> sub-checkers. CipherTarget defines the target condition, IB_CheckerManager gathers the current object states, and the individual checkers decide whether the puzzle has been solved.
Web delivery
The project was built in Unity, exported to WebGL, and then connected to PicoCTF's plugin layer for the official web release. The published version supports account-based save and load, which matters for classroom use and repeat play.