ゲームのボールがボーダーで止まり、戻ってくるのはなぜですか？

Question

私は単純なポンゲームを作っています。私はボールを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文の数値を0ではなく8に変更する必要があります。それはなぜですか？ HereはJFiddleです。私は0から8に変更するだけで問題を解決できますが、なぜこれが起こるのか知りたいのです。

Answer 1

キャンバスの4辺すべてで発生しますが、右下にはそれぞれballX >= WIDTH-10とballY >= HEIGHT-10があります。

もう一方の側にも同じようにする必要があります。上にはballY <= 10、左にはballX <= 10のようにする必要があります。

これは簡単な理由の1つです。ボールの座標は、その中心から数えられます。あなたの球の0, 0です。長方形の0, 0が左上隅です。

あなたがballX <= 0と言うとき、ボールはその中心点との境界に触れなければならず、そのためには左端に入る必要があることを意味します。

Answer 2

Answerで指摘されているように、ボールはそのセンターから引き出され、これを考慮して左と上のテストを調整すると、ボールが壁に入るのをほとんど止めるでしょう。しかし、それはあなたが799にキャンバスの幅を変更し、あなたが問題を参照してください右のバウンスを見て、壁が4ピクセルの壁に入って行くことがない場合、ボールが壁を跳ね返ることが運を持っています。幅= 100、最後のボール位置が89である場合

あなたはこれが原因となる94を与えるために5を追加したボールにx方向に5つのピクセルずつ移動して、壁

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

のためにそれをテスト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; 
} 

と同じことを行う。..直線運動のために非常に簡単です上部と下部のために。