kfir/BrakingBall
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

First commit

Browse source
This commit is contained in:
coralmania 2019-10-18 12:40:05 +03:00
commit 0699c09b19
3 changed files with 283 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
index.html Normal file
View file

@ -0,0 +1,21 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Breaking Ball</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body onkeydown="keyListen(event);">
<div id="score"></div>
<div id="container">
<table id="tabl" border="0"></table>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="main.js"></script>
</html>

244
main.js Normal file
View file

@ -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);

18
styles.css Normal file
View file

@ -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;
}