第13回【テトリス制作.1(JS)】


まずは動画を見てくださいね!
今回から今までの知識を使ってテトリスのプログラミングをやっていきます。
完成サンプルは[コチラ]です。
テトリスはゲームプログラムの中でも比較的簡単に制作ができ、初心者にはもってこいの素材だと思います。
プログラム初心者はどんどんプログラムを組んで経験を積んでいってください。

HTMLファイルの準備

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8">;</head>
<body>
<canvas id="can"></canvas>
<script>


</script>
</body>
</html>
まずはHTMLファイルを作り、必要なタグを記述します。
動画では載せていませんが、headタグを追加しています。
これで、scriptタグの中にテトリスのプログラムを書いていきます。



まずは四角を描きます

プログラムを書くにあたって何から始めるかは自由ですが...
私は目に見えるものから作っていくのが好きなので、まずは四角(ブロック)を書くところから始めます。
上記のHTML内に、id="can"でcanvasを作ったのでここに描きます。
let can = document.getElementById("can");
let con = can.getContext("2d");
ID"can"のcanvasの要素を取得して変数canに入れます。
そして、canからContextを取得して変数conに入れます。

これでconに対して四角を描くことが出来ます。
con.fillStyle="red";
con.fillRect(0,0,50,50);
fillRectは座標とサイズを指定します。
0,0(画面の左上)に50,50(縦横50ピクセル)の赤い四角を描画しました。

const BLOCK_SIZE = 30;
...
...
con.fillStyle="red";
con.fillRect(0,0,BLOCK_SIZE,BLOCK_SIZE);
ブロックのサイズは変えやすい様にconstで定義しました。


テトロミノを描く

ブロックの組み合わせ(テトロミノ)を定義します。
テトロミノは2次元配列で表現することにしました。
//テトロミノのサイズ
const TETRO_SIZE =4;

//テトロミノ本体
let tetro=[
	[ 0, 0, 0, 0 ],
	[ 1, 1, 0, 0 ],
	[ 0, 1, 1, 0 ],
	[ 0, 0, 0, 0 ]
];
constでテトロミノのサイズに4を定義しました。
テトロミノ本体は2次元配列で0がブロック無し、1がブロック有りとします。

それでは、これを実際に表示してみます。
for(let y=0; y<TETRO_SIZE ; y++ )
{
	for(let x=0; x<TETRO_SIZE ; x++ )
	{
		if( tetro[y][x] )
		{
			let px = x * BLOCK_SIZE;
			let py = y * BLOCK_SIZE;
			con.fillStyle="red";
			con.fillRect(px,py,BLOCK_SIZE,BLOCK_SIZE);
		}
	}
}
for文を二重に組んでtetroの中身をチェックして1の時にブロックを表示します。
表示する時は座標px,pyを計算しています。
これで、Z型のテトロミノが画面左上に描画できました。

			con.fillStyle="red";
			con.fillRect(px,py,BLOCK_SIZE,BLOCK_SIZE);
			con.strokeStyle="black";
			con.strokeRect(px,py,BLOCK_SIZE,BLOCK_SIZE);
ブロックが少しは綺麗になるようにstrokeRectで枠を描きました。

次回に続く...



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