Comment garder une image en dehors d'un élément?

Question

Je suis en train de créer un jeu de labyrinthe, et je veux que les murs du jeu soient infranchissables. Il y a une image qui suit mon curseur, et je me demandais quel élément serait le mieux pour ce que je fais. J'ai essayé avec un div, mais c'est vraiment difficile de le faire fonctionner. Je ne veux pas du tout que l'image puisse entrer dans l'élément. Quel est le moyen le plus simple de faire en sorte qu'une image reste en dehors d'un élément ? Je préfère jQuery, mais je suis flexible avec du pur js.

code:

    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/

Il est préférable que vous ajoutiez un jsfiddle à votre solution, afin que je puisse travailler avec.

Answer 1

Essayez cette vérification de collision :

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 est à gauche de b
            if (aminX > bmaxX) collide = false; // a est à droite de b
            if (amaxY < bminY) collide = false; // a est au-dessus de b
            if (aminY > bmaxY) collide = false; // a est en dessous de b

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

JSFiddle : Vérification de collision