javascript - 使帆布球平稳移动

Question

我写了一个多人乒乓球游戏，但由于大约 60 毫秒的延迟，我的弹跳球移动不顺畅。游戏本身可在此处获得，但由于它仅适用于 chrome，并且该网站本身是用我的母语编写的（您显然需要两个浏览器才能使其工作），这里是问题的 jsfiddle：

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

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

score 3 · Accepted Answer

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

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

这是一个漂亮的代码版本：http: //jsfiddle.net/neuroflux/Ey9uz/1/
不客气！

score 3 · Accepted Answer

我认为，正如@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 ：您可能希望以完全不透明度清除屏幕的某些部分（如乐谱），并仅在画布的动画部分使用较低的不透明度。

score 0 · Accepted Answer

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

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

score -1 · Accepted Answer

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

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

你可能还需要一个requestAnimationFrame 的 polyfill才能让它在所有浏览器上运行。

4 回答 4