Javascript 球的物理性能不正常

我正在尝试建立一个游戏，在这个游戏中，你有一个cannnon图像，它会不断指向你的鼠标，点击，就会朝着大炮的方向发射一个球。我知道球运动的数学应该是：vx=-vi*cos（θ）vy=vi*sin（θ）。我让图像指向鼠标，但当它发射球时，它（对我来说）似乎朝着随机方向移动。 代码段：

var-ball={
x:20，
y:20，
vx:0，
vy:0
}
设定间隔（移动球，100）；
变异度；
功能旋转（e、elt）{
var offset=elt.offset（）；
var center_x=（offset.left）+（elt.width（）/2）；
var center_y=（offset.top）+（elt.height（）/2）；
var mouse_x=e.pageX；
var mouse_y=e.pageY；
var radians=Math.atan2（鼠标x-中心x，鼠标y-中心y）；
度=（弧度*（180/数学π）*-1）；
如果（度数<90&&度数>0）{
度=90
}
如果（度>-180&&度<0）{
学位=179
}
$（elt）.css（'-moz-transform'，'rotate（'+degree+'deg'）；
$（elt）.css（'-webkit transform'，'rotate（'+degree+'deg'）；
$（elt）.css（'-o-transform'，'rotate（'+degree+'deg'）；
$（elt）.css（'-ms transform'，'rotate（'+degree+'deg'）；
document.getElementById（'out'）.innerHTML=degree；
}
document.onmousemove=函数（e）{
旋转（e，$（'img'））；
}
document.onclick=函数（）{
document.getElementById（'ball'）.style.right='20px'；
document.getElementById（'ball'）.style.bottom='20px'；
ball.vx=5*Math.cos（度）；
ball.vy=5*Math.sin（度）；
}
函数move_ball（）{
ball.x=parseInt（document.getElementById（'ball'）.style.right.substring（0，document.getElementById（'ball'）.style.right.length-3））；
ball.y=parseInt（document.getElementById（'ball'）.style.bottom.substring（0，document.getElementById（'ball'）.style.bottom.length-3））；
ball.x+=Math.abs（ball.vx）；
ball.y+=Math.abs（ball.vy*-1）；
document.getElementById（'ball'）.style.right=ball.x.toString（）+'px'；
document.getElementById（'ball'）.style.bottom=ball.y.toString（）+'px'；
}
/*
vx=-vi*cos（θ）
vy=vi*sin（θ）
θ=精灵方向
*/

#img{
宽度：20px；
高度：40px；
位置：绝对位置；
底部：15px；
右：15px；
}
#球{
宽度：10px；
高度：10px；
位置：绝对位置；
底部：20px；
右：20px；
}

---

您忘记将

度

角度转换回

弧度

角度<代码>数学cos（学位）

Math.sin（学位）

确实会返回看似随机的结果

---

当然，您必须反向计算

 degree = -180/pi*atan2(x,y)

如

请注意，获取笛卡尔点（x，y）角度的调用约定是

atan2（y，x）

，而您使用

atan2（x，y）

，这将强制在速度计算中交换sin和cos

  var radians = -degree*Math.PI/180;
  ball.vx = 5 * Math.sin(radians);
  ball.vy = 5 * Math.cos(radians);