Я работаю с файлом 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);
Вы проверяете свои операторы 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;
}
Просто добавлен color
var, который обновляется всякий раз, когда мяч меняет направление.
color = '#' + Math.round(Math.random() * 15000000).toString(16);
Отлично работает: https://jsfiddle.net/hsj8cvko/
Я думаю, может быть, canvas.height меньше, чем ballRadius, тогда вторая часть не будет работать.
else