Canvas перемещение объекта по оси x

Question

Есть объект он автоматически перемещается с помощью

if(object.x < 200) {
  object.x += object.speed;
}

после того как условие станет ложным мне нужно уменьшать позицию x Да, я могу написать else и уменьшать значение, но если уменьшить даже на 1, он снова начнет увеличиваться т.к значение уже будет < 200 Как мне можно уменьшать позицию x до нуля после выполнения первого условия? т.е должно получится "туда - сюда"

Answer 1

Я писал в комментах вот про это:

let ctx = canvas.getContext('2d');
let speed = 2;
let x = 0;
requestAnimationFrame(upd);

function upd(t) {

  // если координата x по модулю больше +-100 (всего длина 200)
  if (Math.abs(x-100) > 100) {

    // вычисляем новое направление: 
    //  берем скорость по модулю и умножаем на обратный знак текущей координаты
    speed = - Math.sign(x-100) * Math.abs(speed);
  }
  x += speed;
  ctx.clearRect(0,0,300,150)
  ctx.fillRect(x,0,10,10 + 5*Math.sin(t/200));
  requestAnimationFrame(upd);
}

<canvas id=canvas></canvas>

Откуда взялось -100?

я его добавляю чтобы сдвинуть все происходящее центром в начало координат.

Без этих -100 координата х будет изменятся в интервале от -100 до +100

Это нужно, чтобы делать только один if а не два, как бы было с оригинальными координатами 0 и 200, -100 переносит картину мира к началу координат, вот и весь фокус

БЛОГ НА HUSL

Canvas перемещение объекта по оси x

Ответы (1 шт):