javascript - 如何在div内保持移动的div

Question

我正在制作一个游戏，老鼠必须在迷宫中导航才能找到奶酪 block 。但我似乎不知道如何将鼠标保持在游戏区域内，如果有人可以指导我，我将不胜感激!

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";
    };
};

Answer 1

类似这样的事情:

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

document.onkeydown = (key) => {
    if (key.keyCode == 38){
        if (posY >= step) {
          posY -= step;
          mouse.style.top = posY + "px";
        }
    } else if (key.keyCode == 39){
            if (posX <= (600 - step - 20)) { // Width of gamearea - step - width of the avatar
          posX += step;
          mouse.style.left = posX + "px";
        }
    } else if (key.keyCode == 37){
          if (posX >= step) {
          posX -= step;
          mouse.style.left = posX + "px";
        }
    } else if (key.keyCode == 40){
        if (posY <= (400 - step - 20)) { // Height of gamearea - step - height of the avatar
          posY += step;
          mouse.style.top = posY + "px";
        }
    };
};

https://jsfiddle.net/tcbnka1m/

不过，如果您正在制作游戏，我强烈建议您使用 Canvas 动画。