Javascript 如何知道元素是网格上的哪个图块？

我正在制作一个pesudo蛇游戏来测试我的能力。我在我的网页上有一个25对25的格子，还有一个正方形，玩家可以在格子上控制它，并且需要去吃东西。玩家从左上角的牌（牌1，1）开始，我想知道他在每一个动作中都是什么牌-例如，如果他从起始牌（牌1，1）往下走，我想要一个console.log，上面写着（1，2），如果他向右走，上面写着（2，2）。有没有可能做到这一点？提前谢谢

简而言之，以下是我想要的代码类型：

document.onkeydown = function(event) {
    const key = event.key;
    if (key == "ArrowRight") {
        console.log(*Here I want it to say which tile the player is*);
    } else if (key == "ArrowLeft") {
        console.log(*Here I want it to say which tile the player is*);
    } else if (key == "ArrowDown") {
        console.log(*Here I want it to say which tile the player is*);
    } else if (key == "ArrowUp") {
        console.log(*Here I want it to say which tile the player is*);
    }
}

---

您可以使用简单的javascript找出用户按下的键，如下所示-

//开始位置-第0个索引表示x轴，第1个索引表示y轴。用户从（0,0）开始
让我们开始_pos=[0,0]
document.onkeydown=函数（事件）{
const key=event.key；
开关（事件键）{
案例“箭头左”：
开始位置[0]-=1
控制台日志（启动位置）
打破
案例“ArrowRight”：
开始位置[0]+=1
控制台日志（启动位置）
打破
案例“ArrowUp”：
开始位置[1]+=1
控制台日志（启动位置）
打破
案例“箭头向下”：
开始位置[0]-=1
控制台日志（启动位置）
打破
}
};您可以使用简单的javascript找出用户按下的键，如下所示-


//开始位置-第0个索引表示x轴，第1个索引表示y轴。用户从（0,0）开始
让我们开始_pos=[0,0]
document.onkeydown=函数（事件）{
const key=event.key；
开关（事件键）{
案例“箭头左”：
开始位置[0]-=1
控制台日志（启动位置）
打破
案例“ArrowRight”：
开始位置[0]+=1
控制台日志（启动位置）
打破
案例“ArrowUp”：
开始位置[1]+=1
控制台日志（启动位置）
打破
案例“箭头向下”：
开始位置[0]-=1
控制台日志（启动位置）
打破
}
};
能否添加用于绘制25x25网格的代码以及如何存储瓷砖？你可能需要一个二维数组来完成这个任务。我没有做任何花哨的事情，我做了：“#游戏{背景色：黑色；边距：50px；对齐内容：中心；对齐项目：中心；宽度：500px；高度：500px；显示：网格；网格模板列：重复（25，1fr）；网格模板行：重复（25，1fr）；}“您需要保存蛇的状态。每当按下一个键时，您就可以从保存其状态的全局对象获取它。负责键触发器的函数不应该关心蛇在哪里，j必须获取当前状态并命令其他操作来处理输入。您可以添加用于绘制25x25网格的代码以及如何存储瓷砖吗？您可能需要一个二维数组来完成此操作。我没有做任何花哨的事情，我做了：`#游戏{背景颜色：黑色；边距：50px；对齐内容：中心；对齐项目：中心；宽度：500px；高度：500px；显示：网格；网格模板列：重复（25，1fr）；网格模板行：重复（25，1fr）；}“您需要保存蛇的状态。每当按下一个键时，您就可以从保存其状态的全局对象获取它。负责键触发器的函数不应该关心蛇在哪里，just获取当前状态并命令其他操作来处理输入。