通过将精灵链接到.txt文件p5.play打印赛道

Question

我正在尝试用p5js和p5.play制作一个游戏。这是一个自上而下的2d赛车游戏，背景是通过创建精灵并从一个名为“track.txt”的.txt文件中链接到数字来创建的。txt文件在下面和下面，这是我编写的代码。

0 = Grass
1 = Track
2 = Finish/Start line

0 0 0 0 0 0 0 0 0 
0 1 1 1 1 1 1 1 0
0 1 0 0 0 0 0 1 0
0 1 0 1 1 1 0 2 0
0 1 0 1 0 1 0 1 0
0 1 0 1 0 1 0 1 0
0 1 0 1 0 1 0 1 0
0 1 0 1 0 1 0 1 0
0 1 1 1 0 1 1 1 0
0 0 0 0 0 0 0 0 0

代码

let track = [];
let images = [];

function preload() {
    images[0] = loadImage("grass.png");
    images[1] = loadImage("track.png");
    images[2] = loadImage("finish.png");
}

function setup() {
    createCanvas(800, 800);
    background(210);
    loadStrings("track.txt", getTrack);
}

function getTrack(arr){
    for(let i = 0; i < arr.length; i++)
    {
      let line = arr[i].trim(); 
      let tempArr = line.split(" ");
      track.push(tempArr);
    }}

function getImage(col, row) {
    return images[track[col][row]];
 }

代码不工作，只显示背景。我在这里的目的是通过阅读track.txt来打印一个精灵种族。有什么建议或解决办法吗？

Answer 1

希望track.txt只包含：

0 0 0 0 0 0 0 0 0 
0 1 1 1 1 1 1 1 0
0 1 0 0 0 0 0 1 0
0 1 0 1 1 1 0 2 0
0 1 0 1 0 1 0 1 0
0 1 0 1 0 1 0 1 0
0 1 0 1 0 1 0 1 0
0 1 0 1 0 1 0 1 0
0 1 1 1 0 1 1 1 0
0 0 0 0 0 0 0 0 0

如果是这样的话，你只会遗漏一个小细节：

let tempArr = line.split(" ");
track.push(tempArr);

tempArr将是String对象的数组，因此当您试图通过String而不是整数检索图像时，getImage()将失败(JS中的Number)。

一个快速的解决方法是简单地使用int()，它在p5.js中也可以方便地将数组作为参数(并将每个字符串(例如["1","2","3"])转换为Number (例如[1, 2, 3])。

就像这样：

let tempArr = line.split(" ");
track.push(int(tempArr));