使用数组在Canvas上放置Sprite的坐标问题排查求助

我帮你排查出了代码里的几个关键问题，咱们一步步来修复：

1. 内层循环范围错误 #

你内层循环用racetrack.length（也就是总行数）来遍历每行的元素，但实际上每行的格子数量是tiles.length（当前行拆分后的元素个数）。用总行数遍历列会导致行列不匹配，要么多画多余的Sprite，要么少画部分格子。

2. Sprite坐标颠倒+尺寸不合理 #

createSprite(i * 1 + 1, k * 10 + 1, 1, 1)这里有两个明显问题：

• 坐标映射搞反了：i是行索引，应该对应y轴位置；k是列索引，应该对应x轴位置，顺序写反会导致整个赛道颠倒错位
• 尺寸和步长混乱：x方向步长是1，y方向是10，Sprite尺寸只有1x1，这会让Sprite挤成一团或者完全错位。我们应该用统一的tileSize（比如25，刚好适配500x500画布）来控制每个格子的大小和位置。

3. 数组索引匹配错误 #

你判断tiles[i] == "1"，但i是外层的行索引，内层循环的列索引是k，所以应该用tiles[k]来获取当前列的格子数值，不然会拿错行的元素来判断。

修正后的完整代码 #

let fileContent;
let grasssprite;
let tracksprite;
const tileSize = 25; // 每个格子的尺寸，500/25=20，适配第一行的20个元素

function preload() {
  fileContent = loadStrings('track.txt');
  grasssprite= loadImage('grass.png');
  tracksprite= loadImage ('track.jpg');
}

function setup() {
  createCanvas(500, 500);
  // 遍历每一行（i是行索引，对应y轴）
  for (let i = 0; i < fileContent.length; i++) {
    let tiles = splitTokens(fileContent[i]);
    // 遍历当前行的每个格子（k是列索引，对应x轴）
    for (let k = 0; k < tiles.length; k++) {
      // 用tileSize计算坐标，加tileSize/2是让Sprite中心点对齐网格
      let spr = createSprite(k * tileSize + tileSize/2, i * tileSize + tileSize/2, tileSize, tileSize);
      // 用k索引获取当前格子的数值
      if (tiles[k] == "1") {
        spr.addImage(grasssprite);
      } else if (tiles[k] == "0") {
        spr.addImage(tracksprite);
      }
    }
  }
}

function draw() {
  background(220);
  drawSprites();
}

额外提示 #

你的track.txt里每行的元素数量不一致（比如第一行20个，第三行16个），这会导致右侧出现空白。如果想要铺满整个画布，建议统一每行的元素数量为20个（对应500/25=20），或者在代码里自动补全缺失的元素。

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