当前位置:首页 > JavaScript

蛇形数字宫格的实现js

2026-04-05 03:51:39JavaScript

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

蛇形数字宫格是一个按特定顺序填充数字的矩阵,数字从左上角开始,按照蛇形路径(先从左到右,再从右到左,依次交替)填充。以下是实现方法:

初始化矩阵

创建一个空的二维数组作为矩阵,根据输入的尺寸(如 n x n)初始化所有值为 0null

function createMatrix(n) {
  return Array(n).fill().map(() => Array(n).fill(0));
}

填充蛇形数字

通过循环和方向控制填充数字。使用一个变量 direction 控制当前行是向左还是向右填充。

function fillSnakeMatrix(n) {
  const matrix = createMatrix(n);
  let num = 1;

  for (let row = 0; row < n; row++) {
    if (row % 2 === 0) {
      // 从左到右填充
      for (let col = 0; col < n; col++) {
        matrix[row][col] = num++;
      }
    } else {
      // 从右到左填充
      for (let col = n - 1; col >= 0; col--) {
        matrix[row][col] = num++;
      }
    }
  }

  return matrix;
}

输出矩阵

将生成的蛇形矩阵打印到控制台,便于查看结果。

function printMatrix(matrix) {
  for (let row of matrix) {
    console.log(row.join(' '));
  }
}

const n = 5; // 宫格尺寸
const snakeMatrix = fillSnakeMatrix(n);
printMatrix(snakeMatrix);

示例输出

对于 n = 5,输出如下:

1 2 3 4 5
10 9 8 7 6
11 12 13 14 15
20 19 18 17 16
21 22 23 24 25

动态调整方向

如果需要更灵活的方向控制(如从右到左开始),可以通过调整初始方向实现。

function fillSnakeMatrixFlex(n, startLeft = true) {
  const matrix = createMatrix(n);
  let num = 1;
  let direction = startLeft; // true: 左到右, false: 右到左

  for (let row = 0; row < n; row++) {
    if (direction) {
      for (let col = 0; col < n; col++) {
        matrix[row][col] = num++;
      }
    } else {
      for (let col = n - 1; col >= 0; col--) {
        matrix[row][col] = num++;
      }
    }
    direction = !direction; // 切换方向
  }

  return matrix;
}

支持非正方形矩阵

若需要支持 m x n 的矩形矩阵,调整初始化逻辑和填充逻辑。

蛇形数字宫格的实现js

function fillSnakeMatrixRect(m, n) {
  const matrix = Array(m).fill().map(() => Array(n).fill(0));
  let num = 1;

  for (let row = 0; row < m; row++) {
    if (row % 2 === 0) {
      for (let col = 0; col < n; col++) {
        matrix[row][col] = num++;
      }
    } else {
      for (let col = n - 1; col >= 0; col--) {
        matrix[row][col] = num++;
      }
    }
  }

  return matrix;
}

以上代码提供了蛇形数字宫格的完整实现,并支持扩展功能如动态方向和非正方形矩阵。

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

相关文章

vue实现数字资源

vue实现数字资源

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

数字拼图vue实现

数字拼图vue实现

数字拼图游戏的基本原理 数字拼图通常由N×N的方格组成,其中包含1到N²-1的数字和一个空白格。玩家通过移动数字块与空白格交换位置,最终将所有数字按顺序排列完成拼图。 Vue实现的核心步骤 初始化游…

vue实现数字抽奖

vue实现数字抽奖

Vue 实现数字抽奖功能 基本思路 通过 Vue 的数据响应式特性,结合定时器和随机数生成,实现数字快速滚动后停在指定奖品的动画效果。核心是利用 setInterval 控制数字变化速度,通过 set…

vue实现数字动态滚动

vue实现数字动态滚动

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

vue-cli实现数字

vue-cli实现数字

使用 Vue-CLI 实现数字功能 在 Vue-CLI 项目中实现数字功能可以通过多种方式完成,包括数据绑定、计算属性、方法调用等。以下是几种常见的实现方法: 数据绑定实现数字显示 在 Vue 组件…

js实现数字时钟

js实现数字时钟

实现数字时钟的基本方法 使用JavaScript创建数字时钟可以通过多种方式实现,以下是几种常见的方法: 使用Date对象获取时间 通过JavaScript的Date对象可以获取当前的时间信息,包括…