Javascript 碰撞检测

Question

我有一个沿着点击方向移动的英雄。在下面的代码中，当我通过 runH(10,0) 时，根据代码，它应该向右移动，并在检测到碰撞时停止，并且我工作得很好。 但 问题：它在块之前停止几个像素（它不粘在碰撞块上）。

function runH(x, y) {
    clearInterval(interV);
    inmotion = true;
    interV = setInterval(function () {
        var HeroP = $("#BTB_Hero").position();
        var HeroW = $("#BTB_Hero").width();
        var HeroH = $("#BTB_Hero").height();
        var HeroX = HeroP.left + x;
        var HeroY = HeroP.top + y;
        
        // Check for collisions with blocks
        let collision = false;
       
        for (let i = 0; i < blocksA.length; i++){
         var block = $(blocksA[i]);
         var blockP = block.position();
         var blockX = blockP.left;
         var blockY = blockP.top;
         var blockW = $(blocksA[i]).width();
         var blockH = $(blocksA[i]).height();
         
         if ( HeroX + HeroW >= blockX && HeroX <= blockX + blockW && HeroY + HeroH >= blockY && HeroY <= blockY + blockH) {
             collision = true;
            
             
             break;  //Stop checking for collisions on the first collision detected
         }
     }
     if (collision) {
      clearInterval(interV); // Stop movement on collision
      inmotion = false;
  } else {
      $("#BTB_Hero").css({ "top": HeroY + "px", "left": HeroX + "px" });
  }
        // Check for level change condition
        checkLevelChange(HeroX,HeroY);
    }, 1);
}

我尝试了很多事情

1. 我将 x 和 y 值减小到 1 ，但是英雄块的速度降低到下一个级别，对于移动设备来说，感觉是慢动作。
2. 我尝试将间隔（setTimeInterval）减少到1/10000，但它不起作用，速度仍然很慢。
3. 最后我尝试获取碰撞块的宽度和位置，并在碰撞后将英雄调整到该位置。

期望： 1.通过保持x或y为1来增加英雄速度 2.当我保持x和y 10

时检测到碰撞时试图阻止

Answer 1

从外观上看，您正在检查英雄的位置之前移动他们而不是之后，导致他们停在方块之前。

例如如果英雄在时间步 1 处位于 (2, 5) 并且方块位于 (3, 6)，则在时间步 2 上，间隔函数将检查英雄在 (3, 6) 处的潜在位置并检测碰撞，但是将英雄移动到那里 (

$("#BTB_Hero").css({ "top": HeroY + "px", "left": HeroX + "px" });

) 的代码将不会被执行，它们将保留在 (2, 5)。

仅供参考：运行一个延迟 = 1 的间隔几乎肯定不会真正每 1 毫秒运行一次（实际延迟将取决于浏览器和硬件的强度）并且很可能是不必要的，您可能最好使用至少 10 毫秒的延迟。