javascript - 获取元素坐标

Question

我需要一些帮助。 首先，这是我游戏中的一个小演示代码:https://jsfiddle.net/MiloSx7/a0dn9a4f/2/

动画思路:收集硬币后将硬币缩放到2x，然后慢慢移动并逐渐缩小比例到显示硬币库存统计的图像所在的位置，invLocation是的ID动画应该结束的元素。它从当前的coinId X和Y开始 是否有可能以某种方式获取 invLocation 的 X 和 Y，以便我知道我应该告诉动画移动到哪里？

Answer 1

您可以使用 JQuery position() 和 offset() 方法执行此操作。

const spawnTime = 10000;

var coin = 0;
var intervalId = '';

var coinDiv = $('#coinDiv');
var coinImg = $('#coinImg');
var invDiv  = $('#invDiv');
var invId   = $('#inventoryId');
var invImg  = $('#invLocation');


coinImg.on('click', collect);
intervalId = setInterval(setLocation, spawnTime);


function setLocation() {
  var x = parseInt( Math.random()*(80-20+1) ) + 20;
  var y = parseInt( Math.random()*(80-20+1) ) + 20;

  coinImg.animate({
    opacity: 1
  }, 3000,
  function() {
    coinImg.css('top', x+'%');
    coinImg.css('left', y+'%');
    coinImg.css('display', 'initial');

    setTimeout( () => coinImg.animate({ opacity: 0 }, 3000), 6000);
  });
}

function collect() {
    clearInterval(intervalId);

  coinImg.stop();
  coinImg.css('opacity', 1);

  /* Increment coin counter */
  coin++;
  invId.text(coin);

  /* In order to disable multiple clicks */
  coinImg.css('pointer-events', 'none');

  /* Double the size */
  coinImg.css('width', '128px');
  coinImg.css('height', '128px');

  /* Animate and return to normal */
  coinImg.animate({
        width:  '32px',
        height: '32px',
        left:   invImg.offset().left + 'px',
        top:    invImg.offset().top  + 'px'
    }, 1500,
    function() {
      coinImg.css('pointer-events', 'auto');
      coinImg.css('display', 'none');
      coinImg.css('width', '64px');
      coinImg.css('height', '64px');

      intervalId = setInterval(setLocation, spawnTime);
    }
  );
}

工作示例:https://jsfiddle.net/wz4q9w69/