Looking back at how we learnt to code, we found that the most difficult aspect of the learning process was to "trace" through the code. By "tracing", we mean mentally single-stepping through lines of code and keeping track of various variables. With this application, we hope to simplify the process of teaching kids the logic behind simple programmatic structures.
What it does
Once loaded into the game, the player (represented with a single stick figure) is presented with a series of options for where they should go next. Using letter keys on their keyboard (a, b, c), the player selects where in the code they think will be executed next. The player is given 3 lives, which is decremented for every incorrect choice they make.
How we built it
Challenges we ran into
Not a technical challenge, but 3/4 of our team got sick within the first 3 hours of the Hackathon. Luckily, we were able pull through and build Tracer! On a technical note, animating our little stick man was pretty challenging, given that none of us had in-depth experience with graphics animation using JS beforehand.
Accomplishments that we're proud of
Our stick man animations look really nice. The concept and potential impact of this game is very useful, since it emphasizes aspects of coding that are often overlooked, such as reading and comprehending code mentally.
What we learned
What's next for Tracer
We originally had a stretch goal of linking our app with multiple mobile devices using Websocket, allowing for a multiplayer experience. Additionally, we would also clean up the UI and add fancier animations. Finally (if we haven't implemented this yet), we'd add simple sound effects (free open source sound available from zapsplat ![link to sound hosting service]). Some other things we would've implemented given more time:
- restart button
- interpreter for custom code input
- local/remote scoreboard
- multiplayer on a single local server (multiple sets of input on the same computer)