如何在div外部保留圖像？

Question

我正在創建一個迷宮，並且我想要鼠標後面的圖片無法通過div來進入迷宮。現在，我只設置了一個div，所以我可以瞭解我需要做什麼。我怎樣才能做到這一點？

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 
 
} 
 
.maze { 
 
width: 150px; 
 
margin-left: 500px; 
 
height:150px; 
 
background: black; 
 
}

<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> 
 
<div class="maze"> 
 
</div>

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

Answer 1

我做了一個fiddle。碰撞起作用。現在缺少計算碰撞邊以避免光標通過迷宮。

var isMoving = false; 

var cursor = { 
     lx: 0, 
     ly: 0, 
     x: 0, 
     y: 0, 
     width: document.getElementById("image").width, 
     height: document.getElementById("image").height, 
     hitting: false, 
     sides: [] 
    }, 
    cursorElement; 

var divs, 
    divs_L, 
    div_i, 
    divBd; 

var cur_bottom, 
    div_bottom, 
    cur_right, 
    div_right; 

var b_collision, 
    t_collision, 
    l_collision, 
    r_collision; 

function onCursorMove(e) { 
    cursor.lx = cursor.x; 
    cursor.ly = cursor.y; 
    cursor.x = e.clientX; 
    cursor.y = e.clientY; 
    divs = document.getElementsByClassName("hitme"); 
    divs_L = divs.length; 
    for (div_i = 0; div_i < divs_L; div_i++) { 
     divBd = divs[div_i].getBoundingClientRect(); 
     if (cursor.x < divBd.left + divBd.width && cursor.x + cursor.width > divBd.left && cursor.y < divBd.top + divBd.height && cursor.y + cursor.height > divBd.top) { 
      hitting = true; 
      cur_bottom = cursor.y + cursor.height; 
      div_bottom = divBd.top + divBd.height; 
      cur_right = cursor.x + cursor.width; 
      div_right = divBd.left + divBd.width; 

      b_collision = div_bottom - cursor.y; 
      t_collision = cur_bottom - divBd.y; 
      l_collision = cur_right - divBd.x; 
      r_collision = div_right - cursor.x; 

      if (t_collision < b_collision && t_collision < l_collision && t_collision < r_collision) { 
       //Top collision 
       cursor.y = divBd.top - cursor.height; 
      } else if (b_collision < t_collision && b_collision < l_collision && b_collision < r_collision) { 
       cursor.y = divBd.bottom; 
       //bottom collision 
      } 
      if (l_collision < r_collision && l_collision < t_collision && l_collision < b_collision) { 
       //Left collision 
       cursor.x = divBd.left - cursor.width; 
      } else if (r_collision < l_collision && r_collision < t_collision && r_collision < b_collision) { 
       //Right collision 
       cursor.x = divBd.right; 
      } 
      break 
     } 
    } 

    cursorElement = document.getElementById("image"); 
    cursorElement.style.left = cursor.x + "px"; 
    cursorElement.style.top = cursor.y + "px"; 
} 

window.onmousemove = onCursorMove;