当前位置:首页 > JavaScript

蛇形数字宫格的实现js

2026-01-31 11:43:54JavaScript

蛇形数字宫格的实现(JavaScript)

蛇形数字宫格是一种按照特定顺序填充数字的矩阵,数字从外向内呈螺旋状排列。以下是实现方法:

初始化变量

需要定义矩阵的大小(n x n)并初始化一个二维数组:

function generateSnakeMatrix(n) {
  const matrix = Array(n).fill().map(() => Array(n).fill(0));
  let num = 1;
  let rowStart = 0, rowEnd = n - 1;
  let colStart = 0, colEnd = n - 1;
}

填充外圈数字

按照顺时针方向填充外圈数字:

while (rowStart <= rowEnd && colStart <= colEnd) {
  for (let i = colStart; i <= colEnd; i++) {
    matrix[rowStart][i] = num++;
  }
  rowStart++;

  for (let i = rowStart; i <= rowEnd; i++) {
    matrix[i][colEnd] = num++;
  }
  colEnd--;

  for (let i = colEnd; i >= colStart; i--) {
    matrix[rowEnd][i] = num++;
  }
  rowEnd--;

  for (let i = rowEnd; i >= rowStart; i--) {
    matrix[i][colStart] = num++;
  }
  colStart++;
}

完整代码示例

function generateSnakeMatrix(n) {
  const matrix = Array(n).fill().map(() => Array(n).fill(0));
  let num = 1;
  let rowStart = 0, rowEnd = n - 1;
  let colStart = 0, colEnd = n - 1;

  while (rowStart <= rowEnd && colStart <= colEnd) {
    for (let i = colStart; i <= colEnd; i++) {
      matrix[rowStart][i] = num++;
    }
    rowStart++;

    for (let i = rowStart; i <= rowEnd; i++) {
      matrix[i][colEnd] = num++;
    }
    colEnd--;

    for (let i = colEnd; i >= colStart; i--) {
      matrix[rowEnd][i] = num++;
    }
    rowEnd--;

    for (let i = rowEnd; i >= rowStart; i--) {
      matrix[i][colStart] = num++;
    }
    colStart++;
  }

  return matrix;
}

console.log(generateSnakeMatrix(4));

输出结果

对于4x4矩阵,输出如下:

[
  [1, 2, 3, 4],
  [12, 13, 14, 5],
  [11, 16, 15, 6],
  [10, 9, 8, 7]
]

算法复杂度

该算法的时间复杂度为O(n²),空间复杂度为O(n²),其中n是矩阵的维度。

蛇形数字宫格的实现js

标签: 蛇形数字
分享给朋友:

相关文章

vue实现数字资源

vue实现数字资源

Vue 实现数字资源的常见方法 在 Vue 中实现数字资源(如计数器、动画、表单验证等)可以通过多种方式完成。以下是几种常见场景的实现方法: 数字计数器动画 使用 Vue 的过渡和动画特性,结合第…

通过vue实现数字加减

通过vue实现数字加减

使用 Vue 实现数字加减 方法一:基础实现(Vue 2/3 通用) 在 Vue 中可以通过 v-model 绑定数据,结合按钮事件实现数字加减功能。 <template> <…

vue实现数字动态滚动

vue实现数字动态滚动

数字动态滚动实现方法 在Vue中实现数字动态滚动效果,可以通过以下方式完成: 使用transition组件结合CSS动画 通过Vue的transition组件和CSS的transition或ani…

react如何让input只能填数字

react如何让input只能填数字

限制输入为数字的方法 在React中限制<input>只能输入数字,可以通过以下几种方式实现: 1. 使用type="number"属性 <input type="numbe…

react数字实现渐增

react数字实现渐增

实现数字渐增动画的方法 在React中实现数字渐增动画可以通过多种方式完成,以下是几种常见的方法: 使用requestAnimationFrame 通过原生requestAnimationFrame…

js 实现滚动数字

js 实现滚动数字

实现滚动数字的 JavaScript 方法 使用 CSS 动画和 JavaScript 控制 通过 CSS 的 transform 和 transition 属性实现数字滚动效果,JavaScript…