javascript - 使 Canvas 球平稳移动

Question

我写了一个多人乒乓球游戏，但由于大约 60 毫秒的延迟，我的弹跳球移动不流畅。 The game itself is available here , 但由于它只适用于 chrome，而且网站本身是用我的母语编写的(而且你显然需要两个浏览器才能让它工作)，这里是问题的 jsfiddle:

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

正如您在 fiddle 中所见，定义了 dx 和 dy，每秒刷新次数定义为 speed。我需要这三个变量保持不变(我知道它们会导致球移动不顺畅)。

现在的问题是:是否有任何技巧可以不触及这些变量，但让球看起来像在平稳移动？我正在考虑渲染球的新位置 + 以 50% 的不透明度渲染球的先前位置，但我还没有测试它。这个问题还有其他解决方案吗？

Answer 1

我认为，正如@Jason 所说，您可以在动画中实现尽可能精确的步骤(例如使用 animationFrame)，并单独处理获取远程信息的问题。
但是，为了快速修复，您可以使用我有时使用的技巧:通过清除不透明度较低的 context2d 来产生轨迹/阴影效果。
所以 clear 函数变成了:

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

那么一定不要在draw()函数中clear，在draw循环中调用clear()

我更新了你的 fiddle :

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

使用 alpha 获得您想要的效果。

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