学位的球物理表现不正常

Question

我正在尝试构建一个游戏，其中您有一个大炮图像，它会不断指向您的鼠标，并且在单击时会朝大炮的方向发射一个球。我知道球运动的数学应该是这样的：vx= -vi * cos(θ) vy= vi * sin(θ)。我得到的图像指向鼠标，但当它发射球时，（对我而言）似乎是朝着一个随机的方向前进。代码片段：

var ball = {
  x: 20,
  y: 20,
  vx: 0,
  vy: 0
}
setInterval(move_ball, 100);
var degree;

function rotate(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(mouse_x - center_x, mouse_y - center_y);
  degree = (radians * (180 / Math.PI) * -1);
  if (degree < 90 && degree > 0) {
    degree = 90
  }
  if (degree > -180 && degree < 0) {
    degree = 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 = function(e) {
  rotate(e, $('#img'));
}
document.onclick = function() {
  document.getElementById('ball').style.right = '20px';
  document.getElementById('ball').style.bottom = '20px';
  ball.vx = 5 * Math.cos(degree);
  ball.vy = 5 * Math.sin(degree);
}

function 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(θ)
θ= sprite direction
*/

#img {
  width: 20px;
  height: 40px;
  position: absolute;
  bottom: 15px;
  right: 15px;
}

#ball {
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img" src="https://lh3.googleusercontent.com/FF_QMZJ187zosdjWPzrnzJKlHl8UvtPjIJr3Uma7LEgPCz22_KN5wqJ_Auka3z3-x3YvCw=s85" />
<img id="ball" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Circle_-_black_simple_fullpage.svg/1000px-Circle_-_black_simple_fullpage.svg.png">
<div id="out"></div>

Answer 1

您忘记将 degree 角度转换回 radians 角度。 Math.cos(degree); Math.sin(degree); 确实会 return 随机出现的结果。

当然，你必须将

的全部计算倒过来

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

如

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

请注意，获取笛卡尔点 (x,y) 角度的调用约定是 atan2(y,x)，而您使用的是 atan2(x,y)，这会强制在速度计算中交换 sin 和 cos .

学位的球物理表现不正常

ball physics from degree not behaving properly

javascript

physics