It’s definitely good to be a HTML5 developer. You can now target multiple devices & stores via the very same code base with almost no effort! We will focus on the Microsoft devices in this article.

During this tutorial, we’re going how to copy/paste a game working fine in the browser into a Universal HTML5 Apps that will run both on Windows 8.1 & Windows Phone 8.1. For games, you can have cases where 100% of the code will live into the shared project!

We’re first going to see how to have a unique Visual Studio solution embedding the same code of a 2D Canvas platformer game to target 2 platforms: Windows 8.1 & Windows Phone 8.1. Then, we’ll see a second option using 3D & WebGL this time and WinJS to have a game running again on both Windows tablets & phones.

What’s a Universal Apps?

During our last BUILD event in April 2014, we’ve released a new type of Visual Studio 2013 project to help developers creating applications that will target both ecosystems using HTML5: Windows Phone 8.1 & Windows Store Apps. Basically, you will have 3 projects inside it:

- a shared one containing the JavaScript code, HTML & CSS files that will be strictly identical between both platforms - a Windows Phone specific project if you need to have a specific UI, controls or experience on some parts of the project - a Windows Store 8.1 specific project for the same reasons

Going further

You can embrace the Windows platforms by using WinRT APIs to enhance the game experience and differentiate it from other platforms. For instance, we could imagine enabling a live tile experience in our game pushing the last level played and the best high score. This is really pretty simple to implement, you just have to download this sample: App tiles and badges sample and inject the code in our current platformer sample.

And you’re done! Launch it on Windows Phone and you’ll be able to move using your 2 thumbs. Launch it on Windows and you’ll be able to move using the keyboard/mouse or other inputs defined in the settings charm.