Track: Education


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

The primary languages we used were HTML5 + CSS (make it look decent) with Javascript for the interactive portion. We used PIXI as the game engine, which simplified a lot of the animation and rendering issues.

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

A majority of our team walked into this project with little to no knowledge of Javascript and the corresponding animation libraries. Going through the project, we had to cross apply our knowledge of other languages and frameworks to build this app.

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)

Built With

Share this project: