在javascript中提高球的速度

我想要做的只是讓球從牆上反彈。除了我希望能夠提高移動速度的事實之外，一切都可以正常工作。從字面上看，速度是多少'x值'被添加（以px爲單位）到球的當前位置。問題是，當我增加var speed時，球浮出界限，因爲籃板的邊界和當前位置之間的差異來檢查籃板。在javascript中提高球的速度

-------------------------------------- update ------- ----------------------------------

我已經使用了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/

來源

2014-04-12 goodmove

你非常接近！答案實際上暗示在你的問題。您當前正在使用到邊界的距離的絕對值來確定何時更改方向。這定義了一個「魔術區」，球可以改變大約6個像素的方向（給定3的速度）。當你將速度提升到更高的位置時（比如10），你可以跳過這個魔法區域。

更好的方法是測試下一次跳躍是否會使球完全脫離邊界。所以這個檢查不是基於常數（如3），而是基於球本身的速度。你也可以看到球有多少走出界限，以確定球向相反方向移動多遠。換句話說，如果你的速度是10，並且球在步驟8的右邊緣是3個像素，那麼在步驟9，球將從右邊緣7個像素向左移動。警惕邊緣情況（球可能完全落在邊界上）。

來源

2014-04-12 15:24:34 Mekka

在javascript中提高球的速度

回答

相關問題