javascript（テトリス003_ピースの回転）

■回転するロジックを考えてみる。
前回まで１マスで考えてきたけど、下のような３マスに拡張する。この場合、ピースを回転させる操作が必要。

まず、どこを中心に回転させるか考えてみたい。重心位置に近いところで回った方が直感的なイメージに合う気がするので、重心位置を求める。３マス分の下の図を、１マスの正方形と２マスの長方形が隣り合っていると考えると、それぞれの重心は (x, y) = (1, 1), (x, y) = (3, 2)となる。１目盛を１とする。((正方形の位置×正方形の重さ) + (長方形の位置×長方形の重さ)) / 全体の重さ、で計算すると、x = ((1 * 1) + (3 * 2)) / 3 = 2.3333, y = ((1 * 1) + (2 * 2)) / 3 = 1.66666 となる（赤丸部分）。

ここから一番近い点は下の①の赤丸部分となる。あるいは、少し遠いように見えるけど右下のマスを中心とした②。下の図で数字の部分はマス毎のIDを示す。

次に、①や②で回転するロジックを考える。上のマスのIDから、実際にどう変化させればいいか分かるので、そこから考えると、①では、+10（下へ）, -1（左へ）, -10（上へ）, +1（右へ）を繰り返す形になる。各マスのIDを要素とする配列に対してこの操作を行うサンプルが下。

let block = [15,25,24]
let addArray = [+10, -1, -10, +1]
let addArray2 = [+11, +9, -11, -9]

//①
//[25,24,14]
//[24,14,15]
//[14,15,25]
//(要素1) +10 → -1  → -10 → +1
//(要素2) -1  → -10 → +1  → +10
//(要素3) -10 → +1  → +10 → -1
//(仮) +1  → +10 → -1  → -10
//②
//[26,25,15]
//[35,25,26]
//[24,25,35]
//(要素1) +11 → +9  → -11 → -9
//(要素2) 0  → 0 → 0  → 0
//(要素3) -9 → +11  → +9 → -11

function click0a() {
   block[0] = block[0]+addArray[0];
   block[1] = block[1]+addArray[1];
   block[2] = block[2]+addArray[2];
   console.log(block);

   console.log("OrgAddArray:"+addArray);
   let temp = addArray.shift();
   addArray.push(temp);
   console.log("ShiftAddArray:"+addArray);
}

function click0b() {
   block[0] = block[0]+addArray2[0];
   block[2] = block[2]+addArray2[3];
   console.log(block);

   console.log("OrgAddArray2:"+addArray2);
   let temp = addArray2.shift();
   addArray2.push(temp);
   console.log("ShiftAddArray2:"+addArray2);
}

ここで、「配列.shift()」は、配列の１番目の要素を取得し（配列内から削除）、「配列.push (要素)」は、要素を配列の最後に追加する。この2つの操作で、演算用の配列内の要素を変化させている。

コンソール画面の結果が下。意図したとおりに動いているよう。

回転のロジックは何となくイメージが付いたけど、４マスにすることも考えて、もう少し一般化できないものか。