logo标签列表

使用Javascript创建棋盘

javascripthtml
8

我正在使用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(){

}

当前的输出：
1
你可以使用nth-child在CSS中实现黑白效果。 - ray
是的，但我认为分配类会使移动棋子和确定每个棋子可能移动的位置更容易。 - Roehrich1004
1
有条件地改变循环计数变量 i 会导致非常混乱的算法。你的想法是什么？ - Bergi
起初，我想让每个偶数字段变成黑色，但后来意识到它会在每轮中切换，于是尝试寻找一个简单的解决方法。 - Roehrich1004
2
你移动棋子的逻辑不应该依赖于CSS，只能依赖坐标。所以请根据 这个答案 使用nth-child。 - trincot
3个回答
5

如果 y 和 x 都是奇数或偶数，你可以将 initGame 逻辑简化为仅在其添加 white 类。你可以使用 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();
}
y%2 == x%2 不错！ - ztom
1

如果您不确定需要什么其他功能，但是要生成棋盘，您可以执行以下操作：

const md = () => document.createElement('div');

function makeBoard (container, length = 8) {
 for ( let i = 0; i < length; i++) {
   const row = md();
  Array.from({length}).forEach(() => row.appendChild(md()));
    container.appendChild(row);
  }
}

makeBoard(document.getElementById('board'));
#board > div {
  display: flex;
  min-height: 32px;
}

#board > div > div {
  flex: 0 0 32px;
  background: tomato;
}

#board > div:nth-child(even) > div:nth-child(even) {
  background: bisque;
}

#board > div:nth-child(odd) > div:nth-child(odd) {
  background: bisque;
}
<div id="board"></div>

1
一种使用数组交换的解决方案：
var colors = ['white', 'black'];

$("#board div").each(function(i) {
  if((i % 2) == 0)
    $(this).addClass(colors[0]);
  else 
    $(this).addClass(colors[1]);
  if([8,16,24,32,40,48,56,64].indexOf((i + 1)) > -1)
    colors = colors.reverse();
});


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');
    
    var colors = ['white', 'black'];
    
    $("#board div").each(function(i) {
      if((i % 2) == 0)
        $(this).addClass(colors[0]);
      else 
        $(this).addClass(colors[1]);
      if([8,16,24,32,40,48,56,64].indexOf((i + 1)) > -1)
        colors = colors.reverse();
    });
    
    // startGame();
}
body{
    text-align: center;
    background-color: rgb(30, 30, 30);
}
#board{
    margin: 0 auto;
    width: 400px;
    height: 400px;
    background-color: white;
}
#board div{
    width: 50px;
    height: 50px;
    float: left;
    box-sizing: border-box;
}
.white{
    background-color: white;
    border: 1px solid black;
}
.black{
    background-color: black;
    border: 1px solid white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接