JavaScript games in Win8


Before we start..

First thing you need to do, if you haven’t already is go get a version of Visual Studio 2012 (for JavaScript you will need the Web version).

Next you will need to make sure you have the JavaScript Template Game (you will need Windows 8 for this sample).

Last you may want to get the rest of the Code Samples for Win8 (you will need Windows 8 for some of these samples).

Remember to brush up on the Application Lifecycle it is not quite as relevant to HTML5 development, but you will defiantly want to pay attention to the async JavaScript portions, so that you can get all the really juicy parts of the Win8 API.

Getting Started

HTML5 games are best used for casual games (games where the experience can be had in under 5 minutes). If you’d like to watch a walk through of developing an HTML5 game you should watch talk 3-110 from build. HTML5 uses the canvas approach, and runs most of the logic from JavaScript. In in the Win8 App Model, these things are not allowed or supported:

  • Java objects
  • ActiveX objects
  • Flash objects
  • non-standard HTML5 objects

Rendering 2D

This is what HTML5 is really known for, there is plenty of information out there

Rendering 3D

See it live and get code here
or learn about it here

You can get a sample of working with 3D in your browser from here. But I personally find this 3D HTML5 Canvas particle shower (with navigation) to be amazing:

You can get more information about 3D HTML5 here.

http://msdn.microsoft.com/en-us/library/windows/apps/hh465460.aspx

Interop with XAML

You can now use Javascript and HTML5 elements inside the XAML model.

Migrating

Migrating a web app using JavaScript and HTML 

Additional Resources

Scott Hanselman: Visual Studio 11 Express for Web for Front End Development – JavaScript/HTML5/CSS3

References

About Larry Louisiana

I'm a Microsoft Partner Consultant.
This entry was posted in Computers and Internet, Game Development, Graphics, Math, Programming and tagged , , , , , , , , , . Bookmark the permalink.

Leave a comment