Extending Modern Apps to the Web: Slot Machine
How to take an existing Windows 8 and Windows Phone 8 Modern app and extend it to the web.
Introduction
If you are not familiar with Slot Machine for Windows 8, or Slot Machine Mobile for Windows Phone 8, these apps are casino-style slot machine simulators in which players receive free coins every few hours to spin the reels and possibly win more coins.
Slot Machine features a leveling system where players receive 'experience' for each spin, and as levels are gained, additional machines become available, more bonus coins are awarded, and the maximum bet amount per spin can be increased. Here is what Slot Machine looks like for Windows 8:
Screenshot of Slot Machine for Windows 8
All player coins are stored 'in the cloud', updated in real-time, and available across all the player's Windows 8 and Windows Phone 8 devices. We do this by using Windows Azure Mobile Services. Mobile Services offer a powerful-yet-simple way for developers to leverage the power of the Azure infrastructure for their mobile applications. It currently supports most major mobile platforms, Windows 8/Windows Phone 8, iOS, Android, and now HTML/JavaScript apps on the web.
For the Windows Azure Development Challenge, we intend to create a new version of the Slot Machine application for the web using HTML5 and Javascript. We will tie the new application in to the existing Slot Machine back-end on Azure so players can also access their coins on any mobile device or computer with a web browser.
Why Azure?
We already use SQL Azure and Azure Mobile Services to support the native versions of Slot Machine on Windows 8 and Windows Phone 8, so using Azure to create a new version of the application on the web only makes sense!
Building a Website
In order to translate the Slot Machine experience from native applications to the web, we leveraged HTML5, JavaScript and the jQuery library. We built the website in Visual Studio and uploaded it to Azure Websites using WebMatrix. TODO: Add better explanation of WebMatrix process here...
Obstacle 1: Playing sounds
- We used the HTML5 <audio> tag
Obstacle 2: Animating the spinning reels
- We used an HTML5 <canvas> element and the drawImage function called repeatedly from an event loop to move the images within the reels.
Obstacle 3: Resizing the UI
- In XAML based applications, handling different screen resolutions can be aided by the frameworks themselves. Using a viewboxes or a viewstate manager.
- In a web app, we created event listeners to detect the browser resize or orientationchange events, and resized our elements in the event handler
Obstacle 4: Cross Browser support
- Still working on this one. Currently, the version of Slot Machine for the web only works well in IE10 browsers. Firefox will not play the image animations or the sounds, and Chrome will not play the animations. More work to be done here!
Our preliminary website it available at http://smtest2013.azurewebsites.net/gameview.htm Take a look (using IE10) and let us know what you think!
Next Steps
- Getting Started - DONE!
- Build a Website - The new version of Slot Machine will be created on Azure using HTML5 and JavaScript.
- Using SQL on Azure - We will need to extend our SQL Server database on Azure to support the new version of the application.
- Virtual Machines - We will spin up at least one virtual machine to host a copy of the new website and/or provide additional infrastructure support.
- Mobile Access: Supporting Apple, Android, and other mobile devices via an HTML5 version of Slot Machine will broaden our audience reach and extend the Slot Machine ecosystem.
History
Version 1.0 Submitted April 28, 2013, Version 2.0 Submitted May 13, 2013