javascript balle rebondissant en toile html

Question

Je travaille avec un fichier javascript qui rebondit une balle à partir de quatre murs. Je veux changer la couleur de la balle quand il frappe le mur ... pour que je suis en train deux ifs consécutives, mais la seconde si l'on ne s'exécuter je ne sais pas pourquoi

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

Vous vérifiez votre si déclarations en dehors de la boucle. Les instructions if ne sont vérifiées qu'une seule fois. Dans les conditions initiales, dx> 0, qui appelle une instruction d'alerte. Mais les blocs "if" ne sont jamais rappelés.

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

ajouté un color var qui met à jour chaque fois que le ballon change de direction.

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

Fonctionne très bien: https://jsfiddle.net/hsj8cvko/

Answer 3

Je pense que canvas.height est peut-être moins ballRadius alors la 2ème partie ne fonctionnera pas.