我正在用 Javascript 创建一个棋盘。我已经设法自己创建了板，但我无法为每个字段提供合适的类(黑色或白色)。
我成功地为第一行正确分配了类，但我在处理面板的其余部分时遇到了问题。我知道可能有更简单的解决方案。
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<link rel="stylesheet" type="text/css" href="assets/css/chess.css">
<script type="text/javascript" src="assets/js/lib/jquery.js"></script>
</head>
<body onload="initGame()">
<h1>Chess</h1>
<div id="board">
</div>
<script type="text/javascript" src="assets/js/chess.js"></script>
</body>
</html>
body{
text-align: center;
background-color: rgb(30, 30, 30);
}
#board{
margin: 0 auto;
width: 800px;
height: 800px;
background-color: white;
}
#board div{
width: 100px;
height: 100px;
float: left;
}
.white{
background-color: white;
border: 1px solid black;
}
.black{
background-color: black;
border: 1px solid white;
}
const board = [];
const boardElement = document.getElementById("board");
function initGame(){
for(var y = 0; y < 8; y++){
var row = [];
for(var x = 0; x < 8; x++){
var cell = {};
cell.element = document.createElement("div")
boardElement.appendChild(cell.element);
row.push(cell);
}
board.push(row);
}
$("#board div").addClass("field white");
for(var i = 0; i < board.length * 8; i++){
if((i % 7) == 0 && i != 0){
$(".field")[i].className = "field black";
i++;
}
else if((i % 7) == 0){
i++;
}
$(".field")[i].className = "field black";
i++;
}
startGame();
}
function startGame(){
}
当前输出:
最佳答案
您可以减少 initGame 逻辑，仅在 y 和 x 为奇数或偶数时添加白色类。您可以通过 y%2 == x%2 来完成。您将不需要额外的 for 循环。!
function initGame(){
for(var y = 0; y < 8; y++){
var row = [];
for(var x = 0; x < 8; x++){
var cell = {};
cell.element = document.createElement("div")
if(y%2 == x%2)
{
cell.element.className = "field white";
}
else
{
cell.element.className = "field black";
}
boardElement.appendChild(cell.element);
row.push(cell);
}
board.push(row);
}
startGame();
}
关于javascript - 使用 Javascript 创建棋盘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57836901/