p5.js如何读取txt数组值绘制5x5瓦片图案

具体实现方案 #

1. 核心逻辑说明

你用loadStrings()加载得到的track数组，每一项对应txt文件的一行内容，比如track[0]就是第一行的"00000"，track[0][0]就是第一行第一个位置的数值0，直接按坐标读取即可匹配瓦片。
loadStrings是异步方法，必须放在p5.js的preload()生命周期里执行，保证绘制前文件已经加载完成，避免报错。

2. 完整可运行示例代码

let track;
let tileSize = 60; // 单个瓦片的像素大小，可自行调整

// 预加载资源，所有异步加载都放这里
function preload() {
  track = loadStrings("track1.txt");
}

function setup() {
  // 画布尺寸=瓦片数量*单个瓦片尺寸，你这里是5x5
  createCanvas(5 * tileSize, 5 * tileSize);
  noLoop(); // 静态图案不需要重复绘制，加这个优化性能
}

function draw() {
  background(255);
  // 外层循环遍历行（对应y轴方向）
  for (let y = 0; y < track.length; y++) {
    let currentRow = track[y];
    // 内层循环遍历每行的每个字符（对应x轴方向）
    for (let x = 0; x < currentRow.length; x++) {
      // 转成数字类型，方便判断
      let tileCode = int(currentRow[x]);
      // 计算当前瓦片的绘制坐标
      let drawX = x * tileSize;
      let drawY = y * tileSize;
      
      // 按编号匹配绘制逻辑，可自行扩展
      switch(tileCode) {
        case 0: 
          fill(220); // 灰色代表空地
          rect(drawX, drawY, tileSize, tileSize);
          break;
        case 1:
          fill(34,139,34); // 绿色代表草地
          rect(drawX, drawY, tileSize, tileSize);
          // 如果要换成草地图片，直接写 image(grassImg, drawX, drawY, tileSize, tileSize) 即可，图片提前在preload里加载
          break;
        case 2:
          fill(100); // 深灰色代表道路
          rect(drawX, drawY, tileSize, tileSize);
          break;
      }
    }
  }
}

3. 自定义扩展说明

• 如果要使用瓦片图片替代纯色填充，只需要在preload()里提前加载对应编号的图片，比如grassImg = loadImage('grass.png')，在对应case里调用image()方法绘制即可
• 如果txt文件的行列数变化，只需要修改createCanvas的参数为(track[0].length * tileSize, track.length * tileSize)即可自动适配尺寸

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