Problem changing player position to another Tile position on P5.js

Question

Good people I am with a small problem I want the player to pass to position 2 of Tile but at the time I press a key it error to say " is not a Function not showing the player. How can I solve this problem? This code was developed in P5.js The code is as follows::

var jog = 0;

var tls = new Array(4);

function setup() {
    createCanvas(400, 400);
    background(220);
    for (var i = 0; i < tls.length; i++) {
        tls[i] = new tile(100 + ((i + 1) * 60), 100, i);
        tls[i].showTiles();
    }
    pl1 = new plr(1);
    pl2 = new plr(2);
    pl3 = new plr(3);
    pl4 = new plr(4);
}

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

function mousePressed() {
    tls[0].startGame();
}

function keyPressed() {
    //Problema está aqui
    pl1.setTileCount(2);
    pl1.showPlayers();
}


class tile {

    constructor(x, y, id) {

        this.id = id;
        this.centerPos = createVector(x, y);
        this.plrs = [];
        this.posPlayer1 = createVector(this.centerPos.x - 5, this.centerPos.y - 5);
        this.posPlayer2 = createVector(this.centerPos.x + 5, this.centerPos.y - 5);
        this.posPlayer3 = createVector(this.centerPos.x - 5, this.centerPos.y + 5);
        this.posPlayer4 = createVector(this.centerPos.x + 5, this.centerPos.y + 5);

    }

    showTiles() {

        rectMode(CENTER);
        rect(this.centerPos.x, this.centerPos.y, 50, 100);
    }

    showPlrs() {
        if (this.plrs.length != 0) {
            for (var i = 0; i < this.plrs.length; i++){
                console.log(this.id);

                if (this.plrs[i].getId() == 1 && this.id == this.plrs[i].getTileID()) {
                    circle(this.posPlayer1.x, this.posPlayer1.y, 5);
                } else if (this.plrs[i].getId() == 2 && this.id == this.plrs[i].getTileID()) {
                    circle(this.posPlayer2.x, this.posPlayer2.y, 5);
                } else if (this.plrs[i].getId() == 3 && this.id == this.plrs[i].getTileID()) {
                    circle(this.posPlayer3.x, this.posPlayer3.y, 5);
                } else if (this.plrs[i].getId() == 4 && this.id == this.plrs[i].getTileID())
                    circle(this.posPlayer4.x, this.posPlayer4.y, 5);
            }
        }
    }

    startGame() {
        this.plrs.push(pl1);
        this.plrs.push(pl2);
        this.plrs.push(pl3);
        this.plrs.push(pl4);
    }
}


class plr {
    constructor(id) {
        this.id = id;
        this.tileID = 0;
    }

    getId() {
        return this.id;
    }

    setTileCount(diceResult) {
        this.tileID = this.tileID + diceResult;
    }

    getTileID() {
        return this.tileID;
    }
}

Answer 1

And of course it wouldn’t work, you need to define the classes first and then you use them, otherwise Javascript won’t know where to find the class

//////////////////////////////////////////////////////////////////////////////
class tile {

    constructor(x, y, id) {

        this.id = id;
        this.centerPos = createVector(x, y);
        this.plrs = [];
        this.posPlayer1 = createVector(this.centerPos.x - 5, this.centerPos.y - 5);
        this.posPlayer2 = createVector(this.centerPos.x + 5, this.centerPos.y - 5);
        this.posPlayer3 = createVector(this.centerPos.x - 5, this.centerPos.y + 5);
        this.posPlayer4 = createVector(this.centerPos.x + 5, this.centerPos.y + 5);

    }

    showTiles() {

        rectMode(CENTER);
        rect(this.centerPos.x, this.centerPos.y, 50, 100);
    }

    showPlrs() {
        if (this.plrs.length != 0) {
            for (var i = 0; i < this.plrs.length; i++){
                console.log(this.id);

                if (this.plrs[i].getId() == 1 && this.id == this.plrs[i].getTileID()) {
                    circle(this.posPlayer1.x, this.posPlayer1.y, 5);
                } else if (this.plrs[i].getId() == 2 && this.id == this.plrs[i].getTileID()) {
                    circle(this.posPlayer2.x, this.posPlayer2.y, 5);
                } else if (this.plrs[i].getId() == 3 && this.id == this.plrs[i].getTileID()) {
                    circle(this.posPlayer3.x, this.posPlayer3.y, 5);
                } else if (this.plrs[i].getId() == 4 && this.id == this.plrs[i].getTileID())
                    circle(this.posPlayer4.x, this.posPlayer4.y, 5);
            }
        }
    }

    startGame() {
        this.plrs.push(pl1);
        this.plrs.push(pl2);
        this.plrs.push(pl3);
        this.plrs.push(pl4);
    }
}


class plr {
    constructor(id) {
        this.id = id;
        this.tileID = 0;
    }

    getId() {
        return this.id;
    }

    setTileCount(diceResult) {
        this.tileID = this.tileID + diceResult;
    }

    getTileID() {
        return this.tileID;
    }
}
///////////////////////////////////////////////////////////////////////////////////

var jog = 0;

var tls = new Array(4);

function setup() {
    createCanvas(400, 400);
    background(220);
    for (var i = 0; i < tls.length; i++) {
        tls[i] = new tile(100 + ((i + 1) * 60), 100, i);
        tls[i].showTiles();
    }
    pl1 = new plr(1);
    pl2 = new plr(2);
    pl3 = new plr(3);
    pl4 = new plr(4);
}

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

function mousePressed() {
    tls[0].startGame();
}

function keyPressed() {
    //Problema está aqui
    pl1.setTileCount(2);
    pl1.showPlayers();
}