我正在用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>
Run Code Online (Sandbox Code Playgroud)
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;
}
Run Code Online (Sandbox Code Playgroud)
const board = [];
const boardElement = document.getElementById("board");
function initGame(){ …Run Code Online (Sandbox Code Playgroud)