p5.js实现tilemap瓦片地图加载卡住，求排查代码错误

• 路径/文件缺失：在线编辑器环境需要手动上传所有依赖文件，你需要确认3点：
  1. 项目根目录已上传track.txt文件
  2. 根目录存在sprites文件夹，且已上传grass.png、road.png、finish.png三个素材
  3. 所有文件名、文件夹名的大小写和代码中拼写完全一致，在线编辑器的文件路径对大小写敏感
• 异步加载逻辑问题：loadStrings是异步方法，你当前在setup中调用它，getTrack回调会在文件加载完成后才执行，如果你在draw函数中直接调用getImage读取瓦片，很可能track数组还未填充完成，访问track[col][row]会触发undefined错误导致程序卡死。
• 索引类型隐患：split拆分出来的元素是字符串类型，虽然JS会自动转数字做数组索引，但存在异常报错的可能性。

你可以参考如下修改后的代码：

let track = [];
let images = [];
const TILE_SIZE = 400 / 15; // 你的地图是15*15，适配400px画布的瓦片尺寸

function preload() {
  // 把文本文件也放到preload里加载，p5会等所有资源加载完成才进入setup
  const trackLines = loadStrings("track.txt");
  images[0] = loadImage("sprites/grass.png");
  images[1] = loadImage("sprites/road.png");
  images[2] = loadImage("sprites/finish.png");
  
  // 预加载完成后直接处理地图数据
  for(let i = 0; i < trackLines.length; i++) {
    let line = trackLines[i].trim();
    // 拆分后转成数字，避免字符串索引问题
    let tempArr = line.split(" ").map(Number);
    track.push(tempArr);
  }
}

function setup() {
  createCanvas(400, 400);
  // 不需要再异步加载track.txt了
}

function getImage(col, row) {
  // 加个边界判断，避免异常访问
  if(col < 0 || col >= track.length || row <0 || row >= track[col].length) {
    return images[0];
  }
  return images[track[col][row]];
}

// 示例draw函数，你可以替换成自己的渲染逻辑
function draw() {
  background(220);
  for(let row = 0; row < track.length; row++) {
    for(let col = 0; col < track[row].length; col++) {
      image(getImage(row, col), col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
    }
  }
  noLoop(); // 静态地图不需要重复渲染可以关掉循环
}

如果修改后还是卡加载，你可以打开浏览器的控制台（F12）查看报错信息，就能定位到具体是哪个文件加载失败。

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