テトリスをつくってみました　　その１　ソースコードtetris.js

tetris.js



```js


var CANVAS_H = 600, CANVAS_W = 300;
var COLS = 10, ROWS = 20;
var RECT_W = 4;			 //blockShape配列で、テトリスブロックのx座標要素幅
var CUBEUNIT_LENGTH = CANVAS_H / ROWS ; 		// 30px

var INIT_BACKCOLOR = ' white ';



var SHAPES = [
	[0,0,0,0,
	 1,1,1,1],
	[0,0,0,0,
	 1,1,1,0,
	 1],
	[0,0,0,0,
	 1,1,1,0,
	 0,0,1],
	[0,0,0,0,
	 0,1,1,0,
	 0,1,1],
	[0,0,0,0,
	 1,1,0,0,
	 0,1,1,0],
	[0,0,0,0,
	 0,1,1,0,
	 1,1],
	[0,0,0,0,
	 1,1,1,0,
	 0,1]
];

var COLOR = ['red', 'orange', 'blue', 'yellow', 'green', 'purple', 'cyan'
];

var TETRIS_BLOCK = [];
(function () {
		for ( var i = 0; i < SHAPES.length; i++) {
		TETRIS_BLOCK [i]= {
			blockShape : SHAPES[i],
			blockColor : COLOR[i],
		};
		}
})();


var Board = [];
( function () {
	for ( var i = -3; i < 13; i++) {
		Board [i] = [];
	}
})();



var BoardWithColor;
(function () {
	BoardWithColor = [];
	for (var i = -3; i < COLS + 3; i++) {
		BoardWithColor [ i ] = [];
		for (var j = -1; j <ROWS + 3; j++) {
			BoardWithColor [ i ] [ j ] = [];
			
			Object.defineProperty ( BoardWithColor [ i ] [ j ], 'Board' , {
				
				get () { return Board [this.i] [this.j]; },
				set (value) { Board [this.i] [this.j] = value; },
			});
			
			BoardWithColor [ i ] [ j ].i = i;
			BoardWithColor [ i ] [ j ].j = j;

			
		}
	}
})();



var ROTATE_CHANGE ={};
ROTATE_CHANGE [ COLOR [ 0 ] ]= 
		[
			[
			0,0,0,0,
			1,1,1,1
			],
			[
			0,0,1,0,
			0,0,1,0,
			0,0,1,0,
			0,0,1,0
			],
		];
		
ROTATE_CHANGE[ COLOR [ 1 ] ] = 
		[
			[
			0,0,0,0,
			1,1,1,0,
			1
			],
			[
			0,1,0,0,
			0,1,0,0,
			0,1,1,0
			],
			[
			0,0,0,0,
			0,0,1,0,
			1,1,1,0
			],
			[
			1,1,0,0,
			0,1,0,0,
			0,1,0
			]
		];

ROTATE_CHANGE [ COLOR [ 2 ] ]= 
		[
			[
			0,0,0,0,
			1,1,1,0,
			0,0,1
			],
			[
			0,1,1,0,
			0,1,0,0,
			0,1
			],
			[
			0,0,0,0,
			1,0,0,0,
			1,1,1
			],
			[
			0,1,0,0,
			0,1,0,0,
			1,1
			]
		];
		
ROTATE_CHANGE[ COLOR [ 3 ] ] = 
		[
			[
			0,0,0,0,
			0,1,1,0,
			0,1,1,
			]
		];
		
ROTATE_CHANGE[ COLOR [ 4 ] ] = 
		[
			[
			0,0,0,0,
			1,1,0,0,
			0,1,1
			],
			[
			0,0,1,0,
			0,1,1,0,
			0,1
			],
		];

ROTATE_CHANGE[ COLOR [ 5 ] ] = 
		[
			[
			0,0,0,0,
			0,1,1,0,
			1,1,0,0,
			],
			[
			1,0,0,0,
			1,1,0,0,
			0,1
			],
		];
		
ROTATE_CHANGE[ COLOR [ 6 ] ] = 
		[
			[
			0,0,0,0,
			1,1,1,0,
			0,1,0,0
			],
			[
			0,1,0,0,
			0,1,1,0,
			0,1,0,0
			],
			[
			0,0,0,0,
			0,1,0,0,
			1,1,1,0
			],
			[
			0,1,0,0,
			1,1,0,0,
			0,1,0,0
			]
		];





 
var playerBlock = {
	x : 0,
	y : 0,
	tetrisBlock : 0 ,
	rotatePattern: 0,
};



function keyPress ( key ) {
	
	switch ( key ) {
		case 'down' :
			/// reset setTimeInterval 250ms
			moveBlock(0, 1);
			break;
		case 'rotate' :
			moveBlock(0, 0, 1);
			break;
		case 'left' :
			moveBlock(-1, 0);
			break;
		case 'right' :
			moveBlock( 1, 0);
			break;
	}
}

		


function  Render () {
	
	var BLOCK_W = CANVAS_W / COLS, BLOCK_H = CANVAS_H / ROWS;
	var canvas = document.getElementsByTagName('canvas')[0];
	var ctx = canvas.getContext('2d');

	this.nullblock;
	
	this.init =function init () {
		ctx.clearRect ( 0, 0, CANVAS_W, CANVAS_H ) ;
	};

	this.drawBlockUnit =
	function drawBlockUnit ( blockX, blockY , blockColor) {
	
		blockX *= CUBEUNIT_LENGTH;
		blockY *= CUBEUNIT_LENGTH;
		
		
		
		ctx.fillStyle = blockColor ;
		ctx.fillRect ( blockX, blockY, BLOCK_W, BLOCK_H ) ;
		//~ if (this.nullBlock) {
		if (this.nullBlock || blockColor == 'white') {		//whiteの条件だけでいけると気づいた
			ctx.strokeStyle = INIT_BACKCOLOR ;
			ctx.lineWidth = 2;	//枠線対策　なぜか白、太さ２にしないと薄い線が残る
			ctx.strokeRect( blockX, blockY, BLOCK_W, BLOCK_H ) ;
			ctx.lineWidth = 1;
		}
		else{
			ctx.strokeStyle = 'black' ;
			ctx.strokeRect( blockX, blockY, BLOCK_W, BLOCK_H ) ;
		}
			
	}

	this.drawBlockType =
	function drawBlockType ( blockX, blockY, blockType ) {
		var x, y, bool;

		for ( var i = 0; i < blockType.blockShape.length; i++) {
			bool = blockType.blockShape[i];
			
			x = blockX + i  - RECT_W * Math.floor( i / RECT_W );
			y = blockY + Math.floor(i / RECT_W) ;
			if ( bool) this.drawBlockUnit ( x, y,  blockType.blockColor );
		}
	};
	
	this.drawBoard =
	function drawBoard () {		
		//白（消すブロック）を先、それ以外の、つまり色ありを後にする
		//枠線対策
		
		//white first
		for (var i = 0;  i < COLS; i ++) {
			for ( var j = 0; j < ROWS; j++) {
				if (BoardWithColor [ i ][ j ].Color == 'white'){
				this.drawBlockUnit( i, j, BoardWithColor[ i ][ j ].Color );
				}
			}
		}
		//not white up
		for (var i = 0;  i < COLS; i ++) {
			for ( var j = 0; j < ROWS; j++) {
				if (BoardWithColor [ i ][ j ].Color !== 'white'){
				this.drawBlockUnit( i, j, BoardWithColor[ i ][ j ].Color );
				}
			}
		}
	}
		
}

```