如何检测此JavaScript游戏的对象碰撞

试图整理一个小游戏进行练习，我遇到了一个问题。 关键是抓住哥布林，但我不知道如何让游戏检测到玩家击中了哥布林。

到目前为止，只有当您的位置 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>