Collect all of the twigs to advance to the next level! Move and use your abilities wisely as the ice will melt in Arkayle's wake.
Note: you may need to click on the game before it will accept keyboard input.
| Key | Action |
|---|---|
| W or Up | Move up |
| A or Left | Move left |
| S or Down | Move down |
| D or Right | Move right |
| 1 | Toggle fireball |
| 2 | Toggle freeze |
| Space or Enter | Start game or advance to the next level |
Phoenix Rising is a HTML5/JavaScript-based puzzler written for the second iteration of the Game Prototype Challenge, a week-long game jam that took place between December 13, 2010 and December 20, 2010. It was my first-ever attempt at writing a game and also my first real exposure to the canvas element introduced in the HTML5 specification.
At the time, using canvas was quite the novel approach as existing game engines largely relied on DOM manipulation. This was likely due to the poor performance of canvas, especially when the dimensions are large. With a fairly beefy laptop (Core 2 Duo T7500 / GeForce 9500M GS), re-rendering a 1000×500px canvas every 50ms caused Firefox 3.6 to struggle, although performance was not terrible in Firefox 4 and Chrome 8 due to hardware acceleration. In hindsight, this game didn't really need a proper game loop as the canvas only needed to update on player input.
There were a couple of other interesting things of note. I opted to store level information in XML files, using various symbols to represent each type of tile. This meant that I could easily add additional levels (with the bottleneck being creative enough to actually come up with new puzzles). I also found that canvas's drawImage method tries to render an image onto the canvas even if it hasn't been loaded yet. Creating a new Image object and setting the onload and src properties was one way to resolve that, although it led to a bunch of flickering in Firefox 3.6 due to the game loop. Preloading all images at the start ended up being a better approach.