6

Estou desenvolvendo um passa tempo (jogo de browser), onde o usuário vai guiar seu avião pelo cenário!

Tenho 2 div, na primeira eu crio um retângulo onde ao mover o mouse eu capturo o eixo X e Y, preciso movimentar um caractere na segunda div com um certo atraso em relação à posição X da primeira.

Exemplo, caso a posição X seja = a 60 o caractere se movimente na mesma posição (X - 25) e posição Y = Y.

Com base em outras pesquisas: JsFiddle

0

1 Resposta 1

7

Segue em anexo um exemplo de linha de raciocínio a ser utilizada,

$(function() {

  var $location = $('#location');
  var $move = $('#target > span');
  var $area = $('#area');
  
  var Localizacao = function (e) {
    
    var x = e.clientX;
    var y = e.clientY;
    var coor = "Coordenadas: (" + "x: " + x + "," + "y: " + y + ")";

    $area.html(coor);
    $move.stop().animate({
      left: x + 'px',
      top: y + 'px',
    },50);

  };

  var clearCoor = function() {
    document.getElementById("area").innerHTML = "   ";
  };

  $location.on({
    mousemove: Localizacao,
    mouseleave: clearCoor
  });
  
});
* { margin: 0; padding: 0; line-height: 1; }
div { width: 200px; height: 100px; border: 1px solid black; position: relative; }
div > span { position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="location"></div>
<p id="area"></p>
<div id="target">
  <span>+</span>
</div>

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 .