Consigo mover um elemento na direção da coordenada com sucesso. Porém, para o que preciso, é necessário que ele se mova em linha reta (que é a menor distância possível entre dois pontos).
No exemplo que dei abaixo (que representa a funcionalidade atual do meu código com fidelidade), ele move toda a diferença em uma coordenada, depois na outra. Apesar de funcionar, ainda não é o que eu preciso.
Como posso ajustar meu algoritmo de modo que que a div #viajante
se mova em linha reta na direção das coordenadasAlvo
?
var viajante = {};
var parametros = {
coordenadasAlvo : { x : 50, y : 200 },
tempoSetInterval : 100,
velocidadeViajante : 1 // pixels por tempoSetInterval (milissec)
};
$(document).ready(function (){
inicializaDrawer();
setInterval(moveViajante, parametros.tempoSetInterval);
});
function inicializaDrawer(){
viajante = $('<div id="viajante"></div>');
$('#drawer-wrapper').append(viajante);
}
function getDeslocamentoViajante(startCoord, targetCoord, speed){
var diff = startCoord - targetCoord;
return diff > 0 ? -speed : speed;
}
function getPosicaoViajante(){
var left = viajante.position().left;
var top = viajante.position().top;
return { x : left, y : top };
}
function moveViajante(){
var entityPos = getPosicaoViajante();
var diffX = getDeslocamentoViajante(entityPos.x, parametros.coordenadasAlvo.x, parametros.velocidadeViajante);
var diffY = getDeslocamentoViajante(entityPos.y, parametros.coordenadasAlvo.y, parametros.velocidadeViajante);
var newX = entityPos.x + diffX;
var newY = entityPos.y + diffY;
viajante.css({top: newY, left: newX, position:'absolute'});
}
#drawer-wrapper{
height: 300px;
width: 300px;
overflow: auto;
border: 1px solid black;
position: relative;
}
#drawer{
height: 300px;
width: 300px;
background-color: green;
}
#viajante{
width: 20px;
height: 20px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drawer-wrapper">
<div id="drawer">
</div>
</div>