Javascript 如何在div的网格容器中移动div？

所以- 我正在尝试创建一个游戏，你可以将角色移动到网格上。我有一个主网格容器div，然后在该容器中加载形成网格的独立div（使用网格布局css）

然后我想创建一个逻辑来说明，‘当角色处于这样的位置时，用这个警告用户，并将角色放回起始位置’。我被告知，这将是复杂的数字定位，并通过使用网格，我能够移动字符从一个div到另一个当用户按下箭头键。我似乎想不出最好的办法。我试着用数字来命名我的div，这样当角色移动时，我基本上可以在他们的位置id中添加一个数字，这样他们就可以在随后的div中结束，但我似乎无法用数字来命名我的div？

---

也许我把事情弄得太复杂了，但任何见解都会有帮助

首先，我建议彻底检修。你所拥有的游戏，命名所有这些id是不可伸缩的或不实用的。它违反了干燥原则（查阅）

不要让一个div的id为player的

id

，只需允许

.grid square

div成为

包含player的类即可。这样，你就不会在玩家每次移动的时候都在移动布局了

您需要一个包含所有div的数组，然后使用类似这样的逻辑来确定在向某个方向移动的情况下应该发生什么。这就是我要做的，请适应你的口味和需要


window.onload=function（）{
常数gameHeight=10；
常数gameWidth=10；
const container=document.getElementById（“网格容器”）；
for（设i=0；i

：根目录{
--游戏大小：10个；
--游戏规模：10px；
--游戏实际规模：计算（var（--游戏规模）*var（--游戏规模））；
}
#网格容器{
宽度：var（--游戏实际大小）；
高度：var（--游戏实际大小）；
明确：两者皆有；
}
#网格容器，网格正方形{
宽度：var（--游戏规模）；
高度：var（--游戏规模）；
浮动：左；
背景颜色：灰色；
}
.grid-square.contains-player{
背景色：红色！重要；
}

游戏

<div id="grid-container">
        <div id='player'></div>
        <div id='a'>
            <h3>Start</h3>
        </div>
        <div id='b'></div>
        <div id='c'></div>
        <div id='d'></div>
        <div id='e'></div>
        <div id='f'></div>
        <div id='g'></div>
        <div id='h'></div>
        <div id='i'></div>
        <div id='j'></div>
        <div id='k'></div>
        <div id='l'></div>
        <div id='m'></div>
        <div id='n'></div>
        <div id='o'>
            <h3>Finish</h3>
        </div>
    </div>

document.addEventListener('keyup', event => {
    switch (event.keyCode){
        case 37:
            if (leftDistance > 0) {
                player.style.left = --leftDistance + '%';
            }
            break;
        case 38:
            if (topDistance > 0) {
                player.style.top = --topDistance + '%';
            }
            break;