jQuery：限制对象的按键移动

Question

我正在尝试用 jQuery 开发乒乓球类游戏，我想知道如何限制容器内的滑块位置。

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

我已经成功地解决了这个问题，但我仍然在努力将滑块保留在容器内，并在球的弹跳上挣扎。

任何帮助将不胜感激。 MyCodeSoFar

Answer 1

抱歉，您的代码对我来说有点混乱。不管怎样，我发现像 js pong 这样的游戏的想法很有趣，我调整了你的代码来实现你的意图。

只需看看这个小提琴，并随时向我发送一些反馈。

Answer 2

您问了很多一般性问题，所以我会给您一些一般性指导。 :)

我正在尝试使用 jQuery 开发乒乓球类游戏，我想知道如何限制容器内的滑块位置？

要约束桨，只需检查一些偏移即可。

要确定它是否接触左边框，请检查它相对于左侧的偏移量。如果是 0，则忽略 ← 键。

要确定它是否接触右边框，请获取左偏移量并添加桨的宽度。如果它等于游戏区域的宽度，则忽略→按键。

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

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

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

这里的关键是 border-radius 等于 width< /code> 和球的高度。

要让球弹起，请设置 x 和 y 速度，该速度随着游戏计时器的增加而增加。当球与球拍或游戏区域边缘碰撞时，翻转这些符号。为了使其更像乒乓球，您可以在击中球拍的某些区域时修改弹跳方式，例如，如果它击中远边缘，则当它击中时它会具有更锐利的角度逆转。

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

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

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