My previous blog entry talked about my experiences writing an ‘AngularJS + HTML5 canvas’ game without a game engine. Now I’m not going to pretend that this was the greatest code of all time – it was very much a way of learning AngularJS – however I am pleased that I managed to complete the game.

For those interested you can play the game here and access the source code on GitHub.

However, I wanted to see if I could convert this to run as a Windows Store App…

By default it is not possible to run AngularJS code in a Windows Store App. If you try then you get the following error…

The problem is that various restrictions are put in place to stop malicious code from running – which unfortunately causes problems to anyone who wants to use many of the popular third party JavaScript frameworks out there – e.g. AngularJS.

As it happens there are actually a few different methods for overcoming this. Originally I found this blog post which used a custom version of jQuery. This worked fine, however I didn’t really want to have to include jQuery, so recently I found the winstore-jscompat library, on GitHub, which also solves the problem.

So, to convert our game to run as a Windows Store App we just add all our code to a new empty ‘Win Store App Visual Studio project’ and then make sure we include the winstore-jscompat library before the reference to the AngularJS script like so.

Simples!

If you want to see the code to run the game as a Windows Store App then you can take a look at the WinStoreApp branch of my GitHub repository.

Note: You will not find this running in the Windows Store. It really isn’t good enough for that! 🙂