Как работает данная строчка кода?

Question

[AlexeySmk]

Добрый вечер!
Есть следующий код:


Не могу разобраться, как работают эти строчки, а точнее условия:

if(ballCoords.left + ball.clientWidth > field.clientWidth) {
    ballCoords.left = field.clientWidth - ball.clientWidth;
  }

  if(ballCoords.top + ball.clientHeight > field.clientHeight) {
    ballCoords.top = field.clientHeight - ball.clientHeight;
   // ballCoords.top - это координаты центра мяча по Y, к которым мы добавляем полную его высоту ball.clientHeight, 
   // получается, что мяч вовсе должен быть остановлен за половину его высоты до границы поля, однако это не так.
// Не могу понять как это работает.
  }

Answer 1

[Rsa97]

ballCoords.top - это координаты центра мяча по Y

С чего вы это взяли? top - верхний край.

Comments

[AlexeySmk]

top: event.clientY - fieldCoords.top - field.clientTop - ball.clientHeight/2

Разве эта - ball.clientHeight/2 строчка не сдвигает мяч в центр по Y?

[Роман]

AlexeySmk, нет не сдвигает в центр. Она сдвигает центр мяча так, чтобы он попал на координаты клика. Таким образом ballCoords.top - координата верхнего края мяча

[AlexeySmk]

Роман, Все равно не могу понять, как ballCoords.top может быть координатой верхнего края, если по этой координате мяч центрируется? Так может быть только если убрать - ball.clientHeight/2 или как это работает?

[Роман]

смотрите сами:

let ball = document.querySelector("#ball");
ball - html элемент со своими top,left,width,height

let field = document.querySelector("#field");
...
let fieldCoords = field.getBoundingClientRect();

field - html элемент со своими top,left,width,height
fieldCoords - размер этого элемента и его позицию относительно viewport (часть страницы, показанная на экране, и которую мы видим).

let ballCoords = {
    top: event.clientY - fieldCoords.top - field.clientTop - ball.clientHeight/2,
    left: event.clientX - fieldCoords.left - field.clientLeft - ball.clientWidth/2
}

ballCoords - переменная с координатами top и left. Рассмотрим как они подсчитываются на примере ballCoords.top

ballCoords.top =
event.clientY - расстояние от верхней границы экрана до курсора без учета прокрутки
- fieldCoords.top - минус отстояние поля от верхней границы экрана
- field.clientTop - минус Толщина верхней границы поля в пикселях
!!! на данном этапе у нас в топ лежит расстояние от верхней границы футбольного поля до курсора
- ball.clientHeight/2 - минус пол высоты мяча
!!! ТАДАМ !!! и мы получаем такую координату для верхней границы мяча, что центр мяча окажется в той точке в которую кликнули мышкой

if(ballCoords.top + ball.clientHeight > field.clientHeight) {
    ballCoords.top = field.clientHeight - ball.clientHeight;

ballCoords.top + ball.clientHeight это относительная координата нижней границы мяча (относительная потому что отсчитана от верхней границы поля)
Как результат условие можно прочесть так: если нижняя граница мяча ниже нижней границы поля, то мяч вышел за границы поля и его координаты надо подправить. Что и делается в этой строчке

ballCoords.top = field.clientHeight - ball.clientHeight;

ball.style.top = ballCoords.top + "px";
Ну а тут у мяча мы выставляем посчитанную координату верхней границы

[Роман]

AlexeySmk, в общем ничего не пишите в ответ. Я рассписал вам все до запятой и уже не вернусь сюда к вам в обсуждения))) Читайте то что написал вам в предыдущем комменте и разбирайтесь с этим самостоятельно

[AlexeySmk]

Роман, Большое спасибо за развернутый ответ!) Если вам угодно, то можете скопировать ваш ответ в ответы на вопрос и я отмечу его решением.

[Роман]

AlexeySmk, отметьте решением ответ Rsa97, ведь он сразу показал суть проблемы