是否可以在光标接近时使图像移动并发生碰撞？

Question

我正在创造一个迷宫游戏。我得到了如何使图像无法使用jQuery进入div。我还有一个代码跟随光标的图像。在第二个代码中，我做了这样，如果距离一定距离，图像只会转到鼠标。随着碰撞，第二个代码的代码搞砸了，现在图像传送到光标，而不是我想要它的行为。我怎样才能解决这个问题？如果你需要使用纯js或jquery UI，我很灵活。我非常喜欢jQuery。

jQuery来自第一个代码：

compile 'com.google.dagger:dagger:2.4'
apt 'com.google.dagger:dagger-compiler:2.4'
compile 'javax.annotation:javax.annotation-api:1.2'

来自第二个代码的jQuery：

function collisionCheck(ax,ay) {
            var collide = false;

            var aminY = ay;
            var aminX = ax;
            var amaxX = aminX + $('#image').width();
            var amaxY = aminY + $('#image').height();

            $('.maze').each(function(){

                collide = false;

                var bminY = $(this).offset().top - $(window).scrollTop();
                var bminX = $(this).offset().left - $(window).scrollLeft(); 
                var bmaxX = bminX + $(this).width();
                var bmaxY = bminY + $(this).height();

                if (amaxX < bminX) collide = true; // a is left of b
                if (aminX > bmaxX) collide = true; // a is right of b
                if (amaxY < bminY) collide = true; // a is above b
                if (aminY > bmaxY) collide = true; // a is below b

                if (!collide) {
                    return collide;
                }
            });
          return collide;
        }
$(document).ready(function(){
        $(document).mousemove(function(e) {
          startMove = true;
      var cursorY = e.pageY;
            var cursorX = e.pageX;
          if (collisionCheck(cursorX, cursorY)) {
        $('html').removeClass('showCursor');
        $("#image").css({
          left: e.pageX,
          top: e.pageY
        });
          } else {
        $('html').addClass('showCursor');
          }
        });

        $("#drop").mouseenter(function(){
            alert("Success");
        });
});

1st jsfiddle：https://jsfiddle.net/8pc3u7t9/1/
第二个问题：https://jsfiddle.net/3x7cgLdr/26/