Решаю задачу с перемещением мяча по клику на поле. Центр мяча должен располагаться по координатам клика.(Задача с learn.javascript). По условиям, мяч не должен пересекать границу поля - для этого добавляется условие if, которое проверяет является ли вычисленное значение координат мяча отрицательным. Если является, они приравниваются к нулю. И вот с этим условием есть проблема, вроде бы простая вещь, а не работает - отрицательное значение сохраняется. Подскажите, пожалуйста, что я упустил.
let ball = document.querySelector('#ball');
let area = document.querySelector('#field');
area.style.position = 'relative';
ball.style.cssText = 'position: absolute; transition: 0.5s';
let areaCoords = area.getBoundingClientRect();
area.addEventListener('click', ballMove);
function ballMove() {
let ballCoords = {
top: (event.clientY - areaCoords.top - area.clientTop) - (ball.clientHeight / 2) + 'px',
left: (event.clientX - areaCoords.left - area.clientLeft) - (ball.clientWidth / 2) + 'px'
}
if (ballCoords.top < 0) {
ballCoords.top = 0;
}
console.log(ballCoords.top)
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
#field {
width: 200px;
height: 150px;
border: 10px solid black;
background-color: #00FF00;
overflow: hidden;
}
</style>
</head>
<body style = "height:2000px;">
Нажмите на поле для перемещения мяча.
<br> Мяч не должен выходить за границы поля.
<div id="field">
<img src="https://ru.js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
<script src="./index.js"></script>
</body>
</html>