javascript（テトリス007_クラスを使ったコードにする）

■javascriptでのクラスの試し。
前回でテトリスのコードはできたので、これをクラスを使ったコードに修正したい。javascriptでもそういったことができるか調べたところ、ES6からは、javaと同じような書き方ができるよう。
下のサンプルコードで動作とか確認した。ボタン（click0a()、click0b()）を押して、それぞれのコードを動作させてコンソールに表示。

class ClaSample {

  static staA = 0;
  #b;

  constructor(temp_a, temp_b) {
    this.a = temp_a;
    this.#b = temp_b;
  }
  set setter_a(temp_a) {
    this.a = temp_a;
  }
  get getter_a() {
    return this.a;
  }
  get getter_b() {
    return this.#b;
  }

//static
  setter_staA(temp_staA) {
    this.staA = temp_staA;
  }
  static setter_staA(temp_staA) {
    this.staA = temp_staA;
  }
  static addval_staA() {
    this.staA = this.staA + 1;
  }
}

function click0a() {
   //a:10, b:5
   const cla1 = new ClaSample(10, 5);
   
   console.log("1,cla1.a:"+cla1.a);
   console.log("2,cla1.getter_a:"+cla1.getter_a);
   cla1.setter_a = 3;
   console.log("3,cla1.a:"+cla1.a);
   console.log("4,cla1.getter_a:"+cla1.getter_a);

   // console.log(cla1.#b);  エラーになる。
   console.log("5,cla1.getter_b:"+cla1.getter_b);
}

function click0b() {
   const cla2 = new ClaSample(3, 7);   
   //エラーにはならない。static staAは更新されない。cla2.staAが新規にできる。
   cla2.setter_staA(8); 
   console.log("1,ClaSample.staA:"+ClaSample.staA);
   ClaSample.setter_staA(4);
   console.log("2,ClaSample.staA:"+ClaSample.staA);
   ClaSample.addval_staA();
}

ボタンclick0aでは、初期値 a=10, b=5 でコンストラクタを使って初期化（cla1）、変数aを取得してコンソールに表示、直接アクセスする場合とゲッター（getter_a）を使う場合の二通りで。その後、セッター（setter_a）で変数aに新しい数値を入れて、また値を取得。変数bは、頭に#を付けて、プライベートなものとしている。直接アクセスするとエラーが出る（cla1.#bの部分、Uncaught SyntaxError: Private field '#b' must be declared in an enclosing class）。
実行結果が下。

ボタンclick0bでは、初期値 a=3, b=7 で初期化後、static の操作を試す。static を付けたものはクラス名（ここではClaSample）に合わせる必要がある。付いていないものは、インスタンス名（ここではcla2）。cla2.setter_staA() で値を入れても、クラス内の static staA は更新されない。下の結果では、一度目で初期値の 0 とセッターからの 4 が表示され、もう一度押すと、addval_staA で +1 された値の 5 とセッターからの 4 が表示されている。

staticとプライベートの変数の扱いは分かったので、テトリスのコードも修正する。
ピース（ブロック）の部分とボードの部分でそれぞれにクラスを作って、関係する関数をクラスへのメソッドとして紐づけたい。