BrakingBall/main.js

var table_Width = 30;
var table_Height = 30;
var table_Max = table_Width * table_Height;
var speed = 70; // Higher = Slower
var maxSpeed = 50; // Lower = Faster

var headSnake = 4;
var max_Cells = table_Width * table_Height;
var cell_Id = 0; // Counter ID For initCreate()
var arr = [];
var loopMovement;

var playerBoard = (table_Width * table_Height) - (table_Width / 2) - 3;
var boardSize = 6;
var ball = 255;

var fire;
var _fire;//fire's interval




var downRight = table_Width + 1;
var downLeft = table_Width - 1;
var upRight = -table_Width + 1;
var upLeft = -table_Width - 1;

var directionBall = upRight;

var blocks = [94, 98, 102, 106, 110, 114, 184, 188, 192, 196, 200, 204, 274, 278, 282, 286, 290, 294, 364, 368, 372, 376, 380, 384];


function initCreate() {
	document.getElementById("tabl").innerHTML = "";
	var tab = document.getElementById("tabl");

	for (i = 0; i < table_Height; i++) {
		var trtr = document.createElement("tr");

		for (j = 0; j < table_Width; j++) {
			var a = document.createElement("td");
			a.setAttribute("id", "ta" + cell_Id);
			arr.push(a);
			cell_Id++;
			trtr.appendChild(a);
		}
		tab.appendChild(trtr);
	}

	// Player Create
	arr[ball].style.backgroundColor = "red";

	for (i = 0; i < blocks.length; i++) {
		blocks[i] = Math.ceil(Math.random() * 400);
		arr[blocks[i]].style.backgroundColor = "green";
		arr[blocks[i] + 1].style.backgroundColor = "green";
	}


	for (i = 0; i < boardSize; i++) {
		arr[playerBoard + i].style.backgroundColor = "black";
	}
}


function changeDiraction(directUpDown) {

	if (directionBall == upRight && directUpDown == 1) {
		directionBall = downRight;
		return;
	}
	if (directionBall == upLeft && directUpDown == 1) {
		directionBall = downLeft;
		return;
	}
	if (directionBall == downRight && directUpDown == 1) {
		directionBall = upRight;
		return;
	}
	if (directionBall == downLeft && directUpDown == 1) {
		directionBall = upLeft;
		return;
	}



	if (directionBall == downRight) {
		directionBall = downLeft;
		return;
	}
	if (directionBall == downLeft) {
		directionBall = downRight;
		return;
	}
	if (directionBall == upRight) {
		directionBall = upLeft;
		return;
	}
	if (directionBall == upLeft) {
		directionBall = upRight;
		return;
	}


}


function cheackHitBorad() {
	var hit;
	for (i = 0; i < boardSize; i++) {
		hit = ((playerBoard + i) == ball + directionBall);
		if (hit == true) {
			return true;
		}
	}
	return hit;
}


function ballMovement() {
	arr[ball].style.backgroundColor = "white";

	ball += directionBall;
	document.getElementById('ta' + ball).style.borderRadius = '1em';

	// Right Side Check
	if ((ball + directionBall) % table_Width == 0) {
		changeDiraction();
	}

	// Left Side Check
	if (ball % table_Width == 0) {
		changeDiraction();
	}

	// Up Side Check
	if ((ball + directionBall) < 0) {
		changeDiraction(1);
	}

	// Down Side (Loose) Check
	if ((ball + directionBall) > (table_Width * table_Height)) {
		console.log("LOOSERRRRRRRR");
		clearInterval(_ballMovement);
	}

	// Board Hit By Ball Check 
	if (ball > (table_Max - (table_Width * 2)) && cheackHitBorad()) {
		changeDiraction(1);
	}





	// Blocks Hit Check
	for (i = 0; i < blocks.length; i++) {
		if ((ball + directionBall) == blocks[i] || (ball + directionBall) == (blocks[i] + 1)) {
			if (ball - blocks[i] == table_Width || ball - blocks[i] > 0) {
				console.log(i);

				changeDiraction(1);
			} else if (ball - blocks[i] == -table_Width || ball - blocks[i] < 0) {
				changeDiraction(1);
			}

			arr[blocks[i]].style.backgroundColor = "white";
			arr[blocks[i] + 1].style.backgroundColor = "white";

			blocks.splice(i, 1);
		}

	}

	arr[ball].style.backgroundColor = "red";

}



function movement(side) {


	for (i = 0; i < boardSize; i++) {
		arr[playerBoard + i].style.backgroundColor = "white";
	}

	playerBoard += side;
	console.log(playerBoard);

	if (playerBoard < table_Max - table_Width) {
		playerBoard++;
	}
	if (playerBoard + boardSize > (table_Width * table_Height)) {
		playerBoard--;
	}

	for (i = 0; i < boardSize; i++) {
		arr[playerBoard + i].style.backgroundColor = "black";

	}

}
function _fire_(){
if (fire < 0) {
	arr[fire +table_Width].style.backgroundColor = 'white';
	arr[(fire+boardSize) +table_Width].style.backgroundColor = 'white';
	clearInterval(_fire);
}
else{
	console.log('here');
	fire -=table_Width;
	arr[fire].style.backgroundColor = 'orange';
	arr[(fire+boardSize)].style.backgroundColor = 'orange';
	arr[(fire+boardSize)+table_Width].style.backgroundColor = 'white';
	arr[fire +table_Width].style.backgroundColor = 'white';
}


}
function keyListen(event) {
	switch (event.keyCode) {
		case 37: //left
			movement(-1);
			break;
		case 39: //right
			movement(1);
			break;
		case 32: //fire
		    fire =  playerBoard;
			 _fire = setInterval(_fire_,10);
			break;
		// case 40: //down
		// 	movement(table_Width);
		// 	break;
		case 80: //down
			clearInterval(_ballMovement);
			break;
	}
}


initCreate();
var _ballMovement = setInterval(ballMovement, speed);