在这篇文章中，我将快速概述 Mozilla Labs 应用项目，以及它与 Mozilla 的其他技术如何与游戏相关。我们确实处于一个可以使用完全开放的技术在 Web 上创建令人惊叹的游戏的阶段。

几天前，我们发布了 Mozilla Labs 应用项目 的开发者预览版，这是我们对分布式 Web 应用平台的愿景。这个应用项目与我们改善 Web 的总体使命直接相关，正如 Ragavan Srinivasan 最近所述。

作为 Mozilla 使 Web 变得更好的使命的一部分，我们认为应用应该可以在任何现代的 Web 连接设备、操作系统或浏览器上使用，让全球数十亿人能够使用和交互应用。

如今，应用与封闭的生态系统绑定。应用也无法在所有设备上使用；应用中的数据被孤立，无法被其他应用或 Web 服务访问；用户选择受到限制且被低估。

在一个开放的生态系统中，开发人员应该能够使用开放的 Web 技术和资源构建应用。然后，他们应该能够以 Web 提供的覆盖范围、灵活性和选择来分发和销售这些应用。

重要的是要记住，尽管我们经常将应用视为每个都服务于特定任务的软件片段，但它们也可以是游戏。毕竟，如果你忽略掉故事和图形，游戏与你通常认为的应用程序并没有什么不同——它使用相同的平台和编程语言，在本例中是 HTML 和 JavaScript。

那么，Mozilla Labs 应用项目以及我们正在开发的其他技术与开放 Web 游戏有什么关系呢？我希望在接下来的简要概述中阐明这个问题。

请放心，Mozilla 非常专注于使 Web 成为一个更好的开放 Web 游戏平台。

使用 BrowserID 识别玩家

就像 iOS 有 OpenFeint 和 Apple Game Center 等服务一样，Web 上的游戏也需要开放且可靠的玩家识别方法。 BrowserID 是我们解决此问题的方法之一。它允许玩家使用其现有的电子邮件地址登录你的游戏，每个浏览器会话只需输入一次密码。

在你的游戏中实现 BrowserID 是一个简单的三步过程。我建议你查看关于安装的文档，在那里你还会找到一些漂亮的 BrowserID 按钮，向你的玩家表明你支持分布式身份验证。现在 BrowserID 通过 JavaScript 库提供。但在不久的将来，它将内置到 Firefox 中，以提供无缝体验。

以这种方式识别玩家仅仅是提供各种游戏功能的第一步，例如好友列表、排行榜、聊天和多人游戏。

使用全屏 API 创建沉浸式游戏体验

目前 Web 上的游戏缺乏沉浸感的一个原因是，它们看起来就像嵌入到另一个网站中的小方块。为什么它们会感觉这样？因为它们确实只是嵌入到其他网站中的小方块。在午餐时间玩 5 分钟的益智游戏可能在被浏览器 UI 和其他干扰因素包围的小方块中感觉还可以，但第一人称射击游戏或赛车游戏肯定不行。

幸运的是，全屏 API 已经出现以解决此问题。它允许你使任何 DOM 元素填充玩家的整个屏幕，这通常只考虑用于视频。在游戏中使用它可以使游戏体验从 5 分钟的相对乐趣转变为数小时的沉浸式体验。

与大多数 JavaScript API 一样，在你的游戏中实现全屏功能非常简单。你只需要在所需的 DOM 元素上调用 requestFullScreen 方法即可。

var elem = document.getElementById("myGame"); if (elem.requestFullScreen) { elem.requestFullScreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen(); } 

使用鼠标锁定 API 控制鼠标输入

与游戏输入相关的一个问题是鼠标光标行为异常，例如鼠标用于围绕固定点旋转玩家，比如在 3D 第一人称射击游戏中移动视角，或在自上而下的 2D 游戏中旋转玩家。

在这两种情况下，鼠标光标始终可见，这通常很烦人并且会破坏体验。然而，最令人困扰的问题是，当鼠标光标离开浏览器窗口时，所有移动都会停止。当鼠标光标到达屏幕边缘时，在全屏模式下也会发生相同的行为。这对玩家来说是一个非常简单的问题，完全破坏了体验。

好消息是，鼠标锁定 API 已被创建来解决此问题，并且它刚刚出现在 Firefox Nightly 的实验版本中。它的唯一目的是通过隐藏光标并将其锁定在适当位置来控制鼠标，使其不会到达屏幕边缘。这意味着，你不再依赖于相对于浏览器左上角的鼠标位置的 x 和 y 坐标值，而是依赖于相对于鼠标锁定位置的 x 和 y 距离值。

使用鼠标锁定 API 实际上只是调用 navigator.pointer.lock 方法的问题。但是，必须在全屏模式下才能正常工作（并记住使用之前链接的 Firefox 实验版本）。

以下示例将一个 <div> 元素扩展到全屏并同时锁定鼠标

<script> function fullAndLock() { var div = document.getElementById("div"); document.addEventListener("mozfullscreenchange", function() { var pointer = navigator.pointer; if (document.mozFullScreen && document.mozFullScreenElement === div && !pointer.islocked()) { function onMouseLockSuccess() { console.log("Mouse successfully locked"); } function onMouseLockError() { console.log("Error locking mouse"); } pointer.lock(div, onMouseLockSuccess, onMouseLockError); } }, false); div.mozRequestFullScreen(); } </script> <button onclick="fullAndLock();">Mouse Lock</button> <div id="div">Element to receive mouse lock</div> 

这是一个鼠标锁定 API 运行的简短视频，并与非鼠标锁定游戏玩法进行比较，以查看改进效果。

使用 Gamepad API 提供类似控制台的游戏体验

Web 上即将推出的另一个与输入相关的改进是 Gamepad API。键盘和鼠标不再是玩家参与游戏的唯一选择。Gamepad API 现在允许通过 JavaScript 访问各种游戏手柄。这甚至包括一些游戏机控制器，例如 xBox 360 和 Playstation 3 上的控制器（使用第三方驱动程序）！

与鼠标锁定 API 一样，Gamepad API刚刚出现在 Firefox Nightly 的实验版本中，并且使用起来非常简单。结合全屏 API，游戏手柄支持可以真正改变你的游戏体验，将其从网站中的游戏转变为桌面游戏或主机游戏。

要了解何时连接了游戏手柄，你只需要侦听 window 对象上的 MozGamepadConnected 事件即可（请记住使用之前链接的实验版本）。

<div id="gamepads"></div> <script> function gamepadConnected(e) { var gamepads = document.getElementById("gamepads"), gamepadId = e.gamepad.id; gamepads.innerHTML += " Gamepad Connected (id=" + gamepadId + ")"; } window.addEventListener("MozGamepadConnected", gamepadConnected, false); </script> 

接收有关游戏手柄上所有按钮和操纵杆的更新也是侦听事件的问题，或者你可以在需要时手动轮询按钮和操纵杆的状态。查看 Gamepad API 文档 和 input.js 库 以获取更多信息。

下面的视频展示了 Gamepad API 的运行情况，控制着游戏 Rawkets 中的一个角色。

使用 WebSockets 添加实时多人游戏

如果你正在考虑创建多人游戏，那么在此之前，你要么不得不忍受持续的 AJAX 请求带来的延迟，要么不得不转向 Flash。这两个选项都不理想。令人兴奋的是，从去年开始，这种情况已经不再存在，WebSockets 已经出现，允许浏览器和服务器之间进行实时的双向通信。

但是为什么双向实时通信对游戏很重要呢？这意味着你现在可以真正实时地向玩家的浏览器传输数据和从玩家的浏览器接收数据。一个明显的优势是它节省了带宽，不再需要持续的 AJAX 请求来检查新数据。相反，WebSocket 连接保持打开状态，并且数据会在需要时立即推送到玩家或服务器。这非常适合需要每隔几毫秒更新一次的快节奏游戏。最重要的是，WebSockets 的双向特性意味着数据可以同时立即从服务器发送到玩家以及从玩家发送到服务器。

使用 WebSockets 是通过初始化 WebSocket 对象连接到套接字服务器的问题。

var mySocket = new WebSocket("http://www.example.com/socketserver",); 

从那里，你可以使用 WebSocket 对象的 send 方法发送数据。

mySocket.send("Here's some text that the server is urgently awaiting!"); 

你可以通过侦听 WebSocket 对象上的 onmessage 事件来接收数据。

mySocket.onmessage = function(e) { console.log(e.data); } 

游戏通信的完整代码示例超出了本文的范围，但你绝对应该查看我几个月前制作的教程。在其中，我详细介绍了如何使用 Node.js 和 WebSockets 创建实时多人游戏。

使用本地存储和应用程序缓存离线玩游戏

在 Web 上创建游戏很好，但如果你想离线玩游戏怎么办？或者，如果玩家在激动人心的游戏过程中网络连接中断怎么办？如今，大多数开放式 Web 游戏在网络连接失败时最糟糕的情况是停止工作，最好的情况是停止向你的服务器发送数据并保存玩家数据。当你的玩家刷新游戏所在的页面时，他们只会看到一个空白页面，并且他们在离线时取得的所有努力都会丢失。这可能不会让你的玩家感到高兴，而不高兴的玩家并不理想。

今天有一些可用的解决方案可以帮助解决这些问题。第一个是 应用程序缓存，它允许你使用缓存清单声明你希望浏览器缓存以供离线使用的特定资源（如 HTML、CSS、图像和 JavaScript）。不仅如此，浏览器在联机时还会使用文件的缓存版本来加快加载过程。

你可以通过使用 <html> 元素的 manifest 属性在你的游戏中包含缓存清单。

<html manifest="example.appcache"> <h1>Application Cache Example</h1> </html> 

编写缓存清单很简单，你需要遵循简单的格式来声明要缓存的文件。例如，下面的清单在联机时查找 /example/bar，如果你的玩家离线或遇到网络问题，则回退到本地缓存的 example.html 文件。

CACHE MANIFEST FALLBACK: example/bar/ example.html 

缓存清单还有更多内容，因此我建议你阅读文档以详细了解它。

你可以使用的另一种技术是在本地存储玩家的游戏数据，并定期将其与游戏服务器同步。通常，你无法在浏览器中存储足够的数据来实现此目的（例如使用 cookie），但使用 本地存储 和 IndexedDB，你现在可以以结构化的方式存储许多兆字节的数据。

你还可以向你的游戏中添加功能，以便在玩家的网络连接断开时收到警报。 navigator.onLine 属性 允许你使用 JavaScript 查看你的玩家当前是否联机。你还可以使用 offline 和 online 事件 在连接发生变化时触发游戏的自动行为，例如停止所有 WebSockets 通信并将玩家数据缓存到本地，直到连接恢复。

使用 WebRT 创建原生操作系统应用程序

Mozilla Labs 应用项目更深远的一个方面是集成了 Web 运行时 (WebRT)。这允许玩家“原生”地安装你的游戏到他们选择的操作系统（目前是 Windows、Mac 和 Android），并像标准操作系统应用程序一样显示启动图标。

WebRT 还使用以应用为中心的 User Agent（与 Firefox 等以浏览器为中心的 User Agent 相反）运行你的游戏，并使用与玩家用于浏览的普通 Firefox 不同的用户配置文件和操作系统进程运行你的游戏。

WebRT 能够脱离到另一个进程并移除所有浏览器 UI 的能力使游戏体验更加出色。在 Mac 上的 Dock 中拥有一个启动你自己的游戏的“原生”窗口的图标，并且没有任何浏览器痕迹或感觉，这是一种独特的体验。

对于开发者来说，这有点像魔法。它让你摆脱了游戏仅仅是“华丽的网站”的束缚，而是将其转变为一个应用程序，一种独一无二的体验。请记住我的话，这将是网络上5分钟益智游戏向拥有主机级体验的专业级游戏的转变的转折点。

好消息是，在你的游戏中启用WebRT只需要创建一个应用清单，并通过JavaScript调用navigator.mozApps.install 方法。

这是一个来自Rawkets游戏的应用清单示例

{ "name":"Rawkets", "developer": { "name":"Rob Hawkes", "url":"http://rawkes.com" }, "description":"Space shooter game.", "icons": { "16": "/style/img/icon-16.png", "48": "/style/img/icon-48.png", "128": "/style/img/icon-128.png" }, "launch_path": "/index.html", "installs_allowed_from": ["*"] } 

正如你所看到的，它是一个简单的JSON结构。然后你需要在调用navigator.mozApps.install 方法时传递该清单文件。

function installCallback(result) { // great - display a message, or redirect to a launch page } function errorCallback(result) { // whoops - result.code and result.message have details } navigator.mozApps.install( "http://rawkets.dev:8000/manifest.webapp", installCallback, errorCallback ) 

这是最基本的实现方式，它会导致一个面板在玩家的浏览器中弹出，询问他们是否要安装你的游戏，以及他们是否希望该安装成为一个原生应用（就像上面的截图一样）。

通过Mozilla Labs Apps项目将你的热情转化为收益

最后，关于Apps项目我想讨论的最后一件事是如何从你的游戏中赚钱。说实话，如果你不能从中谋生，那么你很难长时间坚持下去。

对于Mozilla应用商店，我们使用PayPal作为支付提供商。你只需要在商店里设置一个价格，剩下的事情就会自动发生，当人们开始购买你的游戏时——你将开始在你的PayPal账户中收到款项。

将来，你将能够在自己的网站或其他商店提供你的游戏，并在那里收费。这意味着你将能够使用自己的支付提供商。

初探皮毛

这些技术在使用开放技术在网络上创建游戏方面仅仅是触及了皮毛。在Mozilla，我们正在努力为你提供这些API和服务，以帮助让网络成为一个更适合游戏的场所。2012年将是游戏规则的改变者，这是肯定的（双关语）。

请关注此博客，因为随着我们的游戏技术和Apps项目的成熟，我们一定会发布更多更新和指南。

同时，以下是一些获取有关Mozilla Labs Apps项目和Mozilla游戏开发的额外信息的资源：

• Mozilla Labs Apps项目开发者文档
• 使用Apps项目开发游戏的文档
• 关于Gamepad和鼠标锁定API的博客文章
• Mozilla Paladin团队的Wiki页面。这些家伙正在开发Gamepad和鼠标锁定API，以及其他很棒的东西。