爲什麼我的比賽中的球不停在邊界並反彈回來？

我正在製作一個簡單的pong遊戲，並且我希望球只是圍繞HTML5畫布反彈，但保持界限。它從右邊界和底部邊界正確地反彈，但進入頂部和左邊界一點點。爲什麼我的比賽中的球不停在邊界並反彈回來？

代碼：

if(ballY<=0){ 
    ballSpeedY = -ballSpeedY; 
    } 

    else if(ballY>=HEIGHT-10){ 
    ballSpeedY = -ballSpeedY; 
    } 




    if(ballX >= WIDTH-10){ 

     ballSpeedX = -ballSpeedX; 

    } 


    else if(ballX <= 0){ 

     ballSpeedX = -ballSpeedX; 

    }

在這裏，我改變球的速度，如果它是邊界附近。爲了使它正常工作，我必須將if語句中的數字更改爲8而不是0.爲什麼？ Here是JFiddle。我可以通過將0更改爲8來解決問題，但我想知道爲什麼會發生這種情況。

來源

2016-10-14 Nick Solonko

它發生在您的畫布的所有四面，但是在右邊和底部分別有ballX >= WIDTH-10和。

您需要對其他方面也一樣，如頂部的ballY <= 10和頂部的ballX <= 10。

發生這種情況的原因很簡單 - 你的球座標從它的中心算起。那是你球的0, 0，就像你的矩形的0, 0是左上角。

當你說ballX <= 0這意味着球將不得不觸及與中心點的邊界，因爲它必須進入你的左邊界。

來源

2016-10-15 00:10:28

@ RokoC.Buljan我增加了速度x3並在左側和頂部添加了10px緩衝區 - 似乎可以工作[https://jsfiddle.net/4y3joq2w/1/] –

Woops對不起我的壞！我錯過了你的恢復點 –

哦，我現在明白了。我一直認爲座標是矩形中的左上角。 –

正如答案中所指出的那樣，球從中心被拉出來，調整左邊和頂端測試來解釋這一點幾乎可以阻止球進入牆內。但是如果你將畫布的寬度改爲799並觀察右邊的反彈，你會看到問題，球會進入牆壁4個像素，這只是運氣。

您移動球在x方向上5個像素，然後測試其爲牆壁

ballX += ballSpeedX; 
if(ballX >= width - 10){ 
    ballSpeedX = -ballSpeedX; 
}

如果寬度= 100，最後一個球的位置是89添加5，得到94。這將導致ballSpeed被反轉，但球仍然會在94（4個像素到遠）

當你做一個反彈，你需要照顧幀之間的時間。球在框架的開始或結束時很少撞到牆上，但在框架內的某個時候。在這個時候，它可能已經從牆上移開了很多像素。

正確的做法是當球撞到牆上然後將它從牆上移開時正確的數量。這是因爲距離入牆是一樣的，因爲它會都搬走的距離直線運動很簡單..

ballX += ballSpeedX; 
if(ballX >= width - 10){ 
    var dist = ballX - (width - 10); // how far into the wall 
    ballX = (width - 10) - dist; // the distance into the wall is the distance 
           // the ball has moved away from the wall 
    ballSpeedX = -ballSpeedX; 
}

同爲左側

if(ballX <= 10){ 
    var dist = 10 - ballX; // how far into the wall 
    ballX = 10 + dist; // the distance into the wall is the distance 
         // the ball has moved away from the wall 
    ballSpeedX = -ballSpeedX; 
}

，做同樣的頂部和底部。

來源

2016-10-15 19:04:22 Blindman67

爲什麼我的比賽中的球不停在邊界並反彈回來？

回答

相關問題