HTML5 gets used for a lot of demos, and it doesn’t have a good reputation for game making, so I wanted something way more graphically and computationally demanding than Tetris. My game is still a bit rough around the edges, but that’s completely due to the time constraints. I’m sure that HTML5 is more than capable of making an extremely polished game.
I had a lot of fun working with transformations and transparency. Transparency is used in many places in the game, including shadows, the selection region, the exit portal, and the boss of level 4. I used stretch transformations for anything circular that appears on the ground (shadows, selectors, portal), rotation transformations for the “knock” animation when a character gets hit, and scaling transformations for the level 4 boss and the “quake” spell casting sequence.
The pièce de résistance is the circular gameplay area. An 854×854 square image is pre-rendered. Then, each frame, it’s rotated by the current angle, scaled to an isometric 1:2 ratio, and its drawing region is clipped to an ellipse using the canvas element’s clip method. No caching of transformed images is done, and I think performance holds up well. You can see the smoothness of the rotation when you press LEFT or RIGHT. I should have incorporated that into the gameplay more, but more about that next time!