如何用纯JS与jQuery追踪平台游戏角色x、y坐标实现对象交互

1. 实时获取角色坐标 #

你可以通过jQuery的两个内置方法获取角色的实时位置：

• $('selector').position()：返回相对于第一个定位父元素的top、left值，如果你的角色和所有交互物品都是放在同一个设置了position: relative/absolute/fixed的父容器里，用这个方法最适配你当前用CSS绝对定位放置物品的逻辑。
• $('selector').offset()：返回相对于整个文档的top、left值，适合跨容器的位置判断。

示例代码：

// 获取角色当前位置
const charPos = $('#character').position();
const charX = charPos.left; // 角色x坐标
const charY = charPos.top;  // 角色y坐标
// 同时可以获取角色宽高做碰撞范围判断
const charWidth = $('#character').width();
const charHeight = $('#character').height();

2. 实现范围碰撞检测 #

不需要坐标完全重合才算交互，只要角色的碰撞盒和物品的碰撞盒有重叠即可触发交互，你可以写一个通用碰撞检测函数：

function checkCollision($char, $item) {
  const charPos = $char.position();
  const itemPos = $item.position();
  // 拿到两个元素的四边坐标
  const char = {
    left: charPos.left,
    right: charPos.left + $char.width(),
    top: charPos.top,
    bottom: charPos.top + $char.height()
  };
  const item = {
    left: itemPos.left,
    right: itemPos.left + $item.width(),
    top: itemPos.top,
    bottom: itemPos.top + $item.height()
  };
  // 判断是否重叠
  return !(char.right < item.left || 
           char.left > item.right || 
           char.bottom < item.top || 
           char.top > item.bottom);
}

3. 选择合适的检测时机 #

因为你用了jQuery的animate方法做移动，有两种常用的检测触发方式：

• 绑定到animate的step回调，每帧动画执行时都检测：
  你可以把你现有的移动代码调整为：

case 37:
  $('#character').css('transform','scaleX(1)');
  $('#character').animate(
    { left: "-=2.5%" },
    {
      duration: 100, // 可自行调整动画时长
      step: function() {
        // 每帧遍历所有可交互物品做检测
        $('.interact-item').each(function() {
          if (checkCollision($('#character'), $(this))) {
            // 触发交互逻辑，比如拾取物品
            console.log('碰到了物品：', this.id);
            $(this).hide(); // 拾取后隐藏物品
          }
        })
      }
    }
  )
  break;

• 全局定时检测：如果有跳跃、重力等多动画逻辑，可以开一个全局的定时器统一检测：

// 每30ms检测一次交互，平衡性能和灵敏度
setInterval(() => {
  $('.interact-item').each(function() {
    if (checkCollision($('#character'), $(this))) {
      // 执行对应交互逻辑
    }
  })
}, 30)

优化建议 #

如果你的游戏容器尺寸是固定的，建议把定位单位从百分比换成px，坐标计算会更精准，避免窗口尺寸变化带来的碰撞判定误差。

内容的提问来源于stack exchange，提问作者Thomas Gamboa