Tetris-by-navtive-javascript

by 兵兵 王

HTML

<body style='text-align:center;margin:0;padding:0;'>
    <canvas width='500' height='600' id='block' style='border:1px #982 solid;'></canvas>
</body>

JavaScript

(function block () {
	var bgColors = ['#333','#435','#f3e','#5ae','#cc7','#a8a'];
	var borderColors = ['#a33','#4d5','#f8e','#52e','#fa7','#68a'];
	var blockW = 16;
	var borderW = 2;
	var blockMap = [];
	var W = 500;
	var H = 600;
	var X = 18;
	var Y = 30;
	var ctx = document.getElementById('block').getContext('2d');
	var currentBlock;
	var nextBlock;
	var T;
	ctx.lineWidth = borderW;
	var blockShapes = [
		[[[0,1],[1,1],[2,1],[3,1]], [[1,0],[1,1],[1,2],[1,3]]],//shu
		[[[0,0],[0,1],[1,1],[1,2]], [[0,1],[1,1],[1,0],[2,0]]],//z
		[[[0,2],[0,1],[1,1],[1,0]], [[0,0],[1,0],[1,1],[2,1]]],//反 z
		[[[0,0],[0,1],[1,1],[2,1]], [[0,2],[1,2],[1,1],[1,0]], [[2,1],[2,0],[1,0],[0,0]], [[1,0],[0,0],[0,1],[0,2]]],//7
		[[[0,1],[0,0],[1,0],[2,0]], [[1,2],[0,2],[0,1],[0,0]], [[2,0],[2,1],[1,1],[0,1]], [[0,0],[1,0],[1,1],[1,2]]],//反7
		[[[0,1],[1,0],[1,1],[1,2]], [[1,1],[0,0],[1,0],[2,0]], [[1,1],[0,2],[0,1],[0,0]], [[1,0],[2,1],[1,1],[0,1]]],//tu
		[[[0,0],[0,1],[1,0],[1,1]]]//fangkuai
	];
	function blockCreate () {
		var returnObj = {};
		var i = bgColors.length*Math.random()|0;
		returnObj.colorPos = i+1;
		returnObj.bgColor = bgColors[i];
		returnObj.borderColor = borderColors[i];
		i = blockShapes.length*Math.random()|0;
		returnObj.blockPos = [i, blockShapes[i].length*Math.random()|0];
		returnObj.x = 5;
		returnObj.y = 0;
		return returnObj;
	}
	function init () {
		blockMap = [];
		var line = []
		for(var i = 0; i < Y; i++) {
			line = []
			for(var j = 0; j < X; j++) {
				line.push(0);
			}
			blockMap.push(line)
		}
		currentBlock = blockCreate();
		nextBlock = blockCreate();
		nextBlockDraw();
		T = setInterval(moveDown,500);
		ctx.fillStyle = '#0f6';
		ctx.strokeStyle = '#f26';
		ctx.beginPath();
		ctx.lineCap='butt';
		ctx.moveTo(X*20+2,0);
		ctx.lineTo(X*20+2,H);
		ctx.fill();
		ctx.stroke();
	}
	function clear () {
		var shape = blockShapes[currentBlock.blockPos[0]][currentBlock.blockPos[1]];
		var l = shape.length;
		for (var i = 0; i < l; i++)...