javascript 球在 html Canvas 中弹跳

Question

我正在处理一个 javascript 文件，该文件从四面墙上弹回一个球。我想在球撞到墙上时改变球的颜色...为此我正在尝试连续两个 ifs 但第二个 if 没有被执行我不知道为什么

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

您在循环外检查您的 if 语句。 if 语句只检查一次。在初始条件下，dx>0，调用一个警告语句。但是“if” block 再也不会被调用。

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