Используя p5.js, можно ли нарисовать класс, который рисует подклассы внутри себя? Например, блок 4x4 состоит из блоков 1x1

Я пытаюсь сделать игру, подобную тетрис, где все части игры состоят из более мелких частей, которые имеют общие свойства.

В настоящее время у меня есть:

    export class SquareTetromino {
      [x: string]: any;
      constructor(x, y, w, h) {
      ...
      }

      show(p5) {
         p5.push();
         p5.translate(this.posX, this.posY);
         p5.fill("#D8B6FF")
         p5.rect(0,0,this.w, this.h);
         p5.pop();

      }
     ...
    }

и:

    export class BlockTetromino {
      [x: string]: any;
      constructor(x, y, w, h) {
      ...
      }

      test(p5) {
          this.testArray.push(new SquareTetromino(this.posX,this.posY,this.w,this.h));
          this.testArray.push(new SquareTetromino(this.posX - 50,this.posY,this.w,this.h));
          this.testArray.push(new SquareTetromino(this.posX - 50,this.posY + 50,this.w,this.h));
          this.testArray.push(new SquareTetromino(this.posX,this.posY + 50,this.w,this.h));
      }

      show(p5) {
          p5.push();
          this.testArray.forEach((block) => {
            block.show(p5)
          })
          p5.pop();

      }
    }

И из моего основного компонента:

  s.setup = () => {

  ...

            bodies.push(new BlockTetromino(200,-50,50,50))
            bodies[0].test(s);
  ...
          }

  s.draw = () => {
         ...


          for (let i = 0; i < bodies.length; i++) {
            bodies[i].show(s)
          }

Я хотел бы иметь класс Block, который рисует небольшой блок, а затем вызывать этот блок внутри класса Square, который рисует 4 небольших блока. Затем, создав экземпляр Square, я соединю 4 блока в один объект.

Я думаю, что где-то отсутствует цикл for.