使用基于时间的移动获得起伏的移动

Getting choppy movement using time-based movement

本文关键字：移动 时间 于时间      更新时间：2023-09-26

我使用基于时间的移动，但它仍然非常波动。该代码在空中发射箭头，然后计算移动的差异，以确定箭头的旋转。它大部分时间都有效，但有时只是抖动。

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;
}

1）我很惊讶你使用了.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);
 }
相关文章：