第14回【テトリス制作.2】


まずは動画を見てくださいね!
前回表示したテトロミノをキーボードで上下左右に動かせるまでやります。

キーボードのイベントを拾う

document.onkeydown = function(e)
{
	switch( e.keyCode )
	{
		case 37:// 左
			break;
		case 38:// 上
			break;
		case 39:// 右
			break;
		case 40:// 下
			break;
		case 32:// スペース
			break;
	}
}
まだ処理はいれずbreakしています。
キーボードが押された時に、onkeydownに登録した関数が呼ばれます。
その際に、引数としてキーコードが渡されます。
キーコードの数値は「javascript keycode」等でググってくださいw



テトロミノに座標をもたせる

let tetro_x = 0;
let tetro_y = 0;
変数でテトロミノの座標を定義します。
まずは0,0を入れてます。


次にブロックの表示部分の座標の計算を修正します。
			let px = (tetro_x + x) * BLOCK_SIZE;
			let py = (tetro_y + y) * BLOCK_SIZE;
			con.fillStyle="red";
			con.fillRect(px,py,BLOCK_SIZE,BLOCK_SIZE);
x,yにそれぞれテトロミノの座標を加算しました。


そして改めてキーボードイベントで座標を変える様にします。
	switch( e.keyCode )
	{
		case 37:// 左
			tetro_x--;
			break;
		case 38:// 上
			tetro_y--;
			break;
		case 39:// 右
			tetro_x++;
			break;
		case 40:// 下
			tetro_y++;
			break;
		case 32:// スペース
			break;
	}
これでそれぞれのキーが押された時に座標が変わります。

関数を使い、描画を共通化します。

//テトロミノを描画する
function drawTetro()
{
	for(let y=0; y<TETRO_SIZE ; y++ )
	{
		for(let x=0; x<TETRO_SIZE ; x++ )
		{
			if( tetro[y][x] )
			{
				let px = (tetro_x + x) * BLOCK_SIZE;
				let py = (tetro_y + y) * BLOCK_SIZE;
				con.fillStyle="red";
				con.fillRect(px,py,BLOCK_SIZE,BLOCK_SIZE);
			}
		}
	}
}
...
...
drawTetro();
...


キャンバスのサイズが足りないので設定します。
またフィールドのサイズも同時に定義します。
//フィールドサイズ
const FIELD_COL = 10;
const FIELD_ROW = 20;

//ブロック一つのサイズ(ピクセル)
CONST BLOCK_SIZE = 30;

//スクリーンサイズ
const SCREEN_W = BLOCK_SIZE * FIELD_COL;
const SCREEN_H = BLOCK_SIZE * FIELD_ROW;

...
...

can.width  = SCREEN_W;
can.height = SCREEN_H;

また、移動時に前の後が残るため、描画の前に画面をクリアする
con.clearRect(0,0,SCREEN_W,SCREEN_H);


これでテトロミノが動くようになりました。
次回に続く...

今回までのソースコード

ご自身で書く事をオススメいたします!
しっかり復習しましょう。
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8">;</head>
<body>
<canvas id="can"></canvas>
<script>

//フィールドサイズ
const FIELD_COL = 10;
const FIELD_ROW = 20;

//ブロック一つのサイズ(ピクセル)
const BLOCK_SIZE = 30;

//スクリーンサイズ
const SCREEN_W = BLOCK_SIZE * FIELD_COL;
const SCREEN_H = BLOCK_SIZE * FIELD_ROW;

//テトロミノのサイズ
const TETRO_SIZE =4;

//テトロミノ本体
let tetro=[
	[ 0, 0, 0, 0 ],
	[ 1, 1, 0, 0 ],
	[ 0, 1, 1, 0 ],
	[ 0, 0, 0, 0 ]
];

//テトロミノの座標
let tetro_x = 0;
let tetro_y = 0;

let can = document.getElementById("can");
let con = can.getContext("2d");

can.width  = SCREEN_W;
can.height = SCREEN_H;
can.style.border = "4px solid #555";

drawTetro();

//テトロミノを描画する
function drawTetro()
{
	con.clearRect(0,0,SCREEN_W,SCREEN_H);
	
	for(let y=0; y<TETRO_SIZE ; y++ )
	{
		for(let x=0; x<TETRO_SIZE ; x++ )
		{
			if( tetro[y][x] )
			{
				let px = (tetro_x + x) * BLOCK_SIZE;
				let py = (tetro_y + 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);
			}
		}
	}
}


document.onkeydown = function(e)
{
	switch( e.keyCode )
	{
		case 37:// 左
			tetro_x--;
			break;
		case 38:// 上
			tetro_y--;
			break;
		case 39:// 右
			tetro_x++;
			break;
		case 40:// 下
			tetro_y++;
			break;
		case 32:// スペース
			break;
	}
	
	drawTetro();
}

</script>
</body>
</html>







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