javascript球在html画布中弹跳答案

【问题标题】：javascript ball bouncing in html canvasjavascript球在html画布中弹跳
【发布时间】：2017-09-11 04:19:18
【问题描述】：

我正在处理一个 javascript 文件，它可以从四面墙上弹起一个球。我想在球撞到墙上时改变它的颜色...为此我尝试了两个连续的 if 但第二个 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);

【问题讨论】：

您确定不能使用else 代替
我已经尝试过其他...但它不起作用

标签： javascript canvas

【解决方案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;
}

【讨论】：

是的，你是对的。我完全忘记了。谢谢

【解决方案2】：

刚刚添加了一个color var，它会在球改变方向时更新。

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

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

【讨论】：

【解决方案3】：

我认为canvas.height 可能小于ballRadius，那么第二部分将不起作用。

【讨论】：