HTML5教程：用HTML5实现twitch3D游戏（3）

HTML5教程：用HTML5实现twitch3D游戏（3）

       如果你是刚接触 3D, WebGL 和 three.js将会显得比较艰涩，因为这里面会有很多陌生的术语和概念。由于我们都不熟悉3D，所以在光线和材质的调整上花费了不少时间。

       我们反复尝试了各种调整，反复地刷新，体验效果。当看到Mr.doob 在RO.ME项目上的演讲 (需翻墙)时，才想到有个更好的办法，那就是在合成最终效果前把各个部件先分离成单独的小demo以便于调节效果。

网络通信

     我们想试下创建一个能及时响应低延时，挑战玩家反应的游戏是否可行，air hockey看起来很合适。移动冰槌和冰球需要良好的网络性能。而只要网络稍有延时，这个游戏的可玩性就大大降低。幸好，WebSocket提供了很好的性能。

     我们的网络方案相对简单，但这已经路以证明我们的观点：用HTML5来实现互动(twitch，不知怎么翻译)游戏是可行的！，网络方案如下：

• 客户端发送玩家的冰槌位置给服务端.
• 服务端基于之前的位置，计算两玩家的冰槌的速度，然后计算是否有碰撞、冰球新的速度及位置。
• 服务器发送最新的冰球及冰槌位置给两个客户端,客户端更新界面。

      当然，延时会使这个处理过程变得复杂。如果从服务端到客户端的数据包需要50毫秒，那么玩家最终看到的界面就是50毫秒前的，这使得玩家很难击中冰球。针对此问题我们的解决方法是：

• 客户端计算自己与服务器之前的延时时长，比如50毫秒。
• 当客户端从服务器接收到冰球的位置和速度时，使用与服务器相同的计算方法算出冰球50毫秒后的位置与速度。
• 然后客户端把冰球显示到预算出来的位置

如此，玩家就不需要自己计算延时所导致的位置误差来击中冰球了。

      还有很多流行的以验证有效的滞后补偿技术可以提高游戏的可玩性。不过我们的demo里仅使用上述方法–90年代的游戏联网技术，因为这已经足以让我们创建一个有趣的、实时的、浏览器上的多玩家游戏了。

   另外，值得一提的是，一切应该以服务端数据为准，所有的实时多人游戏里都是如此防范作弊的。