Товарищи на основе задачи из местного учебника, решил дополнительно покатать мяч по полю, вот собственно код:
<!DOCTYPE HTML>
<html>
<head>
<style>
#field {
width: 200px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
}
#ball {
position: absolute;
}
</style>
</head>
<body>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
<script>
'use strict';
let field = document.getElementById('field');
let ball = document.querySelector('img');
let medX = field.clientWidth / 2;
let medY = field.clientHeight / 2;
let xStart = medX - ball.offsetWidth / 2;
let yStart = medY - ball.offsetHeight / 2;
ball.style.Left = '0px';
ball.style.Top = '0px';
let timerId = setTimeout(function doGoal() {
if (parseInt(ball.style.Left) < xStart) {
ball.style.Left = (parseInt(ball.style.Left) + 1) + 'px';
} else {
clearTimeout(timerId);
return;
}
if (parseInt(ball.style.Top) < yStart) {
ball.style.Top = (parseInt(ball.style.Top) + 1) + 'px';
} else {
clearTimeout(timerId);
return;
}
timerId = setTimeout(doGoal, 100);
}, 100);
</script>
</body>
</html>
Предполагал, что мяч будет смещаться по X,Y пока по одной из координат не достигнет середины поля. В реальности в какой-то момент
ball.style.Left
становится undefined, и соответственно все рушится.
Прошу совета, понимаю что ошибка должна быть элементарная, но уже сломал всю голову...