瓷砖绘图未显示

Question

我正在编写这段代码，如果您为 map 数组输入某些字符，canvas 将显示与该字符对应的图像。

我在顶部有一个包含所有地面块的数组。

到目前为止，这是我的代码：

const blockSize = 160;
let ground = [];

function setup() {

  createCanvas(400, 400);

  ground = new Ground(x*blockSize,y*blockSize)
}

function preload() {
  groundImg = loadImage('https://mars.stcollier.repl.co/images/ground.png');
}

let map = [
    [
    "################",
    "################",
    "################",
    "################",
    "################",
    "################",
    "################",
    "################",
    "################",
    "################"
    ]
];

for (var i = 0; i < map.length; i++) {
  ground.push([]);
  
  for (var y = 0; y < map[i].length; y++) {
    for (var x = 0; x < map[i][y].length; x++) {
      switch (map[i][y][x]) {
        case "#":
          ground[i].push(ground);
          break;
      }
    }
  }
}

function draw() {
  for (var i = 0; i < ground.length; i++) {
    ground[i].draw();
  }
}

class Ground {
  constructor(x, y) {
    this.pos = createVector(x, y)
  } draw() {
    drawImage(groundImg, this.pos.x, this.pos.y, blockSize, blockSize)
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

但是，屏幕上似乎没有任何内容。我相信这可能是我的循环的问题。有人对此有解决办法吗？

感谢您的帮助。

Answer 1

你的代码有一堆缺陷：

您正在 setup() 函数中用 Ground 的单个实例替换 ground 数组
你正在将对 ground 的引用推入你的 for 循环中并初始化它
drawImage() 不是一个函数，也许你的意思是 image() in Ground.draw
在您的主要 draw() 函数中，您将 ground 视为具有 .draw() 函数的对象数组，但 ground 是 [= 的单个实例13=] 而不是数组，或者它是 Ground 个对象的数组的数组。

这是一个工作示例：

const blockSize = 16;
let ground = [];

function setup() {
  createCanvas(400, 400);
}

function preload() {
  groundImg = loadImage('https://mars.stcollier.repl.co/images/ground.png');
}

let map = [
    [
    "################",
    "#####000000#####",
    "####0######0####",
    "###0##0##0##0###",
    "###0########0###",
    "###0##0##0##0###",
    "###0###00###0###",
    "####0######0####",
    "#####000000#####",
    "################"
    ]
];

// This code could be moved to the setup() function, but in any case it cannot be run until the Ground class is actually declared
function init() {
  for (var i = 0; i < map.length; i++) {
    ground.push([]);

    for (var y = 0; y < map[i].length; y++) {
      for (var x = 0; x < map[i][y].length; x++) {
        switch (map[i][y][x]) {
          case "#":
            // I'm assuming that this is what you actually intended to do
            // Instead of pushing a reference to the ground array into itself
            ground[i].push(new Ground(x*blockSize,y*blockSize));
            break;
        }
      }
    }
  }
}

function draw() {
  for (var i = 0; i < ground.length; i++) {
    // ground contains arrays of Ground objects, not sure why
    for (var j = 0; j < ground[i].length; j++) {
      ground[i][j].draw();
    }
  }
}

class Ground {
  constructor(x, y) {
    this.pos = new p5.Vector(x, y)
  }
  draw() {
    image(groundImg, this.pos.x, this.pos.y, blockSize, blockSize)
  }
}

// Don't call init() until the Ground class is actually declared
init();

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>

一些诚实的反馈：您需要进行基本调试。当您运行您的代码不起作用时 检查 JavaScript 控制台 。详细查看错误信息。在您的代码中查找引发错误的行，并努力推断它可能发生的原因。当您的代码没有按照您的期望运行但未显示错误时，请添加 console.log() 语句以查看您的期望是否有效。思考每行代码在做什么（即做像 ground[i].push(ground) 这样的事情无论如何都有意义）。

我是如何调试你的代码的

运行代码，什么都没发生，没有错误
将 console.log('drawing: ' + ground.length) 添加到 draw() 函数（并添加 noLoop() 以防止日志被垃圾邮件）。

结果：drawing: undefined
奇怪，我以为 ground 是一个数组

扫码赋值给ground，发现ground被初始化了两次，一次是数组，一次是new Ground().
由于后者(new Ground())没有意义，注释掉。
点击运行按钮，TypeError: ground[i].draw is not a function 来自第 48 行（在主 draw() 函数内）
详细查看初始化ground的代码，意识到它是一个数组的数组，更正draw()中的代码有一个嵌套循环。
运行代码：TypeError: ground[i][j].draw is not a function
看ground初始化代码更深入，注意ground[i].push(ground)
猜测这应该是 ground[i].push(new Ground(...))，试一试
运行代码：ReferenceError: Cannot access 'Ground' before initialization

这是 JavaScript 的一个方面，你不能在运行ning 代码中使用 Classes 在它们被声明之前（尽管你可以在函数体中引用它们所以只要在声明 Class 之前不调用该函数。
此时我们可以将地面初始化代码移动到 setup() 或我们在声明 Ground class 后调用的特殊 init 函数。
我选择了自定义 init 函数

运行代码：ReferenceError: createVector is not defined

糟糕，我忘了像 createVector 这样的 p5.js 函数在 setup() 被调用 ‍♂️ 之前是全局不可用的。如果我将地面初始化代码移动到 setup()，我会避免这种情况，但幸运的是我们可以随时使用 new p5.Vector()。

运行代码：ReferenceError: drawImage is not defined

容易修复，应该是image()

成功

瓷砖绘图未显示

Tile drawing is not displaying

javascript

loops

2d

p5.js

我是如何调试你的代码的