1

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>

1 Resposta 1

2

Pensando na fórmula da velocidade velocidade = distância x tempo podemos chegar à conclusão que o incremento de X deve ser: incrX = dY/dX.

Ou seja: vX = distX x tempoX e vY = distY x tempoY. Sendo que ambas as coordenadas devem demorar o mesmo tempo temos que: vX/distX = vY/distY. Se dermos o valor de 1 a um deles podemos calcular o outro a partir dessa fórmula.

Na prática seria:

var viajante = {};
var coordenadasAlvo = {
  x: 50,
  y: 200
};

$(document).ready(function() {
  inicializaDrawer();
  setInterval(moveViajante, 10);
});


function inicializaDrawer() {
  viajante = $('<div id="viajante"></div>');
  $('#drawer-wrapper').append(viajante);
}

function getPosicaoViajante() {
  var left = viajante.position().left;
  var top = viajante.position().top;
  return {
    x: left,
    y: top
  };
}

function moveViajante() {
  var entityPos = getPosicaoViajante();
  var diffX = coordenadasAlvo.x - entityPos.x;
  var diffY = (coordenadasAlvo.y - entityPos.y) / (coordenadasAlvo.x - entityPos.x);
  var newX = entityPos.x + Math.sign(diffX);
  var newY = entityPos.y + diffY * Math.sign(diffX);
  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>

5
  • Acho que sua solução não está funcionando direito quando as coordenadasAlvo são menores que a posição inicial do viajante :( Commented 10/07/2018 às 18:36
  • @ArturoTemplário é possivel que sej preciso ajudtar o sinal + -. Posso dar uma olhada mais daqui a pouco.
    – Sergio
    Commented 10/07/2018 às 18:38
  • Tudo bem, vou tentar ajustar sua solução para funcionar também para esse caso como exercício, enquanto isso :) Commented 10/07/2018 às 18:39
  • @ArturoTemplário dá uma olhada agora
    – Sergio
    Commented 10/07/2018 às 18:43
  • 1
    Perfeito! Testei tanto com o y menor com o x, e também os dois ao mesmo tempo. Funcionou perfeitamente! Commented 10/07/2018 às 18:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .