WorldWideMaze
是一款游戏，您可以在其中使用智能手机导航滚球通过网站创建的D迷宫，以尝试达到目标点。
游戏功能丰富，使用HTML5功能。例如，
DeviceOrientation
事件从智能手机检索倾斜数据，然后通过WebSocket将其发送到PC，玩家在其中通过
WebGL
和
WebWorkers
。在本文中，我将准确解释这些特性的使用方式、整体开发过程以及优化的关键点。
设备方向
DeviceOrientation事件（
示例
）用于从智能手机检索倾斜数据。什么时候
addEventListener
与
DeviceOrientation
事件，一个回调
DeviceOrientationEvent
对象作为参数定期调用。间隔本身因使用的设备而异。例如，在iOS+Chrome和iOS+Safari中，回调大约每1/20秒调用一次，而在Android+Chrome中，它大约每1/10秒调用一次。
window.addEventListener(deviceorientation,function(e){//dosomethinghere..});
这
DeviceOrientationEvent
对象包含每个倾斜数据
X
,
Y
，和
Z
以度为单位的坐标轴（不是弧度）（
阅读更多关于HTML5Rocks的内容
）。但是，返回值也会因所使用的设备和浏览器的组合而异。实际返回值的范围如下表所示：
顶部以蓝色突出显示的值是WC规范中定义的值。以绿色突出显示的那些与这些规格相匹配，而以红色突出显示的那些则不同。令人惊讶的是，只有Android-Firefox组合返回了符合规范的值。尽管如此，在实现方面，容纳经常出现的值更有意义。WorldWideMaze因此使用iOS返回值作为标准，并针对Android设备进行相应调整。
ifandroidandevent.gammathenevent.gamma-=60
但是，这仍然不支持Nexus10。尽管Nexus10返回的值范围与其他Android设备相同，但有一个错误会颠倒beta和gamma值。这正在单独解决。（也许它默认为横向？）如此证明，即使涉及物理设备的API已设置规范，也不能保证返回的值与这些规范相匹配。因此，在所有预期设备上测试它们至关重要。这也意味着可能会输入意外的值，这需要创建变通方法。WorldWideMaze提示初次使用的玩家校准他们的设备作为其教程的第1步，但如果收到意外的倾斜值，它将无法正确校准到零位。因此，它有一个内部时间限制，如果在该时间限制内无法校准，它会提示玩家切换到键盘控制。
网络套接字
在WorldWideMaze中，您的智能手机和PC通过WebSocket连接。更准确地说，它们通过它们之间的中继服务器连接，即智能手机到服务器再到PC。这是因为WebSocket缺乏将浏览器直接相互连接的能力。（使用WebRTC数据通道允许点对点连接并消除对中继服务器的需要，但在实施时，这种方法
只能与ChromeCanary和FirefoxNightly一起使用
。）我选择使用一个名为Socket.IO(v0.9.11)的库来实现，它包括在连接超时或断开连接时重新连接的功能。我将它与NodeJS一起使用，因为这个NodeJS+Socket.IO组合在几个WebSocket实现测试中显示出最好的服务器端性能。
按数字配对
您的PC连接到服务器。 服务器给你的电脑一个随机生成的号码，并记住号码和电脑的组合。 在您的移动设备上，指定一个号码并连接到服务器。 如果指定的号码与来自连接的PC的号码相同，则您的移动设备已与该PC配对。 如果没有指定的PC，则会发生错误。 当数据从您的移动设备传入时，它会被发送到与之配对的PC，反之亦然。
您也可以改为从移动设备进行初始连接。在这种情况下，设备只是简单地颠倒过来。
标签同步
Chrome特有的TabSync功能使配对过程更加轻松。有了它，在PC上打开的页面可以在移动设备上轻松打开（反之亦然）。PC获取服务器发出的连接号，并将其附加到页面的URL中
history.replaceState
。
history.replaceState(null,null,/maze/+connectionNumber)
如果启用选项卡同步，则URL会在几秒钟后同步，并且可以在移动设备上打开相同的页面。移动设备检查打开页面的URL，如果附加了一个数字，它会立即开始连接。这消除了手动输入数字或用相机扫描