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
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
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!
- Getting Started - DONE!
- 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.
Version 1.0 Submitted April 28, 2013, Version 2.0 Submitted May 13, 2013