From 0699c09b199540a3d6655182eb0a046e876206f2 Mon Sep 17 00:00:00 2001 From: coralmania Date: Fri, 18 Oct 2019 12:40:05 +0300 Subject: [PATCH] First commit --- index.html | 21 +++++ main.js | 244 +++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 18 ++++ 3 files changed, 283 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..f0a5301 --- /dev/null +++ b/index.html @@ -0,0 +1,21 @@ + + + + + Breaking Ball + + + + + +
+
+
+
+ + + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..734818f --- /dev/null +++ b/main.js @@ -0,0 +1,244 @@ +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); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..9368287 --- /dev/null +++ b/styles.css @@ -0,0 +1,18 @@ +table { + border-spacing: 0 0; +} + +td { + height: 15px; + width: 13px; + /*border: 1px solid black;*/ + text-align: center; + margin: 0; + padding: 0; +} + +#container { + margin: 0 auto; + position: absolute; + border: 3px solid pink; +}