Javascript 我能'；t交换表格第一行或最后一行中的图像

我正在努力使图片交换。有16个正方形，但由于某些原因，我无法移动到表格单元格2d数组的最后一行或第一行

有人看到我的问题了吗？这是我的Javascript：

var cellArray;
var knight = "<img src=\"Knight.png" + "\">";
var pit =  "<img src=\"Pit.png" + "\">";
var princess = "<img src=\"princess.png" + "\">";

function makeCells()
{
cellArray = new Array(
[
    document.getElementById("c1"),
    document.getElementById("c2"),
    document.getElementById("c3"),
    document.getElementById("c4")],
[   document.getElementById("c5"),
    document.getElementById("c6"),
    document.getElementById("c7"),
    document.getElementById("c8")],
[   document.getElementById("c9"),
    document.getElementById("c10"),
    document.getElementById("c11"),
    document.getElementById("c12")],
[   document.getElementById("c13"),
    document.getElementById("c14"),
    document.getElementById("c15"),
    document.getElementById("c16")
]);
placePictures();   
}

function placePictures()
{
   // var princess = document.createElement("img");
   // princess.src = "princess.png";
   // var pit = document.createElement("img");
  //  pit.src = "Pit.png";

//var randomArrayElement = Math.floor(Math.random() * (16));

for(i = 0; i < 4; i++)
{
    for(j = 0; j < 4; j++)
    {
        if(i == 0 && j == 0)
        {
            cellArray[i][j].innerHTML = knight;;
            for(k = 0; k < 3; k++)
            {
                var row = Math.floor(Math.random() * (3));
                var col = Math.floor(Math.random() * (3));
                if(row !== 0 && col !== 0 || row !== col || row !== 3 && col !== 3)
                    cellArray[row][col].innerHTML = pit;
            }
        }
        if(i == 3 && j == 3)
        {
             cellArray[i][j].innerHTML = princess;
        }
    }
}

for(i = 0; i < 4; i++)
{
    for(j = 0; j < 4; j++)
    {
        if(cellArray[i][j].innerHTML == "")
        cellArray[i][j].innerHTML = "<img src = Floor.png>";
    }
}
}

 function clickIt(row, col)
 {
var top = (row - 1);
var bottom = (row + 1);
var left = (col - 1);
var right = (col + 1);
var temp = cellArray[row][col].innerHTML; 

if(cellArray[top][col].innerHTML === knight && cellArray[row][col].innerHTML !== pit)
{
    cellArray[row][col].innerHTML = cellArray[top][col].innerHTML;
    cellArray[top][col].innerHTML = temp;
}
else if(cellArray[bottom][col].innerHTML === knight && cellArray[row][col].innerHTML !== pit)
{
    cellArray[row][col].innerHTML = cellArray[bottom][col].innerHTML;
    cellArray[bottom][col].innerHTML = temp;
}
else if(cellArray[row][left].innerHTML === knight && cellArray[row][col].innerHTML !== pit)
{
    cellArray[row][col].innerHTML = cellArray[row][left].innerHTML;
    cellArray[row][left].innerHTML = temp;
}
else if(cellArray[row][right].innerHTML === knight && cellArray[row][col].innerHTML !== pit)
{
    cellArray[row][col].innerHTML = cellArray[row][right].innerHTML;
    cellArray[row][right].innerHTML = temp;
}
else
{
    alert("NOPE");
}
alert("End");
}

var射线；
var knight=“”；
var pit=“”；
var公主=”；
函数makeCells（）
{
新数组(
[
文件.getElementById（“c1”），
文件.getElementById（“c2”），
文档.getElementById（“c3”），
document.getElementById（“c4”）]，
[文件.getElementById（“c5”），
文档.getElementById（“c6”），
document.getElementById（“c7”），
document.getElementById（“c8”）]，
[文件.getElementById（“c9”），
document.getElementById（“c10”），
document.getElementById（“c11”），
document.getElementById（“c12”）]，
[文件.getElementById（“c13”），
document.getElementById（“c14”），
document.getElementById（“c15”），
document.getElementById（“c16”）
]);
placePictures（）；
}
函数placePictures（）
{
//var公主=document.createElement（“img”）；
//princess.src=“princess.png”；
//var pit=document.createElement（“img”）；
//pit.src=“pit.png”；
//var randomArrayElement=Math.floor（Math.random（）*（16））；
对于（i=0；i<4；i++）
{
对于（j=0；j<4；j++）
{
如果（i==0&&j==0）
{
cellArray[i][j].innerHTML=knight；；
对于（k=0；k<3；k++）
{
var row=Math.floor（Math.random（）*（3））；
var col=Math.floor（Math.random（）*（3））；
如果（行！==0&&col！==0 | |行！==col | |行！==3&&col！==3）
光线[行][col].innerHTML=pit；
}
}
如果（i==3&&j==3）
{
cellArray[i][j].innerHTML=公主；
}
}
}
对于（i=0；i<4；i++）
{
对于（j=0；j<4；j++）
{
if（ray[i][j].innerHTML==“”）
[i][j].innerHTML=“”；
}
}
}
函数单击它（行、列）
{
var top=（第1行）；
变量底部=（行+1）；
左向量=（列-1）；
右向量=（列+1）；
var temp=ray[row][col].innerHTML；
如果（cellArray[top][col].innerHTML==knight&&cellArray[row][col].innerHTML！==pit）
{
cellArray[row][col].innerHTML=cellArray[top][col].innerHTML；
雷[top][col].innerHTML=temp；
}
else if（ceralray[bottom][col].innerHTML==knight&&ceralray[row][col].innerHTML！==pit）
{
cellArray[row][col].innerHTML=cellArray[bottom][col].innerHTML；
光线[bottom][col].innerHTML=temp；
}
else if（ceralray[row][left]。innerHTML==knight&&ceralray[row][col]。innerHTML！==pit）
{
cellArray[row][col]。innerHTML=cellArray[row][left]。innerHTML；
光线[行][左].innerHTML=temp；
}
else if（ceralray[row][right]。innerHTML==knight&&ceralray[row][col]。innerHTML！==pit）
{
cellArray[row][col].innerHTML=cellArray[row][right].innerHTML；
光线[行][右].innerHTML=temp；
}
其他的
{
警报（“NOPE”）；
}
警报（“结束”）；
}

HTML:

移动迷宫

我发现您的顶部、底部、右侧变量跨越了cellArray的边界（顶部变为-1，底部、右侧变为4），我建议您尝试使用此代码，并根据需要修改它：

var射线；
var knight=“”；
var pit=“”；
var公主=”；
函数makeCells（）
{
新数组(
[
文件.getElementById（“c1”），
文件.getElementById（“c2”），
文档.getElementById（“c3”），
document.getElementById（“c4”）]，
[文件.getElementById（“c5”），
文档.getElementById（“c6”），
document.getElementById（“c7”），
document.getElementById（“c8”）]，
[文件.getElementById（“c9”），
document.getElementById（“c10”），
document.getElementById（“c11”），
document.getElementById（“c12”）]，
[文件.getElementById（“c13”），
document.getElementById（“c14”），
document.getElementById（“c15”），
document.getElementById（“c16”）
]);
placePictures（）；
}
函数placePictures（）
{
//var公主=document.createElement（“img”）；
//princess.src=“princess.png”；
//var pit=document.createElement（“img”）；
//pit.src=“pit.png”；
//var randomArrayElement=Math.floor（Math.random（）*（16））；
对于（i=0；i<4；i++）
{
对于（j=0；j<4；j++）
{
如果（i==0&&j==0）
{
雷[i][j].innerHTML=knight；
;
对于（k=0；k<3；k++）
{
var row=Math.floor（Math.random（）*（3））；
var col=Math.floor（Math.random（）*（3））；
如果（行！==0&&col！==0 | |行！==col | |行！==3
<html>
    <head>
        <title>Maze Runner</title>
        <script src="javascriptMazeRunner.js"></script>
        <link rel="stylesheet" type="text/css" href="MazeRunnerCSS.css"/>
    </head>
    <body onload="makeCells()">
        <form id="MainForm">
            <table id="MazeTable">
                <tr id="Row1">
                    <td id="c1" class="Blue" onclick="clickIt(0,0)"></td>
                    <td id="c2" class="Blue" onclick="clickIt(0,1)"></td>
                    <td id="c3" class="Blue" onclick="clickIt(0,2)"></td>
                    <td id="c4" class="Blue" onclick="clickIt(0,3)"></td>
                </tr>
                <tr id="Row2">
                    <td id="c5" class="Blue" onclick="clickIt(1,0)"></td>
                    <td id="c6" class="Blue" onclick="clickIt(1,1)"></td>
                    <td id="c7" class="Blue" onclick="clickIt(1,2)"></td>
                    <td id="c8" class="Blue" onclick="clickIt(1,3)"></td>
                </tr>
                <tr id="Row3">
                    <td id="c9" class="Blue" onclick="clickIt(2,0)"></td>
                    <td id="c10" class="Blue" onclick="clickIt(2,1)"></td>
                    <td id="c11" class="Blue" onclick="clickIt(2,2)"></td>
                    <td id="c12" class="Blue" onclick="clickIt(2,3)"></td>
                </tr>
                <tr id="Row4">
                    <td id="c13" class="Blue" onclick="clickIt(3,0)"></td>
                    <td id="c14" class="Blue" onclick="clickIt(3,1)"></td>
                    <td id="c15" class="Blue" onclick="clickIt(3,2)"></td>
                    <td id="c16" class="Blue" onclick="clickIt(3,3)"></td>
                </tr>
            </table>    
        </form>
    </body>
</html>

cellArray[top][col].innerHTML 

cellArray[-1][-1].innerHTML