javascript 实现棋子随机移动

Question

问题遇到的现象和发生背景

想使用改变目标格子的class属性的方式来实现两色棋子按顺序移动到随机白色部分内，但以下代码不稳定，无法实现棋子移动到目标位置，然后原位置回到白色状态的期望

问题相关代码，请勿粘贴截图

var pieces = [
    [ 0,-1, 0,-1, 0,-1, 0,-1],
    [-1, 0,-1, 0,-1, 0,-1, 0],
    [ 0,-1, 0,-1, 0,-1, 0,-1],
    [ 0, 0, 0, 0, 0, 0, 0, 0],
    [ 0, 0, 0, 0, 0, 0, 0, 0],
    [ 1, 0, 1, 0, 1, 0, 1, 0],
    [ 0, 1, 0, 1, 0, 1, 0, 1],
    [ 1, 0, 1, 0, 1, 0, 1, 0],
];
var INI = 1;//show that what color can move now
function randomMove() {
    document.getElementById("member3").innerHTML = "MaYiming";
    do {
        var r1=Math.floor(Math.random()*8)
        var c1=Math.floor(Math.random()*8)
        var r2=Math.floor(Math.random()*8)
        var c2=Math.floor(Math.random()*8)
    }
    while
        (pieces[r1][c1] == 0 ||
            pieces[r2][c2] !=0 ||
        (r2 + c2) % 2 == 0 ||
        (pieces[r1][c1] == -1 && INI == 0) ||
        (pieces[r1][c1] == 1 && INI == 1));//if the parameters did not met the requirment, continute until it does
       pieces[r2][c2] = pieces[r1][c1];//movement of the checkers must be noticed in the array
    if 
        (pieces[r1][c1] == 1 && INI == 0) 
        {document.getElementById(getCellID(8, r2, c2)).className = "Bc";INI += 1;pieces[r1][c1] = 0}
    else if 
        (pieces[r1][c1] == -1 && INI == 1) 
        {document.getElementById(getCellID(8, r2, c2)).className = "Rc";INI -=1;}
    pieces[r1][c1] = 0;
    {if ((r1 + c1) % 2 != 0) {document.getElementById(getCellID(8, r1, c1)).className = 'W';}
        else {document.getElementById(getCellID(8, r1, c1)).className = 'B';}
    }
}

td{ text-align: center;width: 100px;height: 100px; border: pink 1px solid;}
.W{background-color: white; }
.B{background-color: darkgrey ; }
.Rc{background-image: url("../image/Rc.jpg"); background-size: cover}
.Bc{background-image: url("../image/Bc.jpg");background-size: cover}

运行结果及报错内容

会出现这种。。奇怪的棋子增加了的。。状况，而只有那个突出来的红色棋子是想要的状态

我想要达到的结果

从红色开始，依次移动到随机白色格子内，并且不移动到同色棋子的位置，会吃掉其他颜色的棋子

Answer 1

目测题主生成棋盘的时候还是用的上一个问题for循环的开始结束值

上一个问题行列是从1开始的，8结束。

而randomMove中行列是从0开始，7结束

那么如果随机到0位置的棋子，那么生成的id会出错，导致下面获取的dom为null，导致设置样式出错而无法还原

更改下棋盘for循环的开始结束位置为0~7就没问题了。代码如下

<style>
td{ text-align: center;width: 50px;height: 50px; border: pink 1px solid;}
.W{background-color: white; }
.B{background-color: darkgrey ; }
.Rc{background-image: url("r.jpg"); background-size: cover}
.Bc{background-image: url("b.jpg");background-size: cover}
</style>
<div style="width:500px;margin:20px auto">
    <div id="board"></div>
    <div id="member3"></div>
    <input type="button" onclick="randomMove()" value="移动棋子" />
</div>
<script>
    var pieces = [
        [0, -1, 0, -1, 0, -1, 0, -1],
        [-1, 0, -1, 0, -1, 0, -1, 0],
        [0, -1, 0, -1, 0, -1, 0, -1],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [1, 0, 1, 0, 1, 0, 1, 0],
        [0, 1, 0, 1, 0, 1, 0, 1],
        [1, 0, 1, 0, 1, 0, 1, 0],
    ];
    var INI = 1;//show that what color can move now
    function randomMove() {
        document.getElementById("member3").innerHTML = "MaYiming";
        do {
            var r1 = Math.floor(Math.random() * 8)
            var c1 = Math.floor(Math.random() * 8)
            var r2 = Math.floor(Math.random() * 8)
            var c2 = Math.floor(Math.random() * 8)
        }
        while
            (pieces[r1][c1] == 0 ||
            pieces[r2][c2] != 0 ||
            (r2 + c2) % 2 == 0 ||
            (pieces[r1][c1] == -1 && INI == 0) ||
            (pieces[r1][c1] == 1 && INI == 1));//if the parameters did not met the requirment, continute until it does

        pieces[r2][c2] = pieces[r1][c1];//movement of the checkers must be noticed in the array


        if (pieces[r1][c1] == 1 && INI == 0) { document.getElementById(getCellID(8, r2, c2)).className = "Bc"; INI += 1; pieces[r1][c1] = 0 }
        else if (pieces[r1][c1] == -1 && INI == 1) { document.getElementById(getCellID(8, r2, c2)).className = "Rc"; INI -= 1; }

        pieces[r1][c1] = 0;

        if ((r1 + c1) % 2 != 0) { document.getElementById(getCellID(8, r1, c1)).className = 'W'; }
        else { document.getElementById(getCellID(8, r1, c1)).className = 'B'; }

    }

    var i, z = "0";
    var r = "";
    var c = "0";
    var kv = {'-1':'Rc',1:'Bc'}

    function drawGameBoard(r, c) {
        var table = document.createElement("table"); table.border = '1'
        for (i=0; i < r; i++) {//////////////////////////////////////////改这里
            var ttr = document.createElement("tr");
            for (z = 0; z < c; z++) {//////////////////////////////////////////改这里
                var chess = kv[pieces[i ][z]] || '';
                var ttd = document.createElement("td");
                if (i % 2) {
                    ttd.className = z % 2 ? 'B' : "W";
                }
                else {
                    ttd.className = z % 2 ? 'W' : "B";
                }
                ttd.className += ' ' + chess;
                ttd.id = getCellID(8, i, z);
                ttr.appendChild(ttd)
            };
            table.appendChild(ttr)
        };
        var board = document.getElementById("board");
        document.getElementById("board").appendChild(table);
    };
    function getCellID(colsPerRow, r, c) { var id = colsPerRow * r + c; return "c" + id; };
    drawGameBoard(8, 8)
</script>

有帮助麻烦点下【采纳该答案】，谢谢~~