使帆布球顺利移动

Question

我写了一个多人乒乓球比赛,但由于时间约为60毫秒,我的弹跳球并没有顺利进行.游戏本身在这里可用,但由于它只适用于chrome,而且网站本身是用我的母语编写的(你显然需要两个浏览器才能使它工作),这里有问题的方法:

正如您在小提琴中看到的那样,dx并且dy已定义并且每秒刷新被定义为speed.我需要这三个变量保持不变(我知道它们导致球不能顺利移动).

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

Answer 1

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

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

那么你一定不能在draw()函数中clear，并在draw循环中调用clear()。

我更新了你的小提琴：

使用 Alpha 来获得您想要的效果。

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