Javascriptのボールが無限に前後にバウンス

Question

私はキャンバスにボールを描き、画面の左右の枠線の間を無期限に前後にバウンドする単純なJS関数を書いています。私は現在、それを左から始めて右に行っています。どのように私はそれを現在持っている、それは右に行くが、右端につかまります。それは跳ね返ることはありません。任意のヒント？

if(x<htmlCanvas.width) 
    x+=dx 
if(x>htmlCanvas.width) 
    x-=dx; 

これに：この

 var dx=4; 
     var dy=4; 
     var y=150; 
     var x=10; 
     function draw(){ 
      context= myCanvas.getContext('2d'); 
      context.clearRect(0,0,htmlCanvas.width,htmlCanvas.height); 
      context.beginPath(); 
      context.fillStyle="#0000ff"; 
      context.arc(x,y,50,0,Math.PI*2,true); 
      context.closePath(); 
      context.fill(); 
      if(x<htmlCanvas.width) 
      x+=dx 
      if(x>htmlCanvas.width) 
      x-=dx; 
     } 
setInterval(draw,10); 

Answer 1

変更

// move the ball 
x += dx; 

if (x > htmlCanvas.width - 50) { 
    // if we hit the right edge, get back in bounds 
    x = htmlCanvas.width - 50; 
    // and reverse direction 
    dx *= -1; 
} else if (x < 50) { 
    // if we hit the left edge, get back in bounds 
    x = 50; 
    // and reverse direction 
    dx *= -1; 
}