Javascript蛇模式网格

我试图在屏幕上画一个网格，在Javascript中以蛇模式编号，我有一个工作网格，但它遵循

12345
67890

我需要的是

12345
09876

我见过模运算，并尝试过实现，但我在获得正确的数字序列时遇到了困难

这是我的功能

function createGrid(length, height) {
  var ledNum = 0;
  for (var rows = 0; rows < height; rows++) {
    for (var columns = 0; columns < length; columns++) {
      var backwards = ledNum + columns;

      if (rows % 2 == 0 || rows != 0) {
        $("#container").append("<div class='grid' id='" + ledNum + "'>" + //HERE IS MY PROBLEM+"</div>");
        }
        else if (!rows % 2 == 0) {
          $("#container").append("<div class='grid' id='" + ledNum + "'>" + ledNum + "</div>");
        }
        ledNum++;
      };
    };

    $(".grid").width(960 / length);
    $(".grid").height(960 / height);
  };

函数createGrid（长度、高度）{
var-ledNum=0；
对于（变量行=0；行<高度；行++）{
对于（变量列=0；列<长度；列++）{
var向后=ledNum+列；
如果（行%2==0 | |行！=0）{
$（“#容器”）.append（“+//这是我的问题+”）；
}
如果（！行%2==0），则为else{
$（“#容器”）.append（“+ledNum+”）；
}
ledNum++；
};
};
$（“.grid”）。宽度（960/长度）；
$（“.grid”）.高度（960/高度）；
};

我如何计算出真正的模的情况，以便在snake模式中正确地显示数字

---

我对2d阵列不太熟悉，但也许这是一种更好的方法？

这个总体思路似乎很管用

// Input variables
var data = 'abcdefghijklmnopqrstuvwxyz';
var width = 5;

// The actual algorithm.
var rows = Math.ceil(data.length / width);
for (var y = 0; y < rows; y++) {
  var rowText = "";
  for (var x = 0; x < width; x++) {
    // Basically, for every other row (y % 2 == 1),
    // we count backwards within the row, as it were, while still
    // outputting forward.
    var offset = y * width + (y % 2 == 1 ? width - 1 - x : x);
    rowText += data[offset] || " ";
  }
  console.log(rowText);
}

---

我能想到的最好的方法是使用带有数组的对象，并利用其内置函数来简化您的工作……例如

function createGrid(length,height) {
    var lednum = 0;
    var grid = [];
    for (var row = 0; row < height; row++) {
        grid[row] = [];
        for (var col = 0; col < length; col++) {
            if ((row % 2) === 0) {
                grid[row].push(lednum);
            } else {
                grid[row].unshift(lednum);
            }
            lednum++;
        }
    }
    return grid;
}
console.log(createGrid(10, 10))

函数createGrid（长度、高度）{
var-lednum=0；
var网格=[]；
对于（变量行=0；行<高度；行++）{
网格[行]=[]；
for（var col=0；col

然后你可以在网格上打印出来

更新：如何打印上述数据。您可以简单地使用两个for循环

var length = 10;
var height = 15;
var brNode = document.createElement('br');

var grid = createGrid(length, height));

for (var row = 0; row < height; row++) {
    var rowPrint = "";
    for (var col = 0; col < length; col++) {
        rowPrint += String(grid[row][col]) + " ";
    }
    var rowNode = document.createTextNode(rowPrint)
    $("#container").appendChild(rowNode);
    $("#container").appendChild(brNode);
}

var长度=10；
var高度=15；
var brNode=document.createElement（'br'）；
var grid=createGrid（长度、高度）；
对于（变量行=0；行<高度；行++）{
var rowPrint=“”；
for（var col=0；col

---

请注意，这将创建由

标记分隔的

textNode

行。如果你想用其他方式格式化，那么你就有了预格式化的数据，你所需要做的就是遍历它，然后按你想要的方式打印出来。

正如我在评论中提到的，你的代码中的布尔逻辑有很多错误：

• 除非在第一次迭代中，否则第一个

  if

  条件的计算结果始终为true
• 第二个

  if

  条件因此只计算一次，它将为false

我将把功能分为两部分：

创建一个二维数组，数字按“snake”顺序排列

从这样的矩阵创建DOM元素，使用一些CSS来控制换行符

函数createSnake（宽度、高度）{
常量数字=[…数组（宽度*高度）.keys（）]；
返回数组。from（{length:height}，（{，row）=>
数字。拼接（0，宽度）[第%2行？“反向”：“切片”]（）；//2D数组
}
函数createGrid（矩阵）{
$（“#网格”）.empty（）.append(
[].concat（…矩阵.map（行=>行.map（（val，i）=>
$（“”）.addClass（“网格”）.toggleClass（“换行符”，！i）.text（val）））
);
}
//演示生成一个3x3网格
createGrid（createSnake（3,3））
.grid{
浮动：左；
填充：3倍；
}
.纽琳{
清除：左
}

我在上面进行了编辑，删除了一些语法错误，但一般来说，这个输出可以满足我的需要。一旦我可以输出，我将报告我将如何像我给出的示例中那样输出它？@anthonytherockjohnson上面的应该可以。但是如果这是一个实际的网站，我建议使用更高级的工具来渲染它，而不仅仅是文本节点。但这是你的特权你的问题比你发表评论的地方更大。
if…else if
中的布尔逻辑在两个位置都是错误的。当
行！=0，第二个没有多大意义：
运算符具有优先级，因此您正在对布尔值执行模运算。假设第一个条件除第一次外始终为真，则第二个
if
条件在求值时永远不会为真。
var length = 10;
var height = 15;
var brNode = document.createElement('br');

var grid = createGrid(length, height));

for (var row = 0; row < height; row++) {
    var rowPrint = "";
    for (var col = 0; col < length; col++) {
        rowPrint += String(grid[row][col]) + " ";
    }
    var rowNode = document.createTextNode(rowPrint)
    $("#container").appendChild(rowNode);
    $("#container").appendChild(brNode);
}