Javascript 您如何制作<；img>；从<；td>；至<；td>；使用箭头键？

我有一个10x10表，其中一个单元格中有一个图像。这是代码

$(document).ready(function(){
            var allTds = $("td")
            for(i in allTds){
                if(Math.random() < 0.4){
                    allTds.eq(i).addClass("block")
                }
            }
            var allOpen = $("td:not(.block)")
            var selectLoc1 = Math.floor(Math.random()*allOpen.length)
            var selectLoc2 = Math.floor(Math.random()*allOpen.length)
            var image = $("<img>")
            image.attr("src", "pawn.png")
            allOpen.eq(selectLoc1).append(image)
            allOpen.eq(selectLoc2).addClass("goal")
})

$（文档）.ready（函数（）{
var allTds=$（“td”）
对于（所有TDS中的i）{
if（Math.random（）<0.4）{
allTds.eq（i）.addClass（“块”）
}
}
var allOpen=$（“td:not（.block）”）
var selectLoc1=Math.floor（Math.random（）*allOpen.length）
var selectLoc2=Math.floor（Math.random（）*allOpen.length）
变量图像=$（“
当用户按下箭头键时，图像必须从td移动到td，具体取决于按下的箭头键。我将如何在代码中实现这一点？谢谢。
您必须检测按键事件，并根据按下的键将图像移动到相应的单元格

例如，假设
imageCellRow，imageCellColumn
是图像的当前位置。然后将使用以下逻辑将图像移动到新位置

switch(arrowKey) {
    case leftArrow:
        console.log("left");
        imageCellColumn--;
        break;
    case rightArrow:
        console.log("right");
        imageCellColumn++;
        break;
    case upArrow:
        console.log("up");
        imageCellRow--;
        break;
    case downArrow:
        console.log("down");
        imageCellRow++;
        break;
}

imageCellRow = (imageCellRow + height) % height;
imageCellColumn = (imageCellColumn + width) % width;

现在您有了图像的新位置，剩下的就是删除旧图像并将其添加到新位置

switch(arrowKey) {
    case leftArrow:
        console.log("left");
        imageCellColumn--;
        break;
    case rightArrow:
        console.log("right");
        imageCellColumn++;
        break;
    case upArrow:
        console.log("up");
        imageCellRow--;
        break;
    case downArrow:
        console.log("down");
        imageCellRow++;
        break;
}

imageCellRow = (imageCellRow + height) % height;
imageCellColumn = (imageCellColumn + width) % width;

下面是一个工作示例（单击生成的表，然后按箭头键）


$（函数（）{
//console.log（“启动”）；
var表宽=5；
var表高=5；
var imageUrl=”https://cdn.pixabay.com/photo/2013/07/12/15/02/penguin-149275_960_720.png";
变量图像=$（“”）；
可生成（桌宽、桌高）；
addImageToCell（$（“表”），图像，0,0；
/*  */
（功能（）{
var表=$（“表”）；
var宽度=table.find（“tr:first td”）.长度；
变量高度=表格查找（“tr”）.长度；
//控制台日志（“表尺寸：“+宽度+”，“+高度”）；
//初始图像单元
var-imageCellRow=0；
var imageCellColumn=0；
var-leftArrow=37；
var upArrow=38；
var-rightArrow=39；
var向下箭头=40；
$（文档）.keydown（函数（e）{
//从当前单元格中删除图像
table.find（“tr:eq（“+imageCellRow+”）td:eq（“+imageCellColumn+”）img”）.remove（）；
开关（e.which）{
大小写左箭头：
//控制台日志（“左”）；
ImageCell列--；
打破
大小写右箭头：
//控制台日志（“右”）；
imageCellColumn++；
打破
向上箭头：
//控制台。登录（“up”）；
imageCellRow--；
打破
大小写向下箭头：
//控制台。登录（“关闭”）；
imageCellRow++；
打破
}
imageCellRow=（imageCellRow+高度）%高度；
imageCellColumn=（imageCellColumn+宽度）%width；
addImageToCell（表、图像、imageCellRow、imageCellColumn）；
});
})();
/*  */
//生成具有给定维度的表
函数生成器（宽度、高度）{
var表=”；
对于（var j=0；j


运输署{
宽度：50px；
高度：50px；
边框：1px纯黑；
}
td-img{
宽度：45px；
高度：45px；
}
您必须检测按键按下事件，并根据按键将图像移动到相应的单元格中

例如，假设
imageCellRow，imageCellColumn
是图像的当前位置。然后将使用以下逻辑将图像移动到新位置

switch(arrowKey) {
    case leftArrow:
        console.log("left");
        imageCellColumn--;
        break;
    case rightArrow:
        console.log("right");
        imageCellColumn++;
        break;
    case upArrow:
        console.log("up");
        imageCellRow--;
        break;
    case downArrow:
        console.log("down");
        imageCellRow++;
        break;
}

imageCellRow = (imageCellRow + height) % height;
imageCellColumn = (imageCellColumn + width) % width;

现在您有了图像的新位置，剩下的就是删除旧图像并将其添加到新位置

switch(arrowKey) {
    case leftArrow:
        console.log("left");
        imageCellColumn--;
        break;
    case rightArrow:
        console.log("right");
        imageCellColumn++;
        break;
    case upArrow:
        console.log("up");
        imageCellRow--;
        break;
    case downArrow:
        console.log("down");
        imageCellRow++;
        break;
}

imageCellRow = (imageCellRow + height) % height;
imageCellColumn = (imageCellColumn + width) % width;

下面是一个工作示例（单击生成的表，然后按箭头键）


$（函数（）{
//console.log（“启动”）；
var表宽=5；
var表高=5；
var imageUrl=”https://cdn.pixabay.com/photo/2013/07/12/15/02/penguin-149275_960_720.png";
变量图像=$（“”）；
可生成（桌宽、桌高）；
addImageToCell（$（“表”），图像，0,0；
/*  */
（功能（）{
var表=$（“表”）；
var宽度=table.find（“tr:first td”）.长度；
变量高度=表格查找（“tr”）.长度；
//控制台日志（“表尺寸：“+宽度+”，“+高度”）；
//初始图像单元
var-imageCellRow=0；
var imageCellColumn=0；
var-leftArrow=37；
var upArrow=38；
var-rightArrow=39；
var向下箭头=40；
$（文档）.keydown（函数（e）{
//从当前单元格中删除图像
table.find（“tr:eq（“+imageCellRow+”）td:eq（“+imageCellColumn+”）img”）.remove（）；
开关（e.which）{
大小写左箭头：
//控制台日志（“左”）；
ImageCell列--；
打破
大小写右箭头：
//控制台日志（“右”）；
imageCellColumn++；
打破
向上箭头：
//控制台。登录（“up”）；
imageCellRow--；
打破
大小写向下箭头：
//控制台。登录（“关闭”）；
imageCellRow++；
打破
}
imageCellRow=（imageCellRow+高度）%高度；
imageCellColumn=（imageCellColumn+宽度）%width；
addImageToCell（表、图像、imageCellRow、imageCellColumn）；
});
})();
/*  */
//生成具有给定维度的表
函数生成器（宽度、高度）{
var表=”；
对于（var j=0；j


运输署{
宽度：50px；
高度：50px；
边框：1px纯黑；
}
td-img{
宽度：45px；
高度：45px；
}
这是一个仅用于背景更改和浏览表格的示例。。。
我想剩下的很简单



表键
td{宽度：20px；高度：20px；背景：#ddd；}
tr:nth child（5）td:nth child（5）{背景：#f00；}