Переместить мяч внутри границы Div

Question

Я рассмотрел примеры того, как перемещать мяч с помощью jquery, но примеры не совсем то, что я ищу. Я просто хочу изменить мяч, чтобы перемещаться по внутренним краям поля div. Пока мой мяч стреляет вне коробки и не будет зацикливаться внутри коробки. Какие-либо предложения?

Основная функция, которая должна выполнять это в моей функции:

function moveMe() { 
// Read the current left position of the ball 
var currentLeftPos = parseInt($("#ball").css('left')); 

// define the new position 
var newLeftPos = currentLeftPos + velocity_y; 

// If the left position is greater than or equal to the maximum distance allowed or 
// less than or equal to zero, then change the direction. 

if(newLeftPos >= maxLeft || newLeftPos <= 0) 
    velocity_y *= -1; // multiply the value by -1 

// update the position 
$("#ball").css('left', newLeftPos + 'px'); 

var i = 1; 
var interval = setInterval(increment, 1000); 
$('#sec-played').text(interval); 
function increment(){ 
i = i % 360 + 1; 
} 
} 

Вот мой полный ход код: https://jsfiddle.net/qYdwR/2511/

новая программа с обновлением https://jsfiddle.net/W4Km8/4857/

Answer 1

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

if(newLeftPos > maxLeft) velocity_y = -Math.abs(velocity_y); 
else if (newLeftPos < 0) velocity_y = +Math.abs(velocity_y); 

Вы также должны убедиться, что скорость не может превышать (maxLeft-0), и для полноты картины можно также сделать арифметику, чтобы сделать сильный удар произойдет ровно на границе (в настоящее время мяч будет отскакивать от неопределенной точки, слегка за пределами границы).

Что касается того, как мяч выходит за пределы границы, в первую очередь, это связано с забавной ошибкой при создании. Вы изначально установка velocity_y на строку"5" (чтение из текстового ввода) вместо числа5, и поэтому, когда вы добавляете его в currentLeftPos вы получаете строку addition-- позиция становится "5", то "55", затем "555". В этот момент вы умножаете velocity_y на -1, заставляя его становиться числом, и ошибка исчезает. Чтобы это исправить, просто заменить

var velocity_y = $('#dy').val(); 

с

var velocity_y = $('#dy').val() * 1; 

и все это работает в первый раз.