Tuesday, December 21, 2010

Announcing Pirates Love Daisies: an HTML5 Tower Defense Game by Grant Skinner

In preparation for the Internet Explorer 9 Beta in September, we had the opportunity to work with a wide group of talented web developers and designers. Since launch, numerous websites have enhanced their web experiences by taking advantage of features in Internet Explorer 9 that help make their sites shine. These successes gave us a great idea?we challenged Grant Skinner, the world-famous Flash guru, and his team to build an incredible game solely in HTML5. To be honest, it was a challenge not only to him, but one also intended to test the graphic capabilities of HTML5 and various browsers? performance.

And today, Grant released his new HTML5 tower defense game: Pirates Love Daisies.

Pirates Love Daisies Start Menu    Pirates Love Daisies Game Canvas

If you are wondering about the name ? I mean, won?t the pirate?s parrot be jealous? ? you can get more details from Grant?s blog post. The idea for the game is original, but simple: you and your pirates are fighting to defend your precious daisies from being snatched by evil sea creatures. What I like about the site is the modular way in which Grant animated the game?s many elements, including the characters, scenery and the environment in general. If you inspect the code of one of the pages using the Internet Explorer 9 Developer Tools (F12), you will find that the HTML markup is relatively short. Most of the action happens inside the <canvas> tag, where all the graphic objects are drawn and animated using the new EaselJS framework.

Fluid animations, sounds that harmonize like an orchestra, special graphic effects, increasing difficulty levels?the vitality and excitement of Pirates Love Daisies is amazing!

Get Microsoft Silverlight

Built using web standards and HTML5 (no Flash or plugins!), the game works beautifully in Internet Explorer 9, but it also runs in other modern browsers.

What about performance? Grant described Internet Explorer 9 as ?smoking fast.? It?s the only browser that can provide the experience you would expect as a game player. Grant designed a lot of little details (lightning flashes, thunder claps, rolling sea waves, flying birds, drifting clouds, etc) that improve user experience. I?ve noticed these little nuances work great in Internet Explorer 9, but tend to slow down the overall game and max out the resources if you are using other browsers. The good thing is that you can easily enable/disable them by checking/unchecking the little box at the bottom of the screen. If you are using Internet Explorer 9, make sure to try it out!

Enable additional effects for IE9

You can find more technical details, including some of the lessons we learned along the path working with Grant and performance analysis on my blog.

It?s been so much fun working (and playing!) on this project. I would like to thank Grant Skinner and his team, because they more than met the challenge we set: their Pirates Love Daisies game clearly demonstrates the potential of HTML5 and other web standards, as well as the results you can achieve through hardware-accelerated graphics and JavaScript. The Internet Explorer 9 team should be proud of the great browser they built (and keep building)!

Time to go to play now and beat Grant?s high score! :P

Giorgio Sardo, Internet Explorer Senior Technical Evangelist

NETWORK APPLIANCE NETGEAR NCR NATIONAL SEMICONDUCTOR NATIONAL INSTRUMENTS

No comments:

Post a Comment