第15回【テトリス制作.3】


まずは動画を見てくださいね!
今回は後ろ部分(フィールド)のブロックを描画です。

フィールドを初期化して描画する

フィールドの配列を作って初期化します。
//フィールド本体
let field = [];

//フィールドのクリア
for(let y=0; y<FIELD_ROW ; y++ )
{
	field[y] = [];
	for(let x=0; x<FIELD_COL ; x++ )
	{
		field[y][x] =0;
	}
}
fieldという(一次元配列)を作ってから、2次元配列として初期化します。


次にこのフィールドを描画する関数を作ります。
//テトロミノを描画する
function drawField()
{
	con.clearRect(0,0,SCREEN_W,SCREEN_H);
	
	for(let y=0; y<FIELD_ROW ; y++ )
	{
		for(let x=0; x<FIELD_COL ; x++ )
		{
			if( field[y][x] )
			{
				let px = x * BLOCK_SIZE;
				let py = y * BLOCK_SIZE;
				con.fillStyle="red";
				con.fillRect(px,py,BLOCK_SIZE,BLOCK_SIZE);
				con.strokeStyle="black";
				con.strokeRect(px,py,BLOCK_SIZE,BLOCK_SIZE);
			}
		}
	}
}
drawField()、drawTetro()の順番に呼び出せばOKです。
drawTetro()の中のclearRectは消さないとフィールドが表示されないので注意してください。


このままだと何も表示されないので、適当にテストブロックを置きます。
field[5][8]  = 1;
field[19][9] = 1;
field[19][0] = 1;
これで表示されればOKです。

ブロックの描画は関数化してしまいましょう。
//ブロック一つを描画する
function drawBlock(x,y)
{
	let px = x * BLOCK_SIZE;
	let py = y * BLOCK_SIZE;
	con.fillStyle="red";
	con.fillRect(px,py,BLOCK_SIZE,BLOCK_SIZE);
	con.strokeStyle="black";
	con.strokeRect(px,py,BLOCK_SIZE,BLOCK_SIZE);
}
これで無駄な処理を省きます。

drawFieldとdrawTetroは同じ関数にしてしまいます。
これはお好みでどうぞ。
//全部描画する
function drawAll()
{
	con.clearRect(0,0,SCREEN_W,SCREEN_H);
	
	for(let y=0; y<FIELD_ROW ; y++ )
	{
		for(let x=0; x<FIELD_COL ; x++ )
		{
			if( field[y][x] )
			{
				drawBlock(x,y);
			}
		}
	}
	for(let y=0; y<TETRO_SIZE ; y++ )
	{
		for(let x=0; x<TETRO_SIZE ; x++ )
		{
			if( tetro[y][x] )
			{
				drawBlock(tetro_x+x, tetro_y+y);
			}
		}
	}
}


フィールドの初期化も関数にします。
...
init();
drawAll();
...
//初期化
function init()
{
	//フィールドのクリア
	for(let y=0; y<FIELD_ROW ; y++ )
	{
		field[y] = [];
		for(let x=0; x<FIELD_COL ; x++ )
		{
			field[y][x] =0;
		}
	}

	field[5][8]  = 1;
	field[19][9] = 1;
	field[19][0] = 1;
}

今回は特に難しいところは無いと思います!
次回に続く...




akichon/あきちょん
Youtubeでプログラミング講座やってるゲーム好きの(元?)プログラマ...
>>open profile...
■Twitter始めました
https://twitter.com/ak1chon
■Youtubeチャンネルはこちら
akichon(Youtube)