Início / coding / Perguntas / 79598956
Accepted
CoderGuy
Asked: 2025-04-30 02:04:56 +0800 CST

p5.js Não é possível converter indefinido ou nulo em objeto

  • 772

Estou tentando criar uma grade para um jogo e a configurei, mas quando uso um loop for para exibir todas as células, aparece um erro: Uncaught TypeError: Não é possível converter undefined ou null em objeto. Acho que há algo indefinido na matriz da grade, mas não deveria haver. Outra teoria é que a grade está vazia, embora devesse ter 16 células.

let bgCol = '#A6A6A6';
let rows = 4;
let cols = 4;
let grid = [];
let size = 50;


function setup() {
    createCanvas(windowWidth, windowHeight);
    background(bgCol);
    for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
            grid.push(new Cell({x: r * size, y: c * size}, 0));
        }
    }
}

function draw() {
    background(bgCol);
    for (let g of grid) {
        grid[g].dis();
    }
}

class Cell {
    constructor(pos, num, col = '#FFFFFF') {
        this.pos = pos;
        this.num = num;
        this.col = col; // White as placeholder until later
    }
    dis() {
        stroke('#000000');
        strokeWeight(2);
        fill(this.col);
        square(this.pos.x, this.pos.y, size, 5);
        if (this.num) {
            textSize(size - 5);
            text(this.num, this.pos.x + 5, this.pos.y + 5);
        }
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js"></script>

javascript

1 respostas

  1. Best Answer

    for...ofitera sobre valores, não índices. for...in, por outro lado, itera sobre índices.

    No seu caso, basta alterar a linha ( grid[g].dis();) para g.dis();:

    let bgCol = '#A6A6A6';
let rows = 4;
let cols = 4;
let grid = [];
let size = 50;


function setup() {
    createCanvas(windowWidth, windowHeight);
    background(bgCol);
    for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
            grid.push(new Cell({x: r * size, y: c * size}, 0));
        }
    }
}

function draw() {
    background(bgCol);
    for (let g of grid) {
        g.dis();
    }
}

class Cell {
    constructor(pos, num, col = '#FFFFFF') {
        this.pos = pos;
        this.num = num;
        this.col = col; // White as placeholder until later
    }
    dis() {
        stroke('#000000');
        strokeWeight(2);
        fill(this.col);
        square(this.pos.x, this.pos.y, size, 5);
        if (this.num) {
            textSize(size - 5);
            text(this.num, this.pos.x + 5, this.pos.y + 5);
        }
    }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js"></script>

    Como @ggorlen apontou em um comentário, uma nomenclatura melhor ajudará a evitar mal-entendidos futuros: mude gpara celle dispara display.

    • 2

relate perguntas