First commit
This commit is contained in:
coralmania
commit
0699c09b19
3 changed files with 283 additions and 0 deletions
21
index.html
Normal file
21
index.html
Normal 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
244
main.js
Normal 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
18
styles.css
Normal 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;
|
||||
}
|
||||
Loading…
Reference in a new issue