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）我很惊讶你正在使用a.angle，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);
 }

使用基于时间的运动获得波涛汹涌的运动

1 个答案: