How to repeat new items of class in an array Javascript p5js?

Viewed 26

(My inspiration comes from this question)

Here's the code from the original question:

class Platform{
    constructor(xCoord, yCoord, width, height){
        this.x = xCoord;
        this.y = yCoord;
        this.w = width;
        this.h = height;
    }
    display(){
        rectMode(CENTER);
        fill("#503707");
        strokeWeight(1);
        rect(this.x, this.y, this.w, this.h);
        fill('#38761d');
        triangle(this.x - 100, this.y - 20, this.x - 80, this.y - 20, this.x - 90, this.y);
        triangle(this.x - 80, this.y - 20, this.x - 60, this.y - 20, this.x - 70, this.y);
        triangle(this.x - 60, this.y - 20, this.x - 40, this.y - 20, this.x - 50, this.y);
        triangle(this.x - 40, this.y - 20, this.x - 20, this.y - 20, this.x - 30, this.y);
        triangle(this.x - 20, this.y - 20, this.x, this.y - 20, this.x - 10, this.y);
        triangle(this.x, this.y - 20, this.x + 20, this.y - 20, this.x + 10, this.y);
        triangle(this.x + 20, this.y - 20, this.x + 40, this.y - 20, this.x + 30, this.y);
        triangle(this.x + 40, this.y - 20, this.x + 60, this.y - 20, this.x + 50, this.y);
        triangle(this.x + 60, this.y - 20, this.x + 80, this.y - 20, this.x + 70, this.y);
        triangle(this.x + 80, this.y - 20, this.x + 100, this.y - 20, this.x + 90, this.y);
    }
    move(){
        this.x-=2;
    }
}

New items look like this:

let pl1 = new Platform(600,350,200,40);
let pl2 = new Platform(850,250,200,40);
let pl3 = new Platform(1100,200,200,40);

This is how they are in draw

 pl1.display();
 pl1.move();
 pl2.display();
 pl2.move();
 pl3.display();
 pl3.move();

So my question here is: what if i want to repeat 50/100/1000 of the new items of the same class?

let pl1 = new Platform(600,350,200,40);
let pl2 = new Platform(850,250,200,40);
let pl3 = new Platform(1100,200,200,40);
.
.
.
let pl100 = new Platform(xxxx,xxx,xxx,xx);

And the draw will be like:

 pl1.display();
 pl1.move();
 pl2.display();
 pl2.move();
 pl3.display();
 pl3.move();
.
.
.
 pl100.display();
 pl100.move();

I saw someone's answer to the original question is to put these into an array:

let platforms = [pl1, pl2, pl3];

Then to update and draw:

for (let pl of platforms) {
  pl.move();
  pl.display();
}

But that dose not work for many/random amount of new items(or to repeat and fill the canvas one by each other).

let platforms = [pl1, pl2, pl3,...,pl100];

Any solution?

0 Answers
Related