RaphaelJS - 同步动画
我的乒乓球的生成非常稳定，但是 费率动态变化。所以在给定的一秒内，可能有 1 次乒乓球 正在绘制并在屏幕上平移的球（不断地 从左到右），或 50。
我有一个乒乓球拍，它根据这些的生成做出响应 球，它应该“抓住”每一个球 被送往目的地。 x 坐标始终是 相同，因为乒乓球拍永远不会移动，但 y 坐标是 随机生成的。
这是一个与我非常相似（如果不相同）的例子 正在做：http://www.youtube.com/watch?v=HeWfkPeDQbY
我有很多这样的代码已经写好了，但我担心我的设计 接球是不正确/低效的。它有效，但是 桨很容易与正在移动的球不同步 扔向它。
我目前这样做的方法是将每个球对象放入 全局数组，球拍从该队列中弹出下一个球， 使用基本算术来计算所需的速度 转换为下一个球的 y 坐标。
有没有更有效的方法来做到这一点？
I have pong balls that are being generated very consistently, but the
rates change dynamically. So in a given second, there could be 1 pong
ball that's being drawn and translating across the screen (constantly
from left to right), or 50.
I have a pong paddle that responds based on the generation of these
balls, and it's supposed to "catch" every one of the balls that's
being sent towards its destination. The x coordinate is always the
same, because the pong paddle never moves, but the y coordinate is
randomly generated.
Here's an extremely similar (if not identical) example of what I'm
doing: http://www.youtube.com/watch?v=HeWfkPeDQbY
I have a lot of this code already written, but I'm afraid my design
for catching the balls is incorrect/inefficient. It works, but the
paddle very easily becomes out of sync with the balls that are being
thrown towards it.
The way I'm currently doing this is by putting each ball object into a
global array, and the paddle pops the next ball off of this queue and
uses basic arithmetic to calculate the speed at which it needs to
translate to the y coordinate of the next ball.
Is there a more efficient way of doing this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我假设问题是每个球（和球拍）的运动是由单独的计时器控制的。由于无法保证 js 计时器的准确性，因此无法保证有多少计时器会进行交互。
纠正该问题的两种主要方法是：
不要使用 raphaeljs 动画原语，而是使用 setTimer 自己实现同步动画，同步更新每个球（和球拍）的位置。然后，任何计时器卡顿都会一致地应用于宇宙中的所有元素。
使用反馈来修正桨位置，例如，通过使用特殊的 setTimer 定期查看桨与所需位置的距离，并在必要时调用桨动画上的 .stop() 以便 使用更积极的参数重新执行，缩小差距。
I'll assume the issue is that the motion of each ball (and the paddle) is controlled by a separate timer. Since there are no guarantees about the exactness of js timers, there are really no guarantees about how many, many timers will interact.
Two broad approaches to correct the problem are:
Instead of using raphaeljs animation primitives, implement a synchronous animation yourself with setTimer, updating the position of each ball (and the paddle) in sync. Then any timer-stutters apply consistently across all elements in your universe.
Use feedback to course-correct the paddle position, e.g. by having a special setTimer that periodically looks at how close the paddle is to where it needs to be, and if necessary calls .stop() on the paddle's animation in order to re-execute with more aggressive parameters, closing the gap.