Question

我正在使用javascript文件从四面墙反弹球。我想在球撞到墙壁时改变球的颜色...因为我正在尝试两个连续的ifs但第二个如果没有被执行我不知道为什么

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”块永远不会被再次调用。

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 var，只要球改变方向就会更新。

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

效果很好：https://jsfiddle.net/hsj8cvko/

Answer 3

我想也许canvas.height比ballRadius还要小，然后第二部分才能胜任。

javascript球在html画布中弹跳

3 个答案: