Я писал в комментах вот про это:
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
переносит картину
мира к началу координат, вот и весь фокус
object.x += object.x < 200 ? object.speed : -object.x