Question

我正在尝试使用jQuery中的ping pong类游戏，我想知道如何限制容器内的滑块位置。

我还需要有关如何生成球/盒以及如何使其在容器的侧壁和顶壁上弹跳的帮助。

我已经设法解决了这个问题但是我仍然在努力将滑块保留在容器内并且在弹跳球时挣扎。

任何帮助都将受到高度赞赏。 MyCodeSoFar

Answer 1

您已经提出了很多一般性问题，所以我会给您一些一般性的指示。：）

我正在尝试使用jQuery中的ping pong游戏，我想知道如何限制容器内的滑块位置？

要约束球拍，只需检查一些偏移。

要确定它是否触摸左边框，请检查其左侧偏移量。如果是0，请忽略← keydown。

要确定它是否触摸右边框，请采用左偏移并添加球拍的宽度。如果它等于游戏区域的宽度，请忽略→ keydown。

我还需要有关如何生成球/盒以及如何使其在容器的侧壁和顶壁上反弹的帮助。

由于您使用的是元素，而不是canvas，因此您可以使用CSS生成球......

#ball {
    width: 20px;
    height: 20px;
    border-radius: 20px;
}

此处的关键是border-radius等于球的width和height。

要让球反弹，请使用游戏计时器增加的x和y速度。当球与球拍或游戏区域的边缘碰撞时，翻转这些标志。为了使它更像 Pong-like ，你可以在碰到桨的某些区域时弄乱你如何修改弹跳，例如，如果它击中远边，它有一个更锐利的角度反转。

要确定球是否已经击中游戏区域的边缘，请使用与上述类似的技术。

要确定您的球是否影响了您的球拍，请使用一些碰撞检测代码。检查球的Y偏移是否高于桨的Y偏移（我假设你的桨在水平轨道上线性移动）。然后，如果满足该条件，则查看球的X偏移是否在桨的X偏移范围内（+）桨的宽度。

如果你的划桨和游戏区域永远不会改变，那么缓存这些宽度将是有益的。

Answer 2

对不起，但你的代码对我来说有点乱。无论如何，我发现像游戏这样的js pong很有趣，我调整了你的代码来做你想要的。

只需查看 this fiddle ，随时向我发送一些反馈意见。