Javascript蛇形图案网格

Question

我正在尝试在屏幕上绘制一个网格，用 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);
  };

如何计算出真正的模数大小写以正确显示蛇形图案中的数字？

我不太熟悉二维数组，但也许这可能是更好的方法？

Answer 1

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

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))

然后你就可以打印出上面的网格

更新:如何打印以上数据。您可以简单地使用两个 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);
}

请注意，这将创建 textNode 行被 <br/> 打破标签。如果您希望以其他方式对其进行格式化..那么您已经有了预先格式化的数据..您需要做的就是遍历它并按照您想要的方式打印它。