Question

我已经创建了一个国际象棋棋盘，但我不喜欢我的开关案例说明的外观。我认为必须有一种压缩方法，但是我找不到。也许有些人可以帮助我。

额外的解释是，棋子是二维数组（arr2）：

[
    ["R", "N", "B", "Q", "K", "B", "N", "R"],
    ["P", "P", "P", "P", "P", "P", "P", "P"],
    ["0", "0", "0", "0", "0", "0", "0", "0"],
    ["0", "0", "0", "0", "0", "0", "0", "0"],
    ["0", "0", "0", "0", "0", "0", "0", "0"],
    ["0", "0", "0", "0", "0", "0", "0", "0"],
    ["p", "p", "p", "p", "p", "p", "p", "p"],
    ["r", "n", "b", "q", "k", "b", "n", "r"]
];

国际象棋棋盘的每个字段都有其自己的ID形式，从“ 00”到“ 77”，其中第一位是行，第二位是列。

innerHTML代码只是象棋的unicode，如下所示： https://en.wikipedia.org/wiki/Chess_symbols_in_Unicode#Unicode_code_points_and_HTML

for (let r = 0; r < arr2.length; r++) {
    for (let c = 0; c < arr2.length; c++) {
        div = document.getElementById(r + "" + c)
        switch (arr2[r][c]){
            //black piece
            case 'k':
                div.innerHTML = "&#9818";
                break;
            case 'q':
                div.innerHTML = "&#9819";
                break;
            case 'r':
                div.innerHTML = "&#9820";
                break;
            case 'b':
                div.innerHTML = "&#9821";
                break;
            case 'n':
                div.innerHTML = "&#9822";
                break;                
            case 'p':
                div.innerHTML = "&#9823";
                break;
            //white piecec
            case 'K':
                div.innerHTML = "&#9812";
                break;
            case 'Q':
                div.innerHTML = "&#9813";
                break;
            case 'R':
                div.innerHTML = "&#9814";
                break;
            case 'B':
                div.innerHTML = "&#9815";
                break;
            case 'N':
                div.innerHTML = "&#9816";
                break;                
            case 'P':
                div.innerHTML = "&#9817";
                break;
        }
    }
}

Answer 1

由于棋子的字符代码是连续的，因此您可以这样做：

textContent

请注意，即使浏览器允许，HTML实体也需要使用终止分号。

如果您使用div.textContent = String.fromCharCode(9812 + "KQRBNPkqrbnp".indexOf(arr2[r][c]));，甚至不必将字符代码转换为HTML实体：

function showBoard(arr2) {
    for (let r = 0; r < arr2.length; r++) {
        for (let c = 0; c < arr2.length; c++) {
            const div = document.getElementById(r + "" + c)
            div.textContent = arr2[r][c] === "0" ? ""
                : String.fromCharCode(9812 + "KQRBNPkqrbnp".indexOf(arr2[r][c]));
        }
    }
}

const arr2 = [
    ["R", "N", "B", "Q", "K", "B", "N", "R"],
    ["P", "P", "P", "P", "P", "P", "P", "P"],
    ["0", "0", "0", "0", "0", "0", "0", "0"],
    ["0", "0", "0", "0", "0", "0", "0", "0"],
    ["0", "0", "0", "0", "0", "0", "0", "0"],
    ["0", "0", "0", "0", "0", "0", "0", "0"],
    ["p", "p", "p", "p", "p", "p", "p", "p"],
    ["r", "n", "b", "q", "k", "b", "n", "r"]
];
showBoard(arr2);

至少在开始移动碎片并使用相同的代码更新显示时，还需要考虑空白方块。这种情况不会在您的代码中处理，但是您可以像本演示中那样使用三元运算符隔离这种情况：

table { border-collapse: collapse; border-spacing: 0; }

#chessboard { border: 1px solid; }
#chessboard tr td { width: 20px; height: 20px; }
#chessboard tr:nth-child(2n) td:nth-child(2n+1),
#chessboard tr:nth-child(2n+1) td:nth-child(2n) { background: silver; }

<table id="chessboard">
<tr><td id="00"></td><td id="01"></td><td id="02"></td><td id="03"></td><td id="04"></td><td id="05"></td><td id="06"></td><td id="07"></td></tr>
<tr><td id="10"></td><td id="11"></td><td id="12"></td><td id="13"></td><td id="14"></td><td id="15"></td><td id="16"></td><td id="17"></td></tr>
<tr><td id="20"></td><td id="21"></td><td id="22"></td><td id="23"></td><td id="24"></td><td id="25"></td><td id="26"></td><td id="27"></td></tr>
<tr><td id="30"></td><td id="31"></td><td id="32"></td><td id="33"></td><td id="34"></td><td id="35"></td><td id="36"></td><td id="37"></td></tr>
<tr><td id="40"></td><td id="41"></td><td id="42"></td><td id="43"></td><td id="44"></td><td id="45"></td><td id="46"></td><td id="47"></td></tr>
<tr><td id="50"></td><td id="51"></td><td id="52"></td><td id="53"></td><td id="54"></td><td id="55"></td><td id="56"></td><td id="57"></td></tr>
<tr><td id="60"></td><td id="61"></td><td id="62"></td><td id="63"></td><td id="64"></td><td id="65"></td><td id="66"></td><td id="67"></td></tr>
<tr><td id="70"></td><td id="71"></td><td id="72"></td><td id="73"></td><td id="74"></td><td id="75"></td><td id="76"></td><td id="77"></td></tr>
</table>

{{1}}

用JavaScript压缩开关盒

1 个答案: