javascript - 使 Canvas 球平稳移动

我写了一个多人乒乓球游戏，但由于滞后约60毫秒，我的弹跳球无法平稳移动。 The game itself is available here，但是由于它仅适用于chrome，并且网站本身是用我的母语编写的(显然，您也需要两个浏览器才能使其正常工作)，因此这是问题的jsfiddle:

http://jsfiddle.net/yc6Lb/75/

正如您在 fiddle 中看到的那样，定义了dx和dy，并将每秒刷新次数定义为speed。我需要这三个变量保持不变(我知道它们导致球无法平稳移动)。

现在的问题是:是否有任何技巧可以不触碰这些变量，而是使球看起来像平稳移动？我正在考虑渲染球的新位置+使用50％的不透明度渲染球的先前位置，但我尚未对其进行测试。还有其他解决方案吗？

最佳答案

我认为，就像@Jason所说的那样，您可以在动画中实现所需的精确步长(例如，使用animationFrame)，并分别处理获取远程信息的问题。
但是，为了快速修复，您可以使用我有时使用的技巧:通过清除具有较低不透明度的context2d来产生跟踪/阴影效果。
因此，清除函数变为:

function clear() {
  cxt.globalAlpha=0.3;
  cxt.fillStyle='#FFFFFF';
  cxt.fillRect(0, 0, WIDTH, HEIGHT);
  cxt.globalAlpha=1;
}

那么您一定不要在draw()函数中清除，并在draw循环中调用clear()。

我更新了你的 fiddle :

http://jsfiddle.net/gamealchemist/yc6Lb/86/

玩alpha以获得所需的效果。

Rq:您可能希望完全不透明地清除屏幕的某些部分(例如score)，并仅在 Canvas 的动画部分使用较低的不透明性。