如何檢測此JavaScript遊戲的物體碰撞

Question

試圖將練習中的小遊戲放在一起，我遇到了一個問題。關鍵是抓住地精，但我不知道如何讓遊戲檢測到該玩家擊中了地精。

到目前爲止，只有當您的位置Y和X與敵人軸相匹配時，您才能檢測到感動。我該如何增加兩者的寬度或更好的檢測觸摸方式。

嘗試一下這裏：https://jsfiddle.net/acbkk7cs/4/

風格：

#map{ 
     margin: 0 auto; 
     height: 510px; 
     width: 510px; 
     background-image:url(background.png); 

    } 

    .character{ 
     background-image:url(character.png); 
     z-index:1; 
     position: relative; 
     top: 150px; 
     left: 150px; 
     height: 32px; 
     width: 33px; 
    } 

    .monster{ 
     background-image:url(monster.png); 

     position: relative; 
     height: 32px; 
     width: 30px; 
    } 

的Javascript：

$(document).ready(function(){ 

      var char = { 

       player : $(".character"), 
       x: 150, 
       y: 150 

      }; 

      var monster = { 

       npc : $(".monster"), 
       x: 100, 
       y: 100 
      }; 

      var keypush = {}; 


     $(document).on("keydown keyup", function(e){ 

      var keyN = e.which; 
      keypush[keyN] = e.type === "keydown"; 


     }); 





    function moveCharacter(){ 

     if (keypush[37]) char.x -=2; 
     if (keypush[38]) char.y -=2; 
     if (keypush[39]) char.x +=2; 
     if (keypush[40]) char.y +=2; 

     char.player.css({transform:"translate3D("+ char.x +"px, "+ char.y +"px, 0)"}); 
     monster.npc.css({transform:"translate3D("+ monster.x +"px, "+ monster.y +"px, 0)"}); 


     var playerPosX = char.player.position().top; 
     var monsterPosX = monster.npc.position().top; 

     var playerPosY = char.player.position().left; 
     var monsterPosY = monster.npc.position().left; 


     if (playerPosX === monsterPosX 
      && playerPosY === monsterPosY 
      ){ 

      document.getElementById("pos").innerHTML="Touched"; 

     } else { 

      document.getElementById("pos").innerHTML="Off"; 
     } 




//backend logs 

console.log(char.x);    
    } 






     (function engine(){ 
     moveCharacter(); 
     window.requestAnimationFrame(engine); 
    }());  

    }); 

HTML：

<div id = "map"> 
     <div class = "character"> 

     </div> 
     <div class = "monster"> 
      <p id = "pos" style = "color:yellow;font- weight:bold;position:relative;left:5px;font-size:20px;">Position: </p> 
     </div> 
    </div> 

Answer 1

的最簡單和最快的方法是，計算次e角色與怪物之間的距離：fiddle using circle collision。

var dx = playerPosX - monsterPosX, 
     dy = playerPosY - monsterPosY, 
     touchDistance = 30; 

    if (Math.sqrt(dx * dx + dy * dy) < touchDistance)   
     document.getElementById("pos").innerHTML="Touched";     
    else 
     document.getElementById("pos").innerHTML="Off"; 

在這裏，我直勾勾的touchDistance，但它的實際值應爲玩家精靈的半徑和怪物精靈的半徑之和。

/** 
* (ax,ay) and (bx,by) are the center positions, and ar, br their radii. 
*/ 
function circleCollision(ax, ay, ar, bx, by, br) { 
    return Math.sqrt((ax-bx)*(ax-bx) + (ay-by)*(ay-by)) <= ar + br; 
} 

第二個常見的方法來確定碰撞是使用「邊框」，或者在這種情況下，矩形/正方形：Fiddle using rectangle collision如果他們是圈這個工作最好。

function rectangleCollision(pLeft, pTop, pRight, pBottom, mLeft, mTop, mRight, mBottom) { 
    return 
    ((pLeft >= mLeft && pLeft < mRight) || (pRight >= mLeft && pRight < mRight)) 
    && ((pBottom >= mTop && pBottom < mBottom) || (pTop >= mTop && pTop < mBottom)) 
}