Question

我正在创造一个迷宫游戏，我希望游戏的墙壁无法通行。我的光标后面有一个图像，我想知道什么元素最适合我正在做的事情。我试过一个div，但要让它工作真的很难。我不希望图像能够完全进入元素。使图像远离元素的最简单方法是什么？我更喜欢jQuery，但我对纯js很灵活。

代码：

%%

    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;
})

$("#drop").mouseenter(function(){
 if(startMove)
   alert("Success");
});

    html {cursor: none;}
html.showCursor{cursor: default;}
#image{
position:absolute;
width:25px;
z-index: 100;
height:auto;
}

#drop{
  width:100px;
  height:100px;
  background:aqua;
  position: absolute;
  left:200px;
  top: 300px;
  z-index:99
}

Jsfiddle：https://jsfiddle.net/3x7cgLdr/27/

您最好在解决方案中添加一个jsfiddle，以便我可以使用它。

Answer 1

尝试此碰撞检查：

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

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

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

            collide = true;

            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 = false; // a is left of b
            if (aminX > bmaxX) collide = false; // a is right of b
            if (amaxY < bminY) collide = false; // a is above b
            if (aminY > bmaxY) collide = false; // a is below b

            if (collide) {
                return collide;
            }
        });
      return collide;
    }

JSFiddle：Collision Check

如何将图像保留在元素之外？

1 个答案: