Kinetic JS

Math Bubbles

A simple game for kids to practice basic addition, subtraction, and multiplication.

Left click on the bubbles with a correct answer:

Right click on the bubbles with an incorrect answer:

Kinetic JS

I was fiddling around with Canvas, attempting to rotate an image via animation (which turned out to be far more complicated than I'd hoped), and I stumbled upon an awesome Canvas framework. Kinetic JS "enables high performance animations" (source) - it automates so many of the tedious functions necessary for every Canvas project. It turned the whole rotating animation into something as simple as drawing a single rectangle with plain Canvas.

Javascript

I ran into a few confusing bugs with my dreadful enemy, Javascript variable scope. I think that this time I really understood the scope and how to avoid running into problems with it in the future, so hopefully this'll be the last of that.

Aside from learning to use Kinetic JS, this was a very education project for me because I pushed myself to use classes instead of isolated functions whenever possible. The first two languages I learned, Scheme and C, don't use classes, so it was hard for me to get into the habit.

Lessons Learned:
1. Basic animation with Kinetic JS
2. Javascript variable scope understanding 
3. Improved Javascript class understanding

Link to Math Bubbles github folder HERE 
(Just a note that the Javascript and HTML are in the same file because I was just playing around and then it sort of turned into an actual project, so I didn't bother separating them.)
Link to Math Bubbles HERE