Компактный футляр в javascript - PullRequest
Новая
       8

Компактный футляр в javascript

0 голосов
/ 12 декабря 2018

Я создал шахматную доску, и мне не понравился вид моего заявления о смене случая.Я думаю, что должен быть способ сжать его, но я не могу его найти.Может быть, некоторые из вас могут мне помочь.

Дополнительные пояснения, шахматные фигуры находятся в двумерном массиве (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"]
];

И в каждом поле шахматной доски есть своисобственный идентификатор от "00" до "77", где первая цифра - строка, а вторая - столбец.

Код innerHTML - это просто Юникод для шахматных фигур, как показано здесь: 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;
        }
    }
}

1 Ответ

0 голосов
/ 12 декабря 2018

Поскольку коды символов для шахматных фигур являются последовательными, вы можете сделать это следующим образом: 

div.innerHTML = "&#" + (9812 + "KQRBNPkqrbnp".indexOf(arr2[r][c])) + ";";

Обратите внимание, что сущностям HTML требуется завершающая точка с запятой, даже если браузеры прощают.

Вам даже не нужно преобразовывать код символа в HTML-сущность, если вы используете textContent: 

div.textContent = String.fromCharCode(9812 + "KQRBNPkqrbnp".indexOf(arr2[r][c]));

Вам также необходимо учитывать пустые квадраты, по крайней мере, при запускедвижущиеся части и использовать тот же код для обновления дисплея.Этот случай не рассматривается в вашем коде, но вы можете просто изолировать этот случай с помощью троичного оператора, как в этой демонстрации: 

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