在 javascript 中压缩开关盒 [英] Compact a switch case in javascript
问题描述
我创建了一个棋盘，但我不喜欢 switch case 语句的外观.我认为必须有一种方法可以压缩它，但我找不到.也许你们中的一些人可以帮助我.
补充说明，棋子是二维数组(arr2):
棋盘的每个区域都有自己的id格式00"到77"，其中第一个数字是行，第二个数字是列.
innerHTML 代码只是棋子的 unicode，如下所示:https://en.wikipedia.org/wiki/Chess_symbols_in_Unicode#Unicode_code_points_and_HTML
for (let r = 0; r 由于棋子的字符代码是连续的，你可以这样做:
div.innerHTML = "&#" + (9812 + "KQRBNPkqrbnp".indexOf(arr2[r][c])) + ";";请注意，即使浏览器允许，HTML 实体也需要终止分号.
如果您使用 textContent，您甚至不必将字符代码转换为 HTML 实体:
div.textContent = String.fromCharCode(9812 + "KQRBNPkqrbnp".indexOf(arr2[r][c]));您还需要考虑空方块，至少在您开始移动棋子并使用相同的代码更新显示时.这种情况不会在您的代码中处理，但您可以像在此演示中一样使用三元运算符隔离该情况:
function showBoard(arr2) {for (let r = 0; r table { border-collapse: collapse;边框间距:0；}#chessboard { 边框:1px 实心；}#chessboard tr td { 宽度:20px;高度:20px；}#chessboard tr:nth-child(2n) td:nth-child(2n+1),#chessboard tr:nth-child(2n+1) td:nth-child(2n) { 背景:银；}<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>I have created a chess board and I didn't like the look of my switch case statement. I think there must be a way to compact it, but I cant find one. Maybe some of you can help me.
Extra explanations, the chess pieces are in a 2 dimensional array (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"]
];
And every field of the chess board has it's own id form "00" to "77" where first digit is the row and second is the column.
The innerHTML code is just the unicode for the chess pieces as seen here:
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;
}
}
}
解决方案 Since the character codes for chess pieces are consecutive, you could do it like this:
div.innerHTML = "&#" + (9812 + "KQRBNPkqrbnp".indexOf(arr2[r][c])) + ";";
Note that HTML entities need a terminating semi-colon even though browsers are forgiving.
You don't even have to convert the character code to an HTML entity if you use textContent:
div.textContent = String.fromCharCode(9812 + "KQRBNPkqrbnp".indexOf(arr2[r][c]));
You will need to take the empty squares into account as well, at least when you start moving pieces and use the same code to update the display. That case is not dealt with in your code, but you can just isolate that case with ternary operator as in this demo:
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 中压缩开关盒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆