Question

我正在尝试换图片。有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");
}

HTML：

<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>

Answer 1

我发现你的top，bottom，right变量跨越了cellArray的边界（top变为-1和bottom，右变为4），我建议你尝试这段代码并根据你的需求进行修改：

position: absolute

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(top < 0)
                    top = 0;
                if(bottom >= cellArray[row].length)
                    bottom = cellArray[row].length-1;
                if(right >= cellArray[row].length)
                    right = cellArray[row].length-1;

                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");
            }
makeCells();

我希望这项工作：）

Answer 2

从我在你的代码中可以看到的是，每当点击任何边框行时为：ID“C1”，行：

cellArray[top][col].innerHTML

意味着

cellArray[-1][-1].innerHTML

这是一个无效的引用，这将导致脚本崩溃而不再执行，从而导致您的问题。

我无法在桌子的第一行或最后一行交换图像

2 个答案: