I’ll admit it – I’m a math geek. I think of math like poetry. The beauty of math is not in its practicality; rather the opposite. The number system is complex and theoretical, and learning about it stretches our brains in ways most things don’t.
But to appreciate math, you need to master the basics so that your brain can focus on the deeper ideas and concepts. One of those basic skills in understanding the relationship between numbers. How big is x compared to y? That’s why I created Slice the Pie, an interactive game that develops this understanding. It works great on mobile and not too bad with a computer and mouse.
My design goals were:
- Create something that runs well on pretty much any device and browser. It’s a pure HTML5 app, nothing more.
- Make it easy to try. No app downloads, no software installs, etc. The game teaches you how to play and you can learn in seconds.
- It should wire your brain the right way as you play it. It works your brain hard in a short period of time. The core concepts are depicted visually in high contrast colors, and there are very few other visual elements.
- It should make you want to play again and get better. Simple gamefication elements like a leaderboard taps the spirit of competition.
I’ve had educators introduce it to their students and give me very positive feedback. I’ve hooked friends on it too.
The code is not a thing of beauty. Most of the magic happens in a single HTML Canvas, as such I did not get much help from UI frameworks like React or Bootstrap. I had very little experience with Javascript and CSS going in, and if I had time I would re-write the game from scratch knowing what I do now.
Ironically, the math required to build this simple math game is quite complex. I couldn’t find a good graphics library that created the rendering affects that I needed, so I rolled my own.
The only data persistence requirements are for the scoreboard, which shows the top scores on a given day. A simple read and write to a Firebase database did the trick.
And I could have used the help of a state machine implementation or design pattern, as the behavior of the game is very much tied to the state of the game. Here too I rolled my own.
Give it a whirl. I hope you like it.