Yes, it's difficult. If you want to see what I have found to be the easiest way to beat it (or if your browser doesn't support CSS 3D transforms) just watch the playthough above. I've always enjoyed 2D platformers and felt that it would be a great idea to create a platformer for my portfolio site. I wanted to do something a little different though. My inspiration came from a game that I played a few years before, a 3D re-imagining of Tetris called Torus.

For the 3D portion I created a basic Javascript Quaternion class, UVN camera, and Object Hierarchy class. Each side of the cube contains a Canvas element that is drawn to. In order to manage the z-indexes a simple z buffer array was created based off of the center position of each canvas. The cube's current rotation is then calculated based off of the player's in game X position.

As for the 2D platformer, I used AABB collision detection. The AI is relatively simple, with the green monsters checking if there is a block in front of them, or no block below them, and reversing direction in that event. The red monsters run the same check except they also check if the player is on the same level as them and if there is a continuous path to the player. In that event the red monsters will sprint towards the player. The map is setup in a grid layout, with each tile having 3 states, solid, deadly, and non-collidable. The maps were made with a simple map making tool specifically developed for the game.


  • Quaternion Cube Rotation
  • UVN Camera Model
  • HTML5 Gamepad Support