Question

我写了一个多人乒乓球比赛，但由于距离大约60毫秒，我的弹跳球并没有顺利进行。 The game itself is available here，但因为它仅适用于chrome，而且网站本身是用我的母语编写的（你显然需要两个浏览器才能使它工作），这里是问题的解决方法：

正如您在小提琴中看到的那样，dx和dy已定义，每秒刷新次数定义为speed。我需要这三个变量保持不变（我知道它们导致球不能顺利移动）。

现在的问题是：是否有任何技巧可以不触及这些变量，但让球看起来像是顺利移动？我正在考虑渲染球的新位置+渲染球的前一个位置，不透明度为50％，但我还没有测试它。这个问题还有其他解决办法吗？

Answer 1

这很难看，但这里有一个FPS参考资料： http://jsfiddle.net/yc6Lb/84/

特别使用requestAnimationFrame()并拥有FPS计数器。注意性能差异:)

这是美丽代码版本：http://jsfiddle.net/neuroflux/Ey9uz/1/
非常欢迎你！

Answer 2

我认为，正如@Jason所说，你可以在动画中使用你想要的精确步骤（例如使用animationFrame），并单独处理获取远程信息的问题。
但是，为了快速修复，您可以使用我有时使用的技巧：通过清除不透明度降低的context2d来获得跟踪/阴影效果。
因此明确的功能变为：

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

然后你不能在draw（）函数中清除，并在draw循环中调用clear（）。

我更新了你的小提琴：

使用alpha来获得你想要的效果。

Rq：您可能希望以完全不透明度清除屏幕的某些部分（如分数），并仅在画布的动画部分使用较低的不透明度。

Answer 3

你可以通过在每个循环中不进行2 * pi计算获得一点性能。将其舍入为静态值6.28。

您可能还想查看processing.js，这可能会加快速度。

Answer 4

你的数学没什么问题。您应该使用requestAnimationFrame。更改你的init函数，使它看起来像这样：

function init() {
  window.requestAnimationFrame(init, cxt)
  draw();  
}

您可能还需要polyfill for requestAnimationFrame才能让它在所有浏览器上运行。