1

Решаю задачу с перемещением мяча по клику на поле. Центр мяча должен располагаться по координатам клика.(Задача с 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>

1 ответ 1

1
if (parseInt(ballCoords.top) < 0) {
    ballCoords.top = "0px";
}
1
  • Точно, все из-за пикселей. Спасибо
    – Vlad
    Commented 29 мар. 2020 в 15:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.