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;

如何将图像保留在div之外？

1 个答案: