瓷磚圖不顯示-有解無憂

我正在處理這段代碼，如果您為map陣列輸入某些字符，畫布將顯示與該字符對應的影像。

我在頂部有一個用于所有地面塊的陣列。

到目前為止，這是我的代碼：

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/[email protected]/lib/p5.js"></script>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

但是，螢屏上似乎沒有任何內容。我相信這可能是我的回圈的問題。有沒有人可以解決這個問題？

謝謝你的幫助。

uj5u.com熱心網友回復：

您的代碼中有很多缺陷：

您正在用函式中ground的單個實體替換陣列Groundsetup()
您正在將一個參考推ground入自身，您的 for 回圈將初始化它
drawImage()不是一個函式，也許你的意思image()是Ground.draw
在您的 maindraw()函式中，您將ground其視為具有.draw()函式的物件陣列，但ground它要么是單個實體Ground而不是陣列，要么是物件陣列的陣列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/[email protected]/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 行（在 maindraw()函式內）
查看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 的一個方面，在宣告類之前，您不能在運行代碼中使用類（盡管您可以在函式體中參考它們，只要在宣告類之前不呼叫該函式）。
此時，我們可以將地面初始化代碼移入或在宣告類后呼叫我們自己setup()的特殊函式。initGround
我選擇了自定義init功能

運行代碼： ReferenceError: createVector is not defined

糟糕，我忘記了 p5.js 之類的函式在呼叫 ???♂?createVector之前是不全域可用的。setup()如果我將地面初始化代碼移至，我會避免這種情況setup()，但幸運的是我們可以隨時使用new p5.Vector()。

運行代碼： ReferenceError: drawImage is not defined

容易修復，應該是 image()

成功??

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/411453.html

標籤：

上一篇：為什么我得到'int'型別的引數不可迭代？

下一篇：在python中進行猜測回圈的最佳方法是什么？