さぁ!検索しよう!

数回に分けて公開している、HTML5+JavaScriptによるテトリスのソースコードを解読するシリーズの2です。

今回は、操作ブロックの回転処理を行なうrotate関数を解読します。

参考にした記事

【JavaScript】200行で作るテトリスのレシピ【HTML5】 – コードレシピ

※自分なりの解釈ですので、正確ではないかもしれません。

rotate関数

// 操作ブロックを回す処理
function rotate( current ) {
  var newCurrent = [];
  for ( var y = 0; y < 4; ++y ) {
    newCurrent[ y ] = [];
    for ( var x = 0; x < 4; ++x ) {
      newCurrent[ y ][ x ] = current[ 3 - x ][ y ];
    }
  }
  return newCurrent;
}

https://github.com/ottati/canvas-tetris

処理内容

操作ブロックの回転処理を行なうrotate関数ですが、関数内で行なっていることは以下の通りです。

newCurrent

newCurrentは、回転後の操作ブロックがセットされる配列です。

var newCurrent = [];

操作ブロックを回転

rotate関数では、計16回の処理で現在の操作ブロック内の配列要素を回転後の操作ブロック内に1マスずつ書き換えます。

書き換えられる過程

棒のブロックで例えると、以下のようにして現在の操作ブロックが書き換えられます。尚、回転は全て時計回りです。

1. 現在の操作ブロック

現在の操作ブロック(current)は以下の通りです。

[1,1,1,1]
[0,0,0,0]
[0,0,0,0]
[0,0,0,0]

この状態から1マスずつ計16回の書き換えを行ないます。

2. 1回目の書き換え

current[3][0](current[3-0][0])の配列要素をnewCurrent[0][0]に代入します。

1回目 
current[3][0]
[1,1,1,1]
[0,0,0,0]
[0,0,0,0]
[(0),0,0,0]
↓
newCurrent[0][0]
[(0),,,]
[,,,]
[,,,]
[,,,]

3. 2回目の書き換え

current[2][0](current[3-1][0])の配列要素をnewCurrent[0][1]に代入します。

2回目
current[2][0]
[1,1,1,1]
[0,0,0,0]
[(0),0,0,0]
[,0,0,0]
↓
newCurrent[0][1]
[0,(0),,]
[,,,]
[,,,]
[,,,]

4. 3回目の書き換え

current[1][0](current[3-2][0])の配列要素をnewCurrent[0][2]に代入します。

3回目
current[1][0]
[1,1,1,1]
[(0),0,0,0]
[,0,0,0]
[,0,0,0]
↓
newCurrent[0][2]
[0,0,(0),]
[,,,]
[,,,]
[,,,]

5. 4回目の書き換え

current[0][0](current[3-3][0])の配列要素をnewCurrent[0][3]に代入します。

4回目
current[0][0]
[(1),1,1,1]
[,0,0,0]
[,0,0,0]
[,0,0,0]
↓
newCurrent[0][3]
[0,0,0,(1)]
[,,,]
[,,,]
[,,,]

6. 5回目の書き換え

current[3][1](current[3-0][1])の配列要素をnewCurrent[1][0]に代入します。

5回目
current[3][1]
[,1,1,1]
[,0,0,0]
[,0,0,0]
[,(0),0,0]
↓
newCurrent[1][0]
[0,0,0,1]
[(0),,,]
[,,,]
[,,,]

7. 6回目の書き換え

current[2][1](current[3-1][1])の配列要素をnewCurrent[1][1]に代入します。

6回目
current[2][1]
[,1,1,1]
[,0,0,0]
[,(0),0,0]
[,,0,0]
↓
newCurrent[1][1]
[0,0,0,1]
[0,(0),,]
[,,,]
[,,,]

8. 7回目の書き換え

current[1][1](current[3-2][1])の配列要素をnewCurrent[1][2]に代入します。

7回目
current[1][1]
[,1,1,1]
[,(0),0,0]
[,,0,0]
[,,0,0]
↓
newCurrent[1][2]
[0,0,0,1]
[0,0,(0),]
[,,,]
[,,,]

9. 8回目の書き換え

current[0][1](current[3-3][1])の配列要素をnewCurrent[1][3]に代入します。

8回目
current[0][1]
[,(1),1,1]
[,,0,0]
[,,0,0]
[,,0,0]
↓
newCurrent[1][3]
[0,0,0,1]
[0,0,0,(1)]
[,,,]
[,,,]

同様の処理を残り8回行われることで、回転後の操作ブロックが完成します。

16回目
current[3][3]
[0,0,0,1]
[0,0,0,1]
[0,0,0,1]
[0,0,0,1]

以上で、HTML5+JavaScript】テトリスのソースコード内にある関数を解読2を終わります。