将现代应用程序扩展到 Web：老虎机

引言

如果您不熟悉Windows 8 老虎机或Windows Phone 8 手机老虎机，这些应用是模拟赌场式老虎机的程序，玩家每隔几个小时会收到免费金币来旋转转轮，并可能赢得更多金币。

老虎机具有等级系统，玩家每次旋转都会获得“经验”，随着等级的提升，将会有更多机器可用，奖励更多奖励金币，并且每次旋转的最大下注金额也会增加。以下是 Windows 8 版老虎机的界面

Windows 8 版老虎机的屏幕截图

所有玩家金币都存储在“云端”，实时更新，并在玩家的所有 Windows 8 和 Windows Phone 8 设备上可用。我们通过使用Windows Azure 移动服务来实现这一点。移动服务为开发者提供了一种强大且简单的途径，可以利用 Azure 基础架构的强大功能来开发其移动应用程序。它目前支持大多数主要的移动平台，包括 Windows 8/Windows Phone 8、iOS、Android，以及现在 Web 上的 HTML/JavaScript 应用程序。

对于 Windows Azure 开发挑战赛，我们打算使用 HTML5 和 Javascript 创建一个新的 Web 版老虎机应用程序。我们将这个新应用程序与 Azure 上现有的老虎机后端连接起来，以便玩家也可以在任何移动设备或带有 Web 浏览器的电脑上访问他们的金币。

为什么选择 Azure？

我们已经使用 SQL Azure 和 Azure 移动服务来支持 Windows 8 和 Windows Phone 8 上的老虎机原生版本，因此使用 Azure 创建 Web 上的新版本应用程序是合情合理的！

构建网站

为了将老虎机的体验从原生应用程序转换为 Web，我们利用了 HTML5、JavaScript 和 jQuery 库。我们在 Visual Studio 中构建了网站，并使用 WebMatrix 将其上传到 Azure 网站。待办事项：在此处添加对 WebMatrix 过程的更详细说明…

障碍 1：播放声音

• 我们使用了 HTML5 的 <audio> 标签

障碍 2：动画旋转转轮

• 我们使用了 HTML5 的 <canvas> 元素和 drawImage 函数，该函数从事件循环中重复调用以移动转轮内的图像。

障碍 3：调整 UI 大小

• 在基于 XAML 的应用程序中，框架本身可以帮助处理不同的屏幕分辨率。使用视图框或视图状态管理器。
• 在 Web 应用中，我们创建了事件监听器来检测浏览器调整大小或 orientationchange 事件，并在事件处理程序中调整元素大小。

障碍 4：跨浏览器支持

• 仍在努力解决这个问题。目前，Web 版老虎机仅在 IE10 浏览器中运行良好。Firefox 不会播放图像动画或声音，Chrome 也不会播放动画。这里还需要做更多工作！

我们的初步网站位于http://smtest2013.azurewebsites.net/gameview.htm。请试用一下（使用 IE10），让我们知道您的想法！

后续步骤

1. 入门 - 已完成！
2. 构建网站 - 新版老虎机将在 Azure 上使用 HTML5 和 JavaScript 创建。
3. 在 Azure 上使用 SQL - 我们需要扩展在 Azure 上的 SQL Server 数据库以支持新版本的应用程序。
4. 虚拟机 - 我们将启动至少一台虚拟机来托管新网站的副本和/或提供额外的基础架构支持。
5. 移动访问：通过 HTML5 版老虎机支持 Apple、Android 和其他移动设备将扩大我们的受众范围并扩展老虎机生态系统。

历史

1.0 版提交于 2013 年 4 月 28 日，2.0 版提交于 2013 年 5 月 13 日