Javascript 如何将图像保存在div之外？

我正在创建一个迷宫，我希望鼠标后面的图像不能通过div到达迷宫。现在，我只设置了一个div，所以我可以知道我需要做什么。我怎样才能做到这一点

var startMove；
$（文档）.mousemove（函数（e）{
var DIFF_SNAP=10；
var DIFF_UNSNAP=100；
var difLeft=$（'#image'）.offset（）.left-e.pageX；
var difTop=$（'#image'）.offset（）.top-e.pageY；
如果（！startMove&&Math.abs（difLeft）
html{cursor:none；}
showCursor{cursor:default；}
#形象{
位置：绝对位置；
宽度：25px；
z指数：100；
高度：自动；
}
#下降{
宽度：100px；
高度：100px；
背景：水；
位置：绝对位置；
左：200px；
顶部：300px；
z指数：99
}
.梅兹{
宽度：150px；
左边距：500px；
高度：150像素；
背景：黑色；
}

我发了一封信。碰撞起作用了。现在缺少计算碰撞边以避免光标通过迷宫

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;

var isMoving=false；
变量游标={
lx:0，
李:0,，
x:0,，
y:0，
宽度：document.getElementById（“图像”）.width，
高度：document.getElementById（“图像”）.height，
打:错,，
侧面：[]
},
粗元素；
var divs，
分区，
第一分区，
divBd；
var cur_底部，
水底，
没错，
右分区；
var b_碰撞，
t_碰撞,，
l_碰撞，
碰撞；
函数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；
对于（div_i=0；div_idivBd.left&&cursor.ydivBd.top）{
命中=正确；
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；
如果（t_碰撞
您能为此添加一个JSFIDLE吗？@RandomChannel我正在检查问题。提醒您，只有在
imgWidth
和
imgHeight
中设置图像大小时，该功能才起作用。我也经常有打字错误。它在这里工作（），但应该会改善冲突。让我们来看看。