시간 기반 동작을 사용하여 고르지 못한 움직임이 발생합니다.

Question

시간 이동을 사용하지만 여전히 고르지 않습니다. 이 코드는 공중에서 화살표로 찍은 다음 움직임의 차이를 계산하여 화살표의 회전을 결정합니다. 대부분의 경우 작동하지만 가끔은 불안해합니다.

for(i=0;i<this.arrows.length;i++){ 
     a = this.arrows[i]; 
     point0 = [a.x,a.y]; 
     x_speed = e.delta/1000*a.speed * Math.cos(a.angle * Math.PI/180); 
     y_speed = e.delta/1000*a.speed * Math.sin(a.angle * Math.PI/180); 
     a.x += x_speed; 
     a.y += y_speed; 
     a.y += a.velocity; 
     a.velocity += e.delta/1000*this.gravity; 
     alert(e.delta); 
     ang = Math.atan2(point0[1]-a.y,point0[0]-a.x); 
     ang = (ang * (180/Math.PI))+180; 
     a.rotation = ang; 
} 

Answer 1

1) 나는 aangle, ang 및 a.rotation을 사용하고있어 놀랍습니다. 나는 ang이 for 루프 전에 선언 된 var라고 추측합니다. 그러나 여기에 문제가 없습니까?

2) 전환을 피하기 위해 라디안이 아니라도, 사용할 수 있습니다.

3) 또한 속도 대 속도에 문제가있다 : 당신은 Y에 속도 (속도를 변경할 때 속도 (선 속도)를 업데이트하지 않습니다). 다음 화살표의 끝이 어디 있는지 계산하는 속도 벡터를 사용, 그냥 일반 포인트 이동과 같은 연산 속도/위치 :

••는 어쨌든 절차의 간단한 방법이있다.

그것은이 바이올린에서 잘 작동합니다 http://jsbin.com/dexaroriwixo/1/이

갱신 :

var i=0, a=null, delta_ms = 1e-3 * e.delta; 
for(i=0;i<this.arrows.length;i++){ 
     a = this.arrows[i]; 
     a.x += delta_ms*a.speedX; 
     a.y += delta_ms*a.speedY; 
     a.speedY += delta_ms*this.gravity; 
     a.speedNorm = Math.sqrt(sq(a.speedX)+sq(a.speedY)); 
} 

가 그리는 :

Arrow.prototype.draw = function(ctx) { 
    ctx.beginPath(); 
    ctx.moveTo(this.x, this.y); 
    ctx.lineTo(this.x+ this.length*this.speedX/this.speedNorm, 
       this.y+ this.length*this.speedY/this.speedNorm); 
    ctx.strokeStyle = '#F00'; 
    ctx.stroke(); 
} 

'출시'화살표로,

Arrow.prototype.launch(initialSpeed, angle) { 
    this.speedX = initialSpeed * Math.cos(angle); 
    this.speedY = initialSpeed * Math.sin(angle); 
}