javascriptのボールがhtmlキャンバスでバウンス

Question

私は4つの壁からボールを​​バウンスするjavascriptファイルを使って作業しています。私はそのため私は実行取得されていない場合

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
var ballRadius = 10; 
var x = canvas.width/2; 
var y = canvas.height-30; 
var dx = 2; 
var dy = -2; 
if(dx>0){ 
    alert("dx is greater than 0"); 
} 
if(dx<0){ 
    alert("dx is less than 0"); 
} 
function drawBall() { 
    ctx.beginPath(); 
    ctx.arc(x, y, ballRadius, 0, Math.PI*2); 
    ctx.fillStyle = "#0095DD"; 
    ctx.fill(); 
    ctx.closePath(); 
} 
function draw() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    drawBall(); 
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { 
     dx = -dx; 
    } 
    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { 
     dy = -dy; 
    } 
    x += dx; 
    y += dy; 
} 
setInterval(draw, 10); 

Answer 1

あなたはあなたのかどうかを確認なぜ私にはわからない二つの連続IFSをしようとしているが、第二のです...それが壁に当たったボールの色を変更したいですループ外のステートメントif文は1回だけチェックされます。初期条件では、dx> 0であり、これは1つの警告文を呼び出します。しかし、 "if"ブロックは決して再び呼び出されません。

if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { 
    dx = -dx; 
//######## NEW CODE ############# 
    if (dx > 0) { 
     alert('Greater than zero'); 
    } else { 
     alert('Less than zero'); 
    } 
//################################ 

} 
if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { 
    dy = -dy; 
} 

Answer 2

ボールが方向を変えるたびに更新されるcolorが追加されました。

color = '#' + Math.round(Math.random() * 15000000).toString(16); 

素晴らしい作品：https://jsfiddle.net/hsj8cvko/

Answer 3

私は多分canvas.heightがballRadiusはその後、第二の部分は動作しませんよりも少ないと思います。