javascript球在html画布中反弹

我正在使用一个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);

var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var-ballRadius=10；
var x=canvas.width/2；
变量y=画布高度-30；
var-dx=2；
var-dy=-2；
如果（dx>0）{
警报（“dx大于0”）；
}
if（dx canvas.width-ballRadius | | x+dxcanvas.height-ballRadius | | y+dy

检查循环外的if语句。if语句只检查一次。在初始条件下，dx>0，这将调用一条警报语句。但是“如果”块再也不会被调用了

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;
}

if（x+dx>canvas.width-ballRadius | | x+dx0）{
警报（“大于零”）；
}否则{
警报（“小于零”）；
}
//################################
}
如果（y+dy>canvas.height-ballRadius | | y+dy

刚刚添加了一个

颜色

变量，每当球改变方向时该变量就会更新。

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

---

很好用：

我想可能是canvas.height小于ballRadius，那么第二部分就不起作用了。

你确定你不能用

或者
代替标题，我尝试过其他方法……但是不起作用。是的，你是对的。我完全忘记了。谢谢