Javascript：击球矩形Y轴响应

我正在用javascript做一个乒乓球游戏，当球碰到球拍时，我很难创建一个真实的Y轴反应

现在我有一个方向速度dx和dy，我当前的代码只是反转了dy的方向。问题是，球会在同一个方向上来回弹跳，不管它在球拍上的什么地方被击中

我想创建一个现实的方法，根据它在球拍上被击中的位置，确定球的方向。因此，如果它正好在中心被击中，那么它就会反弹回它原来的方向，但是如果它在上边缘附近被击中，它就会向下反弹，等等

---

我很难找到这种方法的起点，有人能给我指引正确的方向吗？

想象一下，你计算出球拍中心和击球点之间的距离，并称之为

d

。让我们假设

d

在球击到桨叶中心上方时有一个正值。您现在可以将

d*-0.1

添加到球的Y速度，球将开始改变方向。现在只要调整参数，告诉我它是否有效

var canvas=document.querySelector（'canvas'）；
var resize=函数（）{
canvas.width=内部宽度；
canvas.height=内部高度；
};
调整大小（）；
var ctx=canvas.getContext（'2d'）；
变量球={
尺寸：3，
x:1，
y:canvas.height/2，
vx:2，
vy:0
};
可变桨={
身高：40，
宽度：3，
x:canvas.width/2，
y:canvas.height/2
};
addEventListener（'mousemove'，函数（e）{
桨叶y=e.clientY-（桨叶高度/2）；
});
变量循环=函数（）{
调整大小（）；
ball.x+=ball.vx；
ball.y+=ball.vy；
如果（ball.x>canvas.width | | ball.x<0）ball.vx*=-1；//水平墙命中
如果（ball.y>canvas.height | | ball.y<0）ball.vy*=-1；//垂直墙命中
如果（ball.x>=桨.x&&ball.x=桨.y&&ball.y想象你计算桨的中心和球击中的点之间的距离，并称之为
d
。让我们假设当球击中桨的中心上方时
d
有一个正值。现在你可以将
d*-0.1
添加到ba的y速度上它将开始改变方向。现在只需调整参数并告诉我它是否有效


var canvas=document.querySelector（'canvas'）；
var resize=函数（）{
canvas.width=内部宽度；
canvas.height=内部高度；
};
调整大小（）；
var ctx=canvas.getContext（'2d'）；
变量球={
尺寸：3，
x:1，
y:canvas.height/2，
vx:2，
vy:0
};
可变桨={
身高：40，
宽度：3，
x:canvas.width/2，
y:canvas.height/2
};
addEventListener（'mousemove'，函数（e）{
桨叶y=e.clientY-（桨叶高度/2）；
});
变量循环=函数（）{
调整大小（）；
ball.x+=ball.vx；
ball.y+=ball.vy；
如果（ball.x>canvas.width | | ball.x<0）ball.vx*=-1；//水平墙命中
如果（ball.y>canvas.height | | ball.y<0）ball.vy*=-1；//垂直墙命中
如果（ball.x>=palle.x&&ball.x=palle.y&&ball.y了解三角形的几何图形将对您有所帮助，但请向我们展示您迄今为止所做的尝试。经过激烈的搜索，我在这里找到了一篇很棒的帖子：准确地解释了我要找的！了解三角形的几何图形将对您有所帮助，但请向我们展示您迄今为止所做的尝试。Af经过激烈的搜索，我在这里找到了一个很棒的帖子：准确地解释了我要找的东西！这真的很有用，干得好！我已经计算出了x轴的逻辑，但是我被搞糊涂了，因为y轴让我糊涂了。谢谢！这真的很有用，干得好！我已经计算出了x轴的逻辑，但是我被搞糊涂了，因为y轴被弄糊涂了g给我，谢谢！