Как сохранить изображение вне элемента?

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 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<img id="image" src="http://static.micheljansen.org/uploads/mac-osx-arrow-cursor.png"/> 
 

 
<div id="drop"> 
 
</div>

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