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

我该如何计算出真正的模数形式以正确显示蛇形数字？

我不熟悉2d数组，但这也许是更好的方法吗？

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/>行。如果您希望以其他方式格式化它。.那么您就拥有预格式化的数据。您需要做的就是遍历它并按需要打印它。

Answer 2

这个一般想法似乎行得通...

// 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);
}

$ node so51356871.js
abcde
jihgf
klmno
tsrqp
uvwxy
    z

Answer 3

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

除第一次迭代外，第一个if条件始终计算为true
第二个if条件仅被评估一次，它将为false。

我将功能分为两部分：

使用“蛇形”序列中的数字创建二维数组
使用一些CSS控制换行符，从这样的矩阵中创建DOM元素

function createSnake(width, height) {
    const numbers = [...Array(width*height).keys()];
    return Array.from({length:height}, (_, row) => 
        numbers.splice(0, width)[row % 2 ? "reverse" : "slice"]()); // 2D array
}

function createGrid(matrix) {
    $("#grid").empty().append(
        [].concat(...matrix.map(row => row.map((val,i) => 
            $("<div>").addClass("grid").toggleClass("newline", !i).text(val))))
    );
}

// Demo generating a 3 x 3 grid
createGrid(createSnake(3,3));

.grid {
    float: left;
    padding: 3px;
}
.newline {
    clear:left
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="grid"></div>

Javascript蛇纹格

3 个答案: