Question

我有一个代码，其中有一个跟随我的光标的图像，并对具有某个类的div进行碰撞检查。我还有另一个代码，鼠标跟随我的光标，如果我的光标有一点距离，图像停止跟随它。请注意，我使用的是jQuery。如果我尝试组合这两个代码，代码都会停止正常工作。另外，他们工作正常。我想找到一种方法来实现它，这样两个代码就可以组合起来并正常工作。

从代码1：

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");
        });
        });

https://jsfiddle.net/8pc3u7t9/1

从代码2：

var startMove;

$(document).mousemove(function(e) {
  var DIFF_SNAP = 10;
  var DIFF_UNSNAP = 100;
  var difLeft = $('#image').offset().left - e.pageX;
  var difTop = $('#image').offset().top - e.pageY;
  if (!startMove && Math.abs(difLeft) < DIFF_SNAP && Math.abs(difTop) <   DIFF_SNAP) {
    startMove = true;
    $('html').removeClass('showCursor');
  } else if (startMove && !(Math.abs(difLeft) < DIFF_UNSNAP && Math.abs(difTop) < DIFF_UNSNAP)) {
    startMove = false;
  }
  if (startMove) {
    $("#image").css({
      left: e.pageX,
      top: e.pageY
    });
  } else {
    $('html').addClass('showCursor');
  }
});

$(document).mouseleave(function() {
  startMove = false;
})

https://jsfiddle.net/3x7cgLdr/25/

使用鼠标进行碰撞检查和移动图像无法正确组合

0 个答案: