テトリス用のブロック(テトリミノ)を複数用意する

前回作成したOBJECT変数を一つのパターンではなく、複数のパターンを持たせる様に変更します。

var block;
var OBJECTS = [
    [
        [1, 1, 1, 1],
        [0, 0, 0, 0]
    ],
    [
        [1, 1, 1, 0],
        [0, 0, 1, 0]
    ],
    [
        [1, 1, 0, 0],
        [0, 1, 1, 0]
    ],
    [
        [0, 1, 1, 0],
        [0, 1, 1, 0]
    ],
    [
        [1, 1, 1, 0],
        [0, 1, 0, 0]
    ]
];

大きな配列を用意して、OBJECTの構成の配列を複数作成して入れておきます。(OBJECTの変数名をOBJECTSに変更しています)
テトリミノを表示するためにはOBJECTSからランダムに一つ取得する必要があり、取得したものを扱える様にblock変数を用意して、下記の関数を追加します。

function getBlock(){
    r = Math.floor(Math.random() * OBJECTS.length);
    return OBJECTS[r];
}

getBlock関数は、OBJECTSの配列に入れたテトリミノのオブジェクト群からランダムでテトリミノを一つ取得するというもので、Math.floor()は引数に入れた数字の小数点を切捨て。Math.random()は0～1までの間でランダムな値を出力する(0.34256とか)。OBJECTS.lengthはテトリミノ群のオブジェクト数を返すもので、

r = Math.floor(Math.random() * OBJECTS.length);

この様に書くと、0からテトリミノ群の数の間のどれかの値を返し、OBJECTS[r]でランダムでテトリミノを取得できるというわけです。この関数を追加したら、

//四角を描く
function draw(){
    //OBJECTにある図形の配列からランダムで取得する
    block = getBlock();
    ctx.strokeStyle = "blue";
    for ( var y = 0; y < 2; y++) {
        for ( var x = 0; x < 4; x++) {
            if ( block[y][x] ) {
                ctx.strokeRect(x * SIDE, y * SIDE, SIDE, SIDE);
            }
        }
    }
}

getBlock()でテトリミノオブジェクトを取得し、事前に用意したblock変数に入れる。前のコードで if ( OBJECT[y][x] )としていたところをif ( block[y][x] )と変更することで、

読み込む度に上のテトリミノのどれかが表示されます。(グレーのグリットは実際には表示されません)