Capture the dots (live minigame)

I had a game dynamic idea quite a few years ago that reoccurred in my mind today. It's quite simple, so I decided to recreate it in vanilla JS rendering to a 2D canvas. I even wrote it in ES5, compatible even with Internet Explorer (from version 9, I suppose, but only tested in IE11).

There is something oddly satisfying about writing some plain JavaScript in a .js-file and just have it work everywhere without setting up any build process. I'm not a JavaScript purist, by any standard, but modern JavaScript development is quite tool heavy. It's easy to forget how quick it is to just write a small little thing and have it run happily by itself.

That being said, I do appreciate the development in the JavaScript world. I wouldn't want to create a larger web application without something like Babel, Webpack and React ever again.

I played around a little with simple rendering tricks to add some effects --- shadow positioning to create a sense of depth, and not clearing the canvas entirely each frame to create a cheap motion blur effect.

How to Play

Click/tap anywhere within the inner square and try to let the growing circle get as big as possible while consuming the most dots of a single colour. As you achieve higher chains, the difficulty increases.

There is currently no end goal in this game, but you might find it mildly addictive and hypnotizing.