javascript мяч подпрыгивая в HTML-холсте

Question

javascript мяч подпрыгивая в HTML-холсте

1

Я работаю с файлом 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);

nitish roy 10 сен. 2017, в 21:34

Источник

0

Вы уверены, что не можете использовать else
adeneo 10 сен. 2017, в 18:38
0

я пробовал еще ... но это не работает
nitish roy 10 сен. 2017, в 18:42

Теги:

javascript

canvas

3 ответа

Ещё вопросы

Вы уверены, что не можете использовать else
я пробовал еще ... но это не работает

Spark_Chicken · Answer 1 · 2017-09-10T17-31-00.000Z

Вы проверяете свои операторы 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;
}

да, вы правы. я полностью забыл это. СПАСИБО

Amit Sheen · Answer 2 · 2017-09-10T16-57-00.000Z

Просто добавлен color var, который обновляется всякий раз, когда мяч меняет направление.

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

Отлично работает: https://jsfiddle.net/hsj8cvko/

user3013823 · Answer 3 · 2017-09-10T16-43-00.000Z

Я думаю, может быть, canvas.height меньше, чем ballRadius, тогда вторая часть не будет работать.