Javascript 如何制作嵌套循环以制作棋盘？

嘿，伙计们，我是JS新手，我想学习这种语言，但有一件事我一直坚持，那就是让嵌套循环工作，这样我就可以让棋盘游戏出现。到目前为止，我得到的是：

while (y <= 7) {
  if (y % 2 == 0) {
    document.write("<div class=sq2> </div>")
      ++y;
  } else {
    document.write("<div class=sq1> </div>")
      ++y;
  }
}

---

while（y注意：CSS不是最好的（我讨厌CSS）。所以CSS是你的问题


var board=document.getElementById（“board”）；//获取board元素
用于（var i=0；i<8；i++）{//创建行
var row=document.createElement（“div”）；//创建此行
用于（var j=0；j<8；j++）{//创建单元格
var cell=document.createElement（“div”）；//创建此单元格
如果（i%2==j%2）//进行计算
cell.className=“白色”；
其他的
cell.className=“黑色”；
row.appendChild（单元格）；//将此单元格添加到行中
}
board.appendChild（行）；//将此行添加到板中
}
#board>div{
高度：20px；
}
.白色，.黑色{
显示：内联块；
宽度：20px；
高度：20px；
}
怀特先生{
背景色：白色；
}
布莱克先生{
背景色：黑色；
}
您需要重置y，以便在外循环的第一次迭代后再次执行内循环

var x = 0;
var y = 0;

while (x <= 8) {
    while (y <= 7) {
        if (y % 2 == 0) {
            document.write("<div class=sq2> </div>")
            ++y;
        }
        else {
            document.write("<div class=sq1> </div>")
            ++y;
       }
   }
   y = 0;
   ++x;
}

var x=0；
var y=0；
而（x这大部分将通过CSS完成，即您必须告诉每个div不要占用整行（display:inline block），并给它们一个宽度和高度：

.sq1 {
    width: 20px;
    height: 20px;
    background-color: white;
    display: inline-block;
}
.sq2 {
    width: 20px;
    height: 20px;
    background-color: black;
    display: inline-block;
}

每次“x”循环重新启动时，都需要添加某种中断（可以使用“br”标记，但也有其他方法），以便生成后续行

您还需要将y重置为

var x = 0;

// declare y here since there is no "block scope" prior to es6.
var y;

// stop at 7 since you are starting at 0.
while (x <= 7) {
  // reset y to 0 each time the 'x' loop restarts.
  y = 0;

  // add a break dom node to create each new row.
  document.write('<br/>');

  while (y <= 7) {
    if (y % 2 == 0) {
      // classes should be in quotes.
      document.write('<div class="sq2"></div>');
    } else {
      document.write('<div class="sq1""></div>');
    }

    // you only need to include this once since both paths of the if-conditional were calling it.
    ++y;
  }
  ++x;
}

我使用了
（是的，我完全知道使用
会让小猫哭）。棋子是在加载时与
#chessBoard
一起生成的。它们由一组字体符号组成，每个符号代表一个黑色或白色的棋子。详细信息在源代码中进行了注释。源代码在和上提供

一小条


身体{
溢出y：滚动；
}
/*董事会*/
/* 
||尽管每个人都说不要使用
||出于布局的目的，我正在做。显示器：
||表-*属性很有用，但需要花费太多精力
||用于更大的项目。
*/
表#棋盘{
宽度：420px；
高度：420px；
表布局：固定；
边框：3倍脊灰色；
边界塌陷：分离；
边界间距：2px；
}
军衔{
宽度：420px；
高度：45px；
}
td.cell{
宽度：45px；
高度：45px；
左边框：1px纯红；
右边框：1px纯红；
边框顶部：1px纯蓝色；
边框底部：1px纯蓝色；
}
怀特先生{
背景：白色；
颜色：红色；
}
布莱克先生{
背景：黑色；
颜色：蓝色；
}
/*这是一个位于屏幕左上角的数字/字母
||每个细胞。
*/
苏普{
文本对齐：左对齐；
垂直对齐：顶部；
字号：8px；
字号：700；
字体系列：Verdana；
位置：相对位置；
z指数：1；
行高：.3
}
/*碎片*/
/*
||这是一款游戏的常见款式
*/
分片{
最大宽度：45px；
最大高度：45像素；
字体大小：35px；
字号：100；
文本对齐：居中；
垂直对齐：中间对齐；
显示：块；
线高：.3；
保证金：0自动；
背景：透明；
垫底：5px；
}
/*~~~~~~~~~~~<件>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*这些类都有一个国际象棋的unicode
||在一个：after伪元素的内容中。
*/
.周：之后{
内容：'\2654'；
}
.wQ：之后{
内容：'\2655'；
}
.wR：之后{
内容：'\2656'；
}
.wB：之后{
内容：'\2657'；
}
.wN:之后{
内容：'\2658'；
}
.wP:之后{
内容：'\2659'；
}
.bK:之后{
内容：'\265a'；
}
.bQ：之后{
内容：'\265b'；
}
比尔：之后{
内容：'\265c'；
}
.bB:之后{
内容：'\265d'；
}
.bN：之后{
内容：“\265e”；
}
.英国石油公司：之后{
内容：'\265f'；
}
/*董事会*/
var brd=document.getElementById（“棋盘”）；
/*
||具有每个棋子初始位置的4个阵列
||预先安排好的。
*/
var black=['bR'，'bN'，'bB'，'bQ'，'bK'，'bB'，'bN'，'bR']；
var bPawn=['bP'，'bP'，'bP'，'bP'，'bP'，'bP'，'bP'，'bP'，'bP']；
var white=['wR'，'wN'，'wB'，'wQ'，'wK'，'wB'，'wN'，'wR']；
var wPawn=['wP'，'wP'，'wP'，'wP'，'wP'，'wP'，'wP'，'wP']；
//首先，必须进行排名（棋盘上的一行）
对于（变量i=0；i<8；i++）{
风险等级=brd.insertRow（i）；
rank.classList.add（'rank'）；
rank.id=8-i；
对于（var j=0；j<8；j++）{
/*
||在每次迭代中，都会插入一个。。。
||…如果它是奇数/偶数，则会给出它的颜色。
*/
var单元=秩插入单元（j）；
var color=parseInt（（i+j）%2,10）==0？'white'：'black'；
/*该阵列用于为以下对象建立水平导轨：
||棋盘。
||这是针对前面提到的功能的
||每个正方形上的坐标。
||该单元还准备有类、id等。
||此块的最后一行调用函数
||叫做碎片。
*/
var col=['A'，'B'，'C'，'D'，'E'，'F'，'G'，'H']；
var coord=document.createElement（'sup'）；
coord.textContent=parseInt（8-i，10）+col[j]；
细胞。附子（coord）；
cell.classList.add（'cell'）；
类细胞
var x = 0;

// declare y here since there is no "block scope" prior to es6.
var y;

// stop at 7 since you are starting at 0.
while (x <= 7) {
  // reset y to 0 each time the 'x' loop restarts.
  y = 0;

  // add a break dom node to create each new row.
  document.write('<br/>');

  while (y <= 7) {
    if (y % 2 == 0) {
      // classes should be in quotes.
      document.write('<div class="sq2"></div>');
    } else {
      document.write('<div class="sq1""></div>');
    }

    // you only need to include this once since both paths of the if-conditional were calling it.
    ++y;
  }
  ++x;
}

 if ((y + x) % 2 == 0) {...}