Javascript 使用箭头键移动网格布局中的元素

我正在创建一个基于回合的游戏。目前我有一个16*16的网格。对于所有四个箭头键，我都有一个事件侦听器。我在第一个网格项中放置了一个圆。 我想用箭头键一次移动一个网格单元。 我不能动脑，我怎么能这样做。我想我应该有一个变量来跟踪这个圆。但如何将其移动到下键的另一个单元格

const container=document.querySelector（“.grid”）；
const gridNodes=document.queryselectoral（“.grid项”）；
const gridArray=Array.from（gridNodes）；
让circle=document.createElement（“div”）；
函数makeGrid（行、列）{
container.style.setProperty（“--grid rows”，rows）；
container.style.setProperty（“--grid cols”，cols）；
for（设c=0；c
：根目录{
--网格cols:1；
--网格行：1；
}
.集装箱{
显示：网格；
网格模板行：重复（变量（--网格行），1fr）；
网格模板列：重复（var（--grid cols），1fr）；
}
.表格项目{
填充：1em；
边框：1px实心#ddd；
文本对齐：居中；
}

转垒游戏
回合制棋盘游戏
这个问题很好

首先为每个箱子分配坐标
根据坐标（例如网格项目01、网格项目02等）增加等级
保持当前光标的位置（最初为{x:0，y:0}）
对于每个按键，处理位置对象并渲染圆

const container=document.querySelector（“.grid”）；
const gridNodes=document.queryselectoral（“.grid项”）；
const gridArray=Array.from（gridNodes）；
让circle=document.createElement（“div”）；
设位置={x:0，y:0}；
函数makeGrid（行、列）{
container.style.setProperty（“--grid rows”，rows）；
container.style.setProperty（“--grid cols”，cols）；
设x=0；
设y=0；
for（设c=0；c
：根目录{
--网格cols:1；
--网格行：1；
}
.集装箱{
显示：网格；
网格模板行：重复（变量（--网格行），1fr）；
网格模板列：重复（var（--grid cols），1fr）；
}
.表格项目{
填充：1em；
边框：1px实心#ddd；
文本对齐：居中；
}

转垒游戏
回合制棋盘游戏
我需要时间来理解背后的逻辑，但我注意到，当圆圈在边界上时，它会抛出一个错误。例如，在（0,0）处，如果您点击keyup或keyleft，它将抛出错误。@Mehmood Yes。。。这些是边缘情况，您可以轻松修复