球的物理行为不正确

我试图建立一个游戏，你有一个cannnon形象，将朝着你的鼠标点不断，并点击，将在大炮的方向开火一球。我理解，对于球运动数学应该是这样：VX = -VI * COS（θ）VY = VI *罪（θ）。我得到的图像向将鼠标指向，但到时的球，似乎（我）在随机的方向走。代码段：球的物理行为不正确

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>

来源

2017-06-13 kcode

你忘了改造degree角度回一个radians角度。 Math.cos(degree);Math.sin(degree);确实会返回随机似乎结果。

当然，你必须扭转

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)，这迫使在速度计算交换罪和cos。

来源

2017-06-13 06:19:22 LutzL

球的物理行为不正确

回答

相关问题