第19回【テトリス制作.7】


まずは動画を見てくださいね!
テトロミノ7種類作ってランダムで出てくるようにします。

テトロミノを定義する

const TETRO_TYPES = [
	[],	// 0.空っぽ
	
	[					// 1.I
		[ 0, 0, 0, 0 ],
		[ 1, 1, 1, 1 ],
		[ 0, 0, 0, 0 ],
		[ 0, 0, 0, 0 ]
	],
	[					// 2.L
		[ 0, 1, 0, 0 ],
		[ 0, 1, 0, 0 ],
		[ 0, 1, 1, 0 ],
		[ 0, 0, 0, 0 ]
	],
	[					// 3.J
		[ 0, 0, 1, 0 ],
		[ 0, 0, 1, 0 ],
		[ 0, 1, 1, 0 ],
		[ 0, 0, 0, 0 ]
	],
	[					// 4.T
		[ 0, 1, 0, 0 ],
		[ 0, 1, 1, 0 ],
		[ 0, 1, 0, 0 ],
		[ 0, 0, 0, 0 ]
	],
	[					// 5.O
		[ 0, 0, 0, 0 ],
		[ 0, 1, 1, 0 ],
		[ 0, 1, 1, 0 ],
		[ 0, 0, 0, 0 ]
	],
	[					// 6.Z
		[ 0, 0, 0, 0 ],
		[ 1, 1, 0, 0 ],
		[ 0, 1, 1, 0 ],
		[ 0, 0, 0, 0 ]
	],
	[					// 7.S
		[ 0, 0, 0, 0 ],
		[ 0, 1, 1, 0 ],
		[ 1, 1, 0, 0 ],
		[ 0, 0, 0, 0 ]
	]
];
2次元配列を7個(0番を入れると8個)持つ3次元配列でテトロミノを初期化しました。


ランダムでテトロミノを設定する

//テトロミノ本体
let tetro;
//テトロミノの形
let tetro_t;
...
tetro_t = Math.floor( Math.random()*(TETRO_TYPES.length-1) )+1;
tetro = TETRO_TYPES[ tetro_t ];
ランダムで1から7を作り変数tetro_tに入れます。
TETRO_TYPESからtetro_t番目を tetroにコピーしてます。
3次元配列の二次元分をコピーしてることに注意しましょう。


//初期位置
const START_X = FIELD_COL/2 - TETRO_SIZE/2;
const START_Y = 0;
...
//テトロミノの座標
let tetro_x = START_X;
let tetro_y = START_Y;
...
	if( checkMove(  0, 1 ) )tetro_y++;
	else
	{
		fixTetro();
		tetro_x = START_X;
		tetro_y = START_Y;
	}
真ん中から落ちてくるように修正しました。
真ん中の位置はconstで定義しています。

// ブロックの落ちる処理
function dropTetro()
{
	if( checkMove(  0, 1 ) )tetro_y++;
	else
	{
		fixTetro();
		tetro_t = Math.floor( Math.random()*(TETRO_TYPES.length-1) )+1;
		tetro = TETRO_TYPES[ tetro_t ];
		tetro_x = START_X;
		tetro_y = START_Y;
	}
	drawAll();
}
落ちた時に、改めて違うテトロミノを設定します。



テトロミノに色を付けましょう

まず色を定義します。
const TETRO_COLORS =[
	"#000",			//0空
	"#6CF",			//1水色
	"#F92",			//2オレンジ
	"#66F",			//3青
	"#C5C",			//4紫
	"#FD2",			//5黄色
	"#F44",			//6赤
	"#5B5"			//7緑
];

drawBlock関数を改良します。

//ブロック一つを描画する
function drawBlock(x,y,c)
{
	let px = x * BLOCK_SIZE;
	let py = y * BLOCK_SIZE;
	con.fillStyle=TETRO_COLORS[c];
	con.fillRect(px,py,BLOCK_SIZE,BLOCK_SIZE);
	con.strokeStyle="black";
	con.strokeRect(px,py,BLOCK_SIZE,BLOCK_SIZE);
}

引数にcを追加して、redを設定してた部分をTETRO_COLORS[c]にする。

drawBlockの呼び出し部分を直します。
	...
	drawBlock(x,y,field[y][x]);
	...
	drawBlock(tetro_x+x, tetro_y+y,tetro_t);
	...
	...
	field[tetro_y + y][tetro_x + x] = tetro_t;
フィールドを表示する部分
テトロミノを表示する部分を修正します。
フィールドに固定する時もtetro_tをセットします。

これで色付きのテトロミノになりました。
続く...



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