applesaucesome/tetris.html

## tetris.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Tetris</title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" defer></script>
<script type="text/javascript" src="tetris_js_6_19.js" defer></script>
<link rel="stylesheet" href="tetris_css.css" />
</head>

<body>
<script>
var bWidth = 5,
bHeight = 10,
tetrisBoard = '',
boardArray, boardCoords, xCoordMax, yCoordMax, numOfCoords, boardCoordsY, boardCoordsX, coordinates,
BlocksArray = new Array(),
BlockSquare = '',
BlockLshapeL = '',
BlockLshapeR = 'L_right_orange.png',
BlockSshapeR = '',
BlockSshapeL = '',
BlockLine = '',
BlockPyramid = '',
increment = 0,
incrementNew;


BlocksArray.push(BlocksArray, BlockSquare, BlockLshapeL, BlockLshapeR, BlockSshapeR, BlockSshapeL, BlockLine, BlockPyramid);

function createShape(){
	var Lshape = document.createElement("img")
	Lshape.src = 'L_right_orange.png';
	Lshape.id = 'Lrightorange';
	Lshape.style.position = 'absolute';
	document.body.appendChild(Lshape);

	}
	function incrementNum(){
		increment = increment + 40;
	}

	function animShape(){
	document.getElementById('Lrightorange').style.top = increment + 'px';

	if(document.getElementById('Lrightorange').style.top < '300px'){
		console.log('should remove');
		document.body.removeChild(document.getElementById('Lrightorange'));
	}
	}


	var intervalTimer = window.setInterval("incrementNum(); animShape();", 1500);
/* Start - visual grid in html */

for (h=0;h<bHeight;h++) {
	for (w=0;w<bWidth;w++) {
			tetrisBoard += '<div class="tetrisCell"><a class="coordLnk">&nbsp;</a></div>';
	}
	tetrisBoard += '<br/>';
}
/* End - visual grid in html */

$(document).ready(function(){

	$('.board').html(tetrisBoard);

	createShape();


	/* Start - assemble array for grid coordinates */
	xCoordMax = bWidth;
	yCoordMax = bHeight;
	numOfCoords = xCoordMax * yCoordMax;

	boardCoordsY = new Array();
	boardCoordsX = new Array();


	for (y=0;y<yCoordMax;y++) {

		for (x=0;x<xCoordMax;x++) {
		boardCoordsY.push(y);
		boardCoordsX.push(x);
		}

	}

	var coordinates = {};
	for (i=0;i<numOfCoords;i++) {
		coordinates[i] = boardCoordsX[i] + ',' + boardCoordsY[i];
		$('.coordLnk').eq(i).attr('id',coordinates[i]);
	}

	/* End - assemble array for grid coordinates */


});

</script>
<style>
.board {
	border: 1px solid grey;
	width: auto;
	float: left;
}

.tetrisCell{
	height: 20px;
	width: 20px;
	border: 1px solid grey;
	display: inline-block;
}

.Lrightorange{

}
</style>
<h1>Tetris</h1>
<div class="board" id="tetrisBoard">

</div>
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

	<html>

	<head>
	<title>Tetris</title>


	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" defer></script>
	<script type="text/javascript" src="tetris_js_6_19.js" defer></script>
	<link rel="stylesheet" href="tetris_css.css" />
	</head>

	<body>
	<script>
	var bWidth = 5,
	bHeight = 10,
	tetrisBoard = '',
	boardArray, boardCoords, xCoordMax, yCoordMax, numOfCoords, boardCoordsY, boardCoordsX, coordinates,
	BlocksArray = new Array(),
	BlockSquare = '',
	BlockLshapeL = '',
	BlockLshapeR = 'L_right_orange.png',
	BlockSshapeR = '',
	BlockSshapeL = '',
	BlockLine = '',
	BlockPyramid = '',
	increment = 0,
	incrementNew;


	BlocksArray.push(BlocksArray, BlockSquare, BlockLshapeL, BlockLshapeR, BlockSshapeR, BlockSshapeL, BlockLine, BlockPyramid);

	function createShape(){
	var Lshape = document.createElement("img")
	Lshape.src = 'L_right_orange.png';
	Lshape.id = 'Lrightorange';
	Lshape.style.position = 'absolute';
	document.body.appendChild(Lshape);

	}
	function incrementNum(){
	increment = increment + 40;
	}

	function animShape(){
	document.getElementById('Lrightorange').style.top = increment + 'px';

	if(document.getElementById('Lrightorange').style.top < '300px'){
	console.log('should remove');
	document.body.removeChild(document.getElementById('Lrightorange'));
	}
	}


	var intervalTimer = window.setInterval("incrementNum(); animShape();", 1500);
	/* Start - visual grid in html */

	for (h=0;h<bHeight;h++) {
	for (w=0;w<bWidth;w++) {
	tetrisBoard += '<div class="tetrisCell"><a class="coordLnk"> </a></div>';
	}
	tetrisBoard += '<br/>';
	}
	/* End - visual grid in html */

	$(document).ready(function(){

	$('.board').html(tetrisBoard);

	createShape();


	/* Start - assemble array for grid coordinates */
	xCoordMax = bWidth;
	yCoordMax = bHeight;
	numOfCoords = xCoordMax * yCoordMax;

	boardCoordsY = new Array();
	boardCoordsX = new Array();


	for (y=0;y<yCoordMax;y++) {

	for (x=0;x<xCoordMax;x++) {
	boardCoordsY.push(y);
	boardCoordsX.push(x);
	}

	}

	var coordinates = {};
	for (i=0;i<numOfCoords;i++) {
	coordinates[i] = boardCoordsX[i] + ',' + boardCoordsY[i];
	$('.coordLnk').eq(i).attr('id',coordinates[i]);
	}

	/* End - assemble array for grid coordinates */



	});

	</script>
	<style>
	.board {
	border: 1px solid grey;
	width: auto;
	float: left;
	}

	.tetrisCell{
	height: 20px;
	width: 20px;
	border: 1px solid grey;
	display: inline-block;
	}

	.Lrightorange{

	}
	</style>
	<h1>Tetris</h1>
	<div class="board" id="tetrisBoard">

	</div>
	</body>
	</html>