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.
|W or Up||Move up|
|A or Left||Move left|
|S or Down||Move down|
|D or Right||Move right|
|Space or Enter||Start game or advance to the next level|
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
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.