HTML Canvas, particle engines, geometry

What it does


First and foremost, let me address one thing that has come up whilst showing this to friends. This is not Tetris. :)

I have not infringed any copyrights or trademarks - the name "Tetris", the suffix -tris and the word "tetrominoes" (but not the concept - 4 blocks in various arrangements is a geometric concept and not under any kind of IP restrictions - which actually would be fine as well since I use arrangements of 1, 2, and 3 blocks) are trademarked (none of which I'm using), and some basic mechanics of the game Tetris are intellectual property (none of which I'm using).

This is called "ShapeFall" (which to the best of my knowledge is not trademarked), and the mechanics/gameplay are completely different - try it out and see for yourself!

This is actually a fairly common concern with many games, and I want to be clear that this is my own work and not based on any known existing games.


Here's what the game is:

Shapes fall from the top and can be rotated and fit along side other shapes. The goal of the game is to match the shape overlaid (in grey) on the game board. You receive bonus points for matching the shape perfectly, and more points for matching it in all the same color.

As you play, please take note that this was not build using any graphics/game engines - pop open the console and take a look at the source code (and pardon the mess, this is a hackathon after all...).

This utilizes a responsive design and should look good on any screen, device, and orientation.

With that said, I've yet to decide what category this fits into... technically it would it fit into web and mobile...

How I built it

98% pure JS.

I used Bootstrap for theming the modals and buttons, jQuery/Hammer for wiring up keyboard/mouse/touch events, and underscore for some map/reduce work.

Everything else, including the particle engine, I coded from scratch.

Challenges I ran into

I had to add 4 libraries to the app just to support Knurld:

  • KnurldSDK (expected)
  • angular, oddly enough, the sdk has a dependency on angular. I'm not using angular, and usually I would but I didn't have much of a UI prior to adding Knurld authentication. Poking around it appears to just be used for map/reduce, e.g. angular.forEach()
  • p5.sound.js, for recording audio
  • p5.js, the base library for p5.sound.js

This seems excessive to me. It'd be nice if Knurld provided the sound functionality required to record/store audio, and didn't have a dependency on angular.

In researching I found many different documentation sources and none of them were the same:

Most authentication processes that I've implemented have been far simpler - but none of them were MFA (multi-factor authentication), so understandably the process is more involved.

Anyway, some fun challenges and pretty typical of bleeding edge/greenfield products. I'm sure it'll mature and the documentation will improve.

More Challenges

The basic mechanics of the game make it a little difficult to use on a mobile device Since I'm not using a game engine (or utilizing the GPU), graphics are limited to a single core. So while that's restrictive, it does highlight how much work javascript is capable of.

Accomplishments that I'm proud of

  • Particle engine
  • Responsive design
  • High framerates

What I learned

JS/Canvas is surprisingly performant - although if this had a lot of animations/effects it would be better to leverage the video card.

What's next for ShapeFall

  • Monetization (IAP for more levels, ads?).
  • Cleanup code a bit
  • Polish the UI
  • Server-side scoring
  • Knurld seems to have some issues reading .wav files posted to dropbox, look into it and see if I can work around it
Share this project: