# How move player in board

**URL:** <https://discourse.processing.org/t/how-move-player-in-board/22731>\
**Category:** Coding Questions\
**Created:** [July 19, 2020, 5:42pm UTC](https://discourse.processing.org/t/how-move-player-in-board/22731 "2020-07-19T17:42:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Xremix31](https://avatars.discourse-cdn.com/v4/letter/x/ba8739/32.png) [@Xremix31](https://discourse.processing.org/u/Xremix31)\
**Post date:** [July 19, 2020, 5:42pm UTC](https://discourse.processing.org/t/how-move-player-in-board/22731/1 "2020-07-19T17:42:53Z")

</div>

Hello, I’m having trouble making the player move on the board. I already corrected the post and put the functions in correct classes. How do I get the houses id and correct these two mistakes? I tried to declare the id in the constructor inside the Tile class, but that works like rounding the border. The code is now structured as follows:

class Player{  
constructor(id){  
this.id = id;  
this.tileID = 0;  
this.plrs = [];  
}

getID(){  
return this.id;  
}

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

getTileID() {  
return this.tileID;  
}

showPlayers() {  
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()) {  
let q = color(0);  
fill(q);  
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 Tile {  
constructor(x, y, lar, alt, id) {  
this.x = x;  
this.y = y;  
this.lar = lar;  
this.alt = alt;  
this.id = id;  
this.centerPos = createVector(x, y);  
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);  
}

show() {  
//noStroke();  
let q = color(223, 216, 216);  
fill(q);  
rect(this.centerPos.x, this.centerPos.y, this.lar, this.alt, this.id);  
}

}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

var tileRowUp = [];  
var tileRowdown = [];  
var tileColLeft = [];  
var tileColRight = [];  
var tls = new Array(4);

function setup() {  
createCanvas(800, 800);  
background(255);  
const n = 9;  
const m = 9;  
var alt = height / m;  
var lar = width / n;  
var id = 4;  
for (var i = 0; i \< n; i++) {  
var posX = map(i, 0, n, 0, width);  
tileRowUp[i] = new Tile(posX, 0, lar, alt, id);  
console.log(tileRowUp[i]);  
tileRowUp[i].show();  
tileRowdown[i] = new Tile(posX, height - lar, alt, lar, id);  
tileRowdown[i].show();  
}

for (var j = 0; j \< m; j++) {  
var posY = map(j, 0, m, 0, height);  
var posY2 = map(j, 0, m, height, 0);  
tileColLeft[i] = new Tile(0, posY, lar, alt, id);  
tileColLeft[i].show();  
tileColRight[i] = new Tile(width - lar, posY2, lar, alt, id);  
tileColRight[i].show();  
}

```
pl1 = new plr(1);
pl2 = new plr(2);
pl3 = new plr(3);
pl4 = new plr(4);

```

}

function draw() {  
for (var i = 0; i \< tileRowUp.length; i++) {  
tileRowUp[i].showPlayers();  
}  
for (var i = 0; i \< tileRowDown.length; i++) {  
tileRowDown[i].showPlayers();  
}  
for (var i = 0; i \< tileColLeft.length; i++) {  
tileColLeft[i].showPlayers();  
}  
for (var i = 0; i \< tileColRight.length; i++) {  
tileColRight[i].showPlayers();  
}  
}

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

function keyPressed() {  
//Problema está aqui  
pl1.setTileCount(2);  
pl1.showPlayers();  
pl2.setTileCount(1);  
pl2.showPlayers();  
pl3.setTileCount(6);  
pl3.showPlayers();  
pl4.setTileCount(3);  
pl4.showPlayers();  
}

 ![Capturar1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6663cabbc173ae1c21314a9354d1fe449cf94d44.png)

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [July 19, 2020, 5:54pm UTC](https://discourse.processing.org/t/how-move-player-in-board/22731/2 "2020-07-19T17:54:52Z")

</div>

Looks like you have your Player and Tile class backwards … I see tile methods in Player and player methods in Tile.

`showPlrs()` does not exist, looks like a typo.

`new plr();` class doesn’t exist in the code you shared, I think you meant `new Player();`

---

<div class="post-metadata">

**Author:** ![Xremix31](https://avatars.discourse-cdn.com/v4/letter/x/ba8739/32.png) [@Xremix31](https://discourse.processing.org/u/Xremix31)\
**Post date:** [July 19, 2020, 6:41pm UTC](https://discourse.processing.org/t/how-move-player-in-board/22731/3 "2020-07-19T18:41:13Z")

</div>

Thanks slow\_izzm for try me help, I edited the post and move some functions to correct classes and correct some erros. but now i need get the id of tiles for my player move in board and correct the two functions that i can’t solution for this.

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [July 20, 2020, 6:02pm UTC](https://discourse.processing.org/t/how-move-player-in-board/22731/4 "2020-07-20T18:02:00Z")

</div>

> [@Xremix31](#):
>
> ```auto
> pl1 = new plr(1);
> pl2 = new plr(2);
> pl3 = new plr(3);
> pl4 = new plr(4);
> 
> ```

This still needs updated … `plr` class does not exist.

> [@Xremix31](#):
>
> tileRowUp[i].showPlayers();

`Tile` class does not contain `showPlayers()` method.

> [@Xremix31](#):
>
> tls[0].startGame();

`Tile` class does not contain `startGame()` method.

I suggest learning and becoming mire familiar with OOP and the use of classes.

here is a great resource …

[![](https://img.youtube.com/vi/xG2Vbnv0wvg/maxresdefault.jpg "6.1: Introduction to Object-Oriented Programming with ES6 - p5.js Tutorial") ](https://www.youtube.com/watch?v=xG2Vbnv0wvg)