我创建了一个棋盘,但我不喜欢我的 switch case 语句的外观。我想一定有办法压缩它,但我找不到。也许你们中的一些人可以帮助我。
补充说明,棋子是二维数组(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 = "♚";
break;
case 'q':
div.innerHTML = "♛";
break;
case 'r':
div.innerHTML = "♜";
break;
case 'b':
div.innerHTML = "♝";
break;
case 'n':
div.innerHTML = "♞";
break;
case 'p':
div.innerHTML = "♟";
break;
//white piecec
case 'K':
div.innerHTML = "♔";
break;
case 'Q':
div.innerHTML = "♕";
break;
case 'R':
div.innerHTML = "♖";
break;
case 'B':
div.innerHTML = "♗";
break;
case 'N':
div.innerHTML = "♘";
break;
case 'P':
div.innerHTML = "♙";
break;
}
}
}
最佳答案
由于棋子的字符编码是连续的,可以这样写:
div.innerHTML = "&#" + (9812 + "KQRBNPkqrbnp".indexOf(arr2[r][c])) + ";";
请注意,即使浏览器是宽容的,HTML 实体也需要一个终止分号。
如果使用 textContent
,您甚至不必将字符代码转换为 HTML 实体:
div.textContent = String.fromCharCode(9812 + "KQRBNPkqrbnp".indexOf(arr2[r][c]));
您还需要考虑空方 block ,至少当您开始移动棋子并使用相同的代码更新显示时。你的代码中没有处理这种情况,但你可以像这个演示中那样用三元运算符隔离这种情况:
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>
关于javascript - 在javascript中压缩一个开关盒,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53745000/