HTML5 Canvas анимации, которые анимируются по краям и возвращаются без проблем?

Question

У меня много разных элементов, плавающих вокруг страницы на разных скоростях. Когда элемент покидает правую часть страницы, он должен начать плавать в левой части. Это легко, если element.x больше, чем canvas.width, element.x = -100. Это устанавливает его немного дальше, поэтому он не выглядит нервным. Но теперь возникает проблема, как мне это сделать, если элемент покидает левую часть страницы? Мы не можем сказать, является ли element.x

Спасибо за вашу помощь

Answer 1

Есть несколько способов сделать это.

Один из них - это только "переместить" элемент на другую сторону, если он полностью за кадром (если пересечение нулевое).Затем перемещение означает, что вы всегда пересекаете экран только на один пиксель.

Другой способ - проверить, «откуда он исходил», отслеживая его последнее местоположение или зная его траекторию (вы, вероятно, знаете это, еслиоживляешь)Если он идет слева и идет вправо, а вы находитесь на правой стороне, он покидает экран, и вам нужно переместить его.Но если он идет слева и направо и вы находитесь на левой стороне экрана, вы знаете, что он входит и все в порядке.