JS从整数数组生成8×8游戏地图时显示异常问题排查

你的8×8地图渲染错位，核心问题是行切换的判断时机错误：

原代码中使用Number.isInteger(i / 8)触发换行，但i从0开始，当i=0时，0/8=0是整数，会直接执行y += w和x=0，导致第一行元素还未绘制就跳到第二行位置，后续所有行整体偏移，最终渲染结果完全错位。

修正方案 #

1. 修正换行判断逻辑 #

将换行条件改为判断当前元素是否是一行的最后一个（索引为7,15,23...，即i % 8 === 7），处理完当前行最后一个元素后再切换到下一行：

function loadMap(ctx, map) {
  var w = innerWidth / 8
  var x = 0
  var y = 0

  for (var i = 0; i < map.length; i++) {
    if (map[i] == 1) {
      rect(x, y, w, w, ctx, 'orange')
    }
    // 无论元素是1还是0，都移动x坐标
    x += w

    // 处理完一行最后一个元素时切换行
    if (i % 8 === 7) {
      y += w
      x = 0
    }
  }
}

function rect(x, y, w, h, ctx, color = 'white') {
  ctx.beginPath()
  ctx.fillStyle = color
  ctx.fillRect(x, y, w, h)
}

const map1 = [
  1, 1, 1, 1, 1, 1, 1, 1,
  1, 0, 1, 0, 0, 0, 0, 1,
  1, 0, 1, 1, 0, 0, 0, 1,
  1, 0, 0, 0, 0, 1, 1, 1,
  1, 0, 0, 1, 1, 0, 0, 1,
  1, 0, 0, 0, 0, 0, 0, 1,
  1, 0, 0, 0, 0, 0, 0, 1,
  1, 1, 1, 1, 1, 1, 1, 1
]

// 设置canvas实际宽高，避免拉伸变形
const cnv = document.querySelector('#cnv')
cnv.width = innerWidth
cnv.height = innerWidth // 8×8正方形地图，宽高保持一致
loadMap(cnv.getContext('2d'), map1);

2. 补充canvas尺寸设置 #

原代码未设置canvas的width和height属性，浏览器会默认使用300×150的尺寸，再通过CSS拉伸导致方块变形。添加宽高设置可保证地图为正方形等比例方块。

关键说明 #

• 原代码中x += w逻辑重复，可从if/else分支中抽出来简化代码；
• 换行判断的核心是：每处理8个元素（索引0-7为第一行）就切换行，用i % 8 === 7精准判断当前是否为该行最后一个元素。

内容的提问来源于stack exchange，提问作者MikoBest4