Did you know? DZone has great portals for Python, Cloud, NoSQL, and HTML5!
HTML5 Zone is brought to you in partnership with:

John Esposito curates content at DZone, while writing a dissertation on ancient Greek philosophy and raising two cats. In a previous life he was a database developer and network administrator. John is a DZone Zone Leader and has posted 268 posts at DZone. You can read more from them at their website. View Full User Profile

Flying Through Paths: MissileGame in SVG..But No curveto Explosions Yet?

02.22.2012
Email
Views: 1579
  • submit to reddit
The HTML5 Microzone is presented by DZone and Microsoft to bring you the most interesting and relevant content on emerging web standards.  Experience all that the HTML5 Microzone has to offer on our homepage and check out the cutting edge web development tutorials on Script Junkie, Build My Pinned Site, and the HTML5 DevCenter.

Way back in 2004, Damien Clarke wrote the missile game 3d in Flash -- a follow-up to two other Flash games (written by his cousin) and a fun time-sink, with simple mouse control, that roughly simulates Lando's spectacular run in the second Death Star.

It's basically a geometry-heavy collision-detection game, and just as enjoyable as it sounds.

Now Ben Mather has shown his post-Flash mettle and recreated the game in SVG, taking full advantage of Kevin Lindsey's popular 2D geometry JavaScript library for SVG:

 

KevLinDev's library worries about intersections, projection and reflection, polygon definition, 2d point and vector routines, color picking, bezier morphing, mouse tracking, and loads of other game-geometry and game-GUI problems. And it's a great library for any SVG game development.

But Ben's MissileGame port really shows off the game library's power, and boasts some really nice, complex SVG of its own.

..including some code tantalizingly marked 'EXPLOSION!!!!' but is completely commented out..!:

<!--== EXPLOSION!!!! ========================================================-->
<!--    <path id="explosion"-->
<!--       transform="scale(2,2)"-->
<!--       fill="#f5bd3c"-->
<!--       stroke="#ff2626"       -->
<!--       stroke-width="0.5"-->
<!--       d="m -0.63488,-4.3752-->
<!--          c  0.24879,1.233, 1.1883,2.6366, 1.768,0.69037-->
<!--             0.74264,0.71431, 1.2069,0.6277, 1.6362,-0.5115-->
<!--            -0.034821,1.0871, 0.096633,1.6827, 0.74401,1.7541-->
<!--            -0.091757,1.4249, 0.70746,2.0783, 1.2188,1.8749-->

..plus lots more path curveto commands. (Is there an SVG explosion path generator, btw? I assume he didn't hand-tune all those x-and-y's...)

So try the game itself, first, and then look at the svg source, which points you to all the game-logic JavaScript.

And maybe see what happens if you de-comment the explosions transformation..!

Published at DZone with permission of its author, John Esposito.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

HTML5 is the most dramatic step in the evolution of web standards. It incorporates features such as geolocation, video playback and drag-and-drop. HTML5 allows developers to create rich internet applications without the need for third party APIs and browser plug-ins.  Under the banner of HTML5, modern web standards such as CSS3, SVG, XHR2, WebSockets, IndexedDB, and AppCache are pushing the boundaries for what a browser can achieve using web standards.  This Microzone is supported by Microsoft, and it will delve into the intricacies of using these new web technologies and teach you how to make your websites compatible with all of the modern browsers.