Click here to Skip to main content
Click here to Skip to main content

Extending Modern Apps to the Web: Slot Machine

, 13 May 2013
Rate this:
Please Sign up or sign in to vote.
How to take an existing Windows 8 and Windows Phone 8 Modern app and extend it to the web.

Please note

This article is an entry in our Windows Azure Developer Challenge. Articles in this sub-section are not required to be full articles so care should be taken when voting. Create your free Azure Trial Account to Enter the Challenge.

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:


Slot Machine with 5 reels and buttons to select bet amounts and to spin.

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!

Early version for Slot Machine for the web

Next Steps

  1. Getting Started - DONE!
  2. Build a Website - The new version of Slot Machine will be created on Azure using HTML5 and JavaScript.
  3. Using SQL on Azure - We will need to extend our SQL Server database on Azure to support the new version of the application.
  4. 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.
  5. 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

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

Share

About the Author

jluhman
Founder See Sharp Guys
United States United States
Joe Luhman has nearly 20 years of experience developing software, primarily on the Microsoft stack, and has recently been focusing on building mobile applications for the newest mobile marketplace: the Windows 8 Store. His company, See Sharp Guys has 4 applications in the Windows 8 store, and has recently entered the Windows Phone 8 marketplace as well.
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 13 May 2013
Article Copyright 2013 by jluhman
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid