Javascript 如何将移动的div保持在div内

我正在做一个游戏，一只老鼠必须在迷宫中找到奶酪块。但我似乎不知道如何将鼠标保持在游戏区域内，如果有人能引导我前进，我将不胜感激

let mazeBG = document.getElementById("gamearea");
let mouse = document.getElementById("snake");
let cheese = document.getElementById("food");
let game  = 1;
let posY = 0;
let posX = 0;

document.onkeydown = function(key){
    if (key.keyCode == 38){
        posY -= 5;
        mouse.style.top = posY + "px";
    } else if (key.keyCode == 39){
        posX += 5;
        mouse.style.left = posX + "px";
    } else if (key.keyCode == 37){
        posX -= 5;
        mouse.style.left = posX + "px";
    } else if (key.keyCode == 40){
        posY += 5;
        mouse.style.top = posY + "px";
    };
};

大概是这样的：

让mazeBG=document.getElementById（“游戏区”）；
让鼠标=document.getElementById（“snake”）；
let cheese=document.getElementById（“食物”）；
让game=1；
设posY=0；
设posX=0；
常数步长=5；
document.onkeydown=（键）=>{
如果（key.keyCode==38）{
如果（posY>=步骤）{
posY-=阶跃；
mouse.style.top=posY+“px”；
}
}否则如果（key.keyCode==39）{
if（posX=step）{
posX-=阶跃；
mouse.style.left=posX+“px”；
}
}否则如果（key.keyCode==40）{
如果（posY），请提供更完整的代码片段，包括HTML和您创建
gamearea
、
snake
、和
food
的JS代码部分。gamearea、snake和food只是HTML中带有css样式的div（之所以这样命名是因为它本来是一款蛇类游戏，但我想做一些更具原创性的事情）@ArfeoDo你需要知道鼠标的大小和游戏区域吗？@ArfeoNope，我可以计算出来。=）因此，如果我理解正确，所有三个div都是独立的，不是彼此的父母或孩子？游戏中的每个div都是游戏区域的子级。如果有什么作用，鼠标有一个相对的位置。@Arfeoth这是一个正确的答案，我会使用.width（）和.height（）在mazeBG和mouse for completenessI上，我会使用画布动画，但我制作游戏是为了以一种更有趣的方式学习javascript，我现在想消除我使用的css动画数量。