P5 - 从矩阵加载数据

Question

我正在尝试使用 p5.play.js 库创建游戏，但运行遇到了一些问题。我希望游戏的 GUI 在板上包含 x 个方块（精灵），这些方块是从位于资产文件夹中的文本文件中提取的。它们必须是精灵，因为我想通过鼠标事件和其他精灵与它们进行交互。文本文件目前是一个 8 x 8 矩阵，但我想使用任何大小的矩阵 - 从 8 x8 到 24 x 24。

我已经使用 splitTokens 函数将每行 8 个字符串转换为 8 个单独的字符串...到目前为止，非常好！但是，我使用的条件逻辑并未将文本文件中包含的 1、2 和 3 解释为红色、绿色和蓝色。我不确定是否应该将字符串转换为整数 - 我试过了，但没有用...真有趣！

我只写了 2 个月的代码，所以我正在挑战我有限知识的极限！

到目前为止我的代码：

let fileContent;
let tiles;
let spr;

function preload(){
  fileContent = loadStrings('assets/game.txt'); 
}

function setup() {
  createCanvas(500, 500);

  gui = new Array(fileContent.length);

  for (let i = 0; i < gui.length; i++) {
    let tiles = splitTokens(fileContent[i]);     
    console.log(tiles);

    for (let j = 0; j < gui.length; j++) {
      for (let k = 0; k < gui.length; k++) {
        spr = createSprite(j * 50 + 75, k * 50 + 75, 50, 50);
        if (tiles[i] == "1") {
          spr.shapeColor = color('red');
        }
        if (tiles[i] == "2") {
          spr.shapeColor = color('green');
        }
        if (tiles[i] == "3") {
          spr.shapeColor = color('blue');
        }
      }    
    }
  }  
}

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

我不知道在哪里上传任何外部资源，所以当前的文本文件如下：

1 2 3 2 1 3 1 2
2 3 1 1 2 1 3 1
2 3 1 2 2 1 3 1
1 3 1 1 2 1 3 1
2 3 1 1 2 1 3 1
1 2 1 1 2 2 3 1
2 3 2 3 2 1 3 1
2 1 2 2 2 1 3 1

从代码中可以看出，它位于“assets”文件夹中。

Answer 1

在二维矩阵上没有必要时，您在此处进行三次嵌套。您不是迭代 64 次，而是迭代 512 次（tiles[i] 上的索引也不正确，将其更改为嵌套迭代器也“有效”）。但是，我建议您删除 j 循环并将外部 i 重命名为 j。我尝试根据您在此处提供的信息重新创建 mind。

P5 - 从矩阵加载数据

P5 - load data from a matrix

javascript

arrays

p5.js