Code Walkthroughs Show How to Write Interactive Graphics in HTML5, SVG, JavaScript

If you are interested in seeing how gaming applications are written in HTML5 and JavaScript, take a look at these two posts. Each post includes an overview and code walkthrough. Dan Catuhe has written a couple posts that shows how you can use HTML, CSS, and JavaScript to build graphically interactive applications.

Game App Using SVG

In Dan’s post, How to write a small game using HTML5 and JavaScript–BrikBrok, he shows how to build a game using SVG and the HTML Canvas. He shows you how to set up the background, set up the HTML5 page, do the animation including how to handle the bricks.

He walks you through the development of the game in the same way that you would build it, step by step, showing code.

He even show how to do collision detection of the game pieces.

Dynamic Card Display

In Dan Catuhe’s post entitled Feedback of a graphic development using HTML5 & JavaScript, you’ll see a display a Magic the Gathering ©(courtesy of www.wizards.com/Magic) cards collection. Users will be able to scroll and zoom using the mouse (like Bing Maps, for example).

Cards are stored on Windows Azure Storage and use the Azure Content Distribution Network (CDN : a service that deploys data near the final users) in order to achieve maximum performances. An ASP.NET service is used to return cards list (using JSON format).

He shows the HTML that draws the cards provide the animation of cards, the CSS used to display them, how to do the data gathering, and load and cache the data. Also shows who the app manages the mouse and user interactions.

 

Check out these cool posts.

Bruce D. KyleISV Architect Evangelist | Microsoft Corporation