javascript - 在javascript中提高球的速度

Question

我想做的只是让球从墙上反弹。一切正常，除了我希望能够提高移动速度这一事实。从字面上看，速度是将多少“x 值”添加到球的当前位置(以 px 为单位)。问题是，当我增加 var speed 时，球会浮出界外，因为反弹是由球的界线和当前位置之间的差异来检查的。

------------------------------------更新-------- ----------------------------------

我已经使用了 Mekka 建议的技术，但仍然做错了。球不再漂浮在外面，但是有东西将它“推出”边界几个像素/“不让球漂浮几个像素到达边界”。

我的新代码如下所示:

 // the bounds-describing object
var border={ 
    X:[8,302], // left and right borders in px 
    Y:[8,302], // top and bottom borders in px         
    indX:1, //border index for array Х 
    indY:0, //border index for array Y
    changeInd:function(n){return this[n] = +!this[n]; } // function to change the index
};


   if($("#ball").position().left + speed > border.X[1] || $("#ball").position().left + speed < border.X[0]){

                var distX = "+=" + (border.X[border.indX] - $("#ball").position().left);
                var distY = "-=" + ((border.X[border.indX] - $("#ball").position().left) * k);   

                $("#ball").css("left", distX);
                $("#ball").css("top", distY);

                border.changeInd("indX");
                speed = -speed;                    
   }

   if($("#ball").position().top + k > border.Y[1] || $("#ball").position().top + k < border.Y[0]){

                var distX = "+=" + ((border.Y[border.indY] - $("#ball").position().top) / k);
                var distY = "+=" + (border.Y[border.indY] - $("#ball").position().top);   

                $("#ball").css("left", distX);
                $("#ball").css("top", distY);

                border.changeInd("indY");

                k = -k;

    }

另一个问题是我的代码的数学计算有时不正确，我绝对想不通是什么原因。要测试它，请尝试以不同的速度旋转 45 度。 问题是:我怎样才能改进“碰撞检查”过程，甚至应用其他一些技术来做到这一点？ 整个代码可以在这里找到: http://jsfiddle.net/au99f/16/

Answer 1

你非常接近!答案实际上已在您的问题中暗示。您当前使用到边界的距离的绝对值来确定何时改变方向。这定义了一个“魔法区”，球可以在其中改变大约 6 像素宽的方向(假设您的速度为 3)。当您将速度提高到更高的值(例如 10)时，您可以直接跳过这个魔法区。

执行此操作的更好方法是测试下一次跳跃是否会使球完全出界。所以这个检查不是基于常数(比如 3)，而是基于球本身的速度。您还可以查看球将出界多少，以确定将球向相反方向移动多远。换句话说，如果您的速度是 10，并且球在第 8 步距右边缘 3 个像素，那么在第 9 步，球将距右边缘 7 个像素，向左移动。警惕边缘情况(球可能恰好落在边界上)。