diff --git a/contributing.md b/contributing.md index abfeb38..5268c7f 100644 --- a/contributing.md +++ b/contributing.md @@ -1,5 +1,12 @@ # Contributing +We are running the game from script.js and using other global objects from other scripts, + +> - We draw the space using drawSpace.js script. +> - instruction.js script contains the game instruction on how to play. +> - levels.js script contains the logic for generating levels. +> - mainmenu.js script, displays the main menu. + In order to contribute fork the repo and then clone your local copy. This game is created with only Javascript and Html. diff --git a/index.html b/index.html index 945ef97..1bd9a64 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,28 @@ - - - Reflexio! - - - - -
- - Canvas tag not supported! - - - - - - - - -
- + + Reflexio! + + + + + + +
+ + Canvas tag not supported! + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/scripts/drawSpace.js b/scripts/drawSpace.js index 96e75c8..19248b8 100644 --- a/scripts/drawSpace.js +++ b/scripts/drawSpace.js @@ -4,193 +4,176 @@ var drawParticleFlag = false; var spaceParticles = []; var particleCount = 150; -function initSpace() // ?? -{ - for (var i = 0; i < particleCount; i++) - { - myCircle = { - x : midx + (50*Math.random() - 25), - y : midy + (50*Math.random() - 25), - particleRadius : Math.ceil((Math.random()*1) + 0.5)/2, - vY : 4*((Math.random()) - 0.51), - vX : 4*((Math.random()) - 0.51) - }; - spaceParticles.push(myCircle); - }; +function initSpace() { + // ?? + for (var i = 0; i < particleCount; i++) { + myCircle = { + x: midx + (50 * Math.random() - 25), + y: midy + (50 * Math.random() - 25), + particleRadius: Math.ceil(Math.random() * 1 + 0.5) / 2, + vY: 4 * (Math.random() - 0.51), + vX: 4 * (Math.random() - 0.51), + }; + spaceParticles.push(myCircle); + } } -function drawParticles() -{ - if(drawParticleFlag && particles) - { - for (var i = 0; i < particleCount; i++) - { - gameArena.beginPath(); - gameArena.shadowBlur = 0; - gameArena.arc(spaceParticles[i].x, spaceParticles[i].y, spaceParticles[i].particleRadius, 0, 2*Math.PI, true); - gameArena.fillStyle = "#FFFFFF"; - gameArena.fill(); - } - gameArena.arc(midx, midy, 90, 0, 2*Math.PI, true); - gameArena.shadowBlur = 200; - gameArena.shadowColor = "BLAcK"; - gameArena.fillStyle = "#000000"; - gameArena.fill(); - } +function drawParticles() { + if (drawParticleFlag && particles) { + for (var i = 0; i < particleCount; i++) { + gameArena.beginPath(); + gameArena.shadowBlur = 0; + gameArena.arc( + spaceParticles[i].x, + spaceParticles[i].y, + spaceParticles[i].particleRadius, + 0, + 2 * Math.PI, + true + ); + gameArena.fillStyle = "#FFFFFF"; + gameArena.fill(); + } + gameArena.arc(midx, midy, 90, 0, 2 * Math.PI, true); + gameArena.shadowBlur = 200; + gameArena.shadowColor = "BLAcK"; + gameArena.fillStyle = "#000000"; + gameArena.fill(); + } } -function drawParticlesLevel() -{ - if(drawParticleFlag && particles) - { - for (var i = 0; i < 50; i++) - { - gameArena.beginPath(); - gameArena.shadowBlur = 0; - gameArena.arc(spaceParticles[i].x, spaceParticles[i].y, spaceParticles[i].particleRadius, 0, 2*Math.PI, true); - gameArena.fillStyle = "#FFFFFF"; - gameArena.fill(); - } - gameArena.arc(midx, midy, 90, 0, 2*Math.PI, true); - gameArena.shadowBlur = 200; - gameArena.shadowColor = "BLACK"; - gameArena.fillStyle = "#000000"; - gameArena.fill(); - } +function drawParticlesLevel() { + if (drawParticleFlag && particles) { + for (var i = 0; i < 50; i++) { + gameArena.beginPath(); + gameArena.shadowBlur = 0; + gameArena.arc( + spaceParticles[i].x, + spaceParticles[i].y, + spaceParticles[i].particleRadius, + 0, + 2 * Math.PI, + true + ); + gameArena.fillStyle = "#FFFFFF"; + gameArena.fill(); + } + gameArena.arc(midx, midy, 90, 0, 2 * Math.PI, true); + gameArena.shadowBlur = 200; + gameArena.shadowColor = "BLACK"; + gameArena.fillStyle = "#000000"; + gameArena.fill(); + } } -function drawMovingSpace() -{ - if(initialisationFlag) - { - initSpace(); - initialisationFlag=0; - } - - for (var i = 0; i < particleCount; i++) - { - var new_x = spaceParticles[i].x + initialOffset*spaceParticles[i].vX; - var new_y = spaceParticles[i].y + initialOffset*spaceParticles[i].vY; - if(new_x < (width+5) && new_y < (height+5) && new_x > (-5) && new_y > (-5)) - { - spaceParticles[i].x = new_x; - spaceParticles[i].y = new_y; - } - else{ - if(new_x > (width+5)) - { - myCircle = { - x : midx + (50*Math.random() - 25), - y : midy + (50*Math.random() - 25), - particleRadius : Math.ceil((Math.random()*1) + 0.5)/2, - vY : 4*((Math.random()) - 0.51), - vX : 4*((Math.random()) - 0.51) - }; - spaceParticles[i] = myCircle; - } - else if(new_y > height+5) - { - myCircle = { - x : midx + (50*Math.random() - 25), - y : midy + (50*Math.random() - 25), - particleRadius : Math.ceil((Math.random()*1) + 0.5)/2, - vY : 4*((Math.random()) - 0.51), - vX : 4*((Math.random()) - 0.51) - }; - spaceParticles[i] = myCircle; - } - else if(new_x < (-5)) - { - myCircle = { - x : midx + (50*Math.random() - 25), - y : midy + (50*Math.random() - 25), - particleRadius : Math.ceil((Math.random()*1) + 0.5)/2, - vY : 4*((Math.random()) - 0.51), - vX : 4*((Math.random()) - 0.51) - }; - spaceParticles[i] = myCircle; - } - else if(new_y < (-5)) - { - myCircle = { - x : midx + (50*Math.random() - 25), - y : midy + (50*Math.random() - 25), - particleRadius : Math.ceil((Math.random()*1) + 0.5)/2, - vY : 4*((Math.random()) - 0.51), - vX : 4*((Math.random()) - 0.51) - }; - spaceParticles[i] = myCircle; - } - } - } - initialOffset = 1; - drawParticles(); +function drawMovingSpace() { + if (initialisationFlag) { + initSpace(); + initialisationFlag = 0; + } + + for (var i = 0; i < particleCount; i++) { + var new_x = spaceParticles[i].x + initialOffset * spaceParticles[i].vX; + var new_y = spaceParticles[i].y + initialOffset * spaceParticles[i].vY; + if (new_x < width + 5 && new_y < height + 5 && new_x > -5 && new_y > -5) { + spaceParticles[i].x = new_x; + spaceParticles[i].y = new_y; + } else { + if (new_x > width + 5) { + myCircle = { + x: midx + (50 * Math.random() - 25), + y: midy + (50 * Math.random() - 25), + particleRadius: Math.ceil(Math.random() * 1 + 0.5) / 2, + vY: 4 * (Math.random() - 0.51), + vX: 4 * (Math.random() - 0.51), + }; + spaceParticles[i] = myCircle; + } else if (new_y > height + 5) { + myCircle = { + x: midx + (50 * Math.random() - 25), + y: midy + (50 * Math.random() - 25), + particleRadius: Math.ceil(Math.random() * 1 + 0.5) / 2, + vY: 4 * (Math.random() - 0.51), + vX: 4 * (Math.random() - 0.51), + }; + spaceParticles[i] = myCircle; + } else if (new_x < -5) { + myCircle = { + x: midx + (50 * Math.random() - 25), + y: midy + (50 * Math.random() - 25), + particleRadius: Math.ceil(Math.random() * 1 + 0.5) / 2, + vY: 4 * (Math.random() - 0.51), + vX: 4 * (Math.random() - 0.51), + }; + spaceParticles[i] = myCircle; + } else if (new_y < -5) { + myCircle = { + x: midx + (50 * Math.random() - 25), + y: midy + (50 * Math.random() - 25), + particleRadius: Math.ceil(Math.random() * 1 + 0.5) / 2, + vY: 4 * (Math.random() - 0.51), + vX: 4 * (Math.random() - 0.51), + }; + spaceParticles[i] = myCircle; + } + } + } + initialOffset = 1; + drawParticles(); } -function drawLevelSpace() -{ - if(initialisationFlag) - { - initSpace(); - initialisationFlag=0; - } - - for (var i = 0; i < 50; i++) - { - var new_x = spaceParticles[i].x + initialOffset*spaceParticles[i].vX; - var new_y = spaceParticles[i].y + initialOffset*spaceParticles[i].vY; - if(new_x < (width+5) && new_y < (height+5) && new_x > (-5) && new_y > (-5)) - { - spaceParticles[i].x = new_x; - spaceParticles[i].y = new_y; - } - else{ - if(new_x > (width+5)) - { - myCircle = { - x : midx + (50*Math.random() - 25), - y : midy + (50*Math.random() - 25), - particleRadius : Math.ceil((Math.random()*1) + 0.5)/2, - vY : 4*((Math.random()) - 0.51), - vX : 4*((Math.random()) - 0.51) - }; - spaceParticles[i] = myCircle; - } - else if(new_y > height+5) - { - myCircle = { - x : midx + (50*Math.random() - 25), - y : midy + (50*Math.random() - 25), - particleRadius : Math.ceil((Math.random()*1) + 0.5)/2, - vY : 4*((Math.random()) - 0.51), - vX : 4*((Math.random()) - 0.51) - }; - spaceParticles[i] = myCircle; - } - else if(new_x < (-5)) - { - myCircle = { - x : midx + (50*Math.random() - 25), - y : midy + (50*Math.random() - 25), - particleRadius : Math.ceil((Math.random()*1) + 0.5)/2, - vY : 4*((Math.random()) - 0.51), - vX : 4*((Math.random()) - 0.51) - }; - spaceParticles[i] = myCircle; - } - else if(new_y < (-5)) - { - myCircle = { - x : midx + (50*Math.random() - 25), - y : midy + (50*Math.random() - 25), - particleRadius : Math.ceil((Math.random()*1) + 0.5)/2, - vY : 4*((Math.random()) - 0.51), - vX : 4*((Math.random()) - 0.51) - }; - spaceParticles[i] = myCircle; - } - } - } - initialOffset = 1; - drawParticlesLevel(); -} \ No newline at end of file +function drawLevelSpace() { + if (initialisationFlag) { + initSpace(); + initialisationFlag = 0; + } + + for (var i = 0; i < 50; i++) { + var new_x = spaceParticles[i].x + initialOffset * spaceParticles[i].vX; + var new_y = spaceParticles[i].y + initialOffset * spaceParticles[i].vY; + if (new_x < width + 5 && new_y < height + 5 && new_x > -5 && new_y > -5) { + spaceParticles[i].x = new_x; + spaceParticles[i].y = new_y; + } else { + if (new_x > width + 5) { + myCircle = { + x: midx + (50 * Math.random() - 25), + y: midy + (50 * Math.random() - 25), + particleRadius: Math.ceil(Math.random() * 1 + 0.5) / 2, + vY: 4 * (Math.random() - 0.51), + vX: 4 * (Math.random() - 0.51), + }; + spaceParticles[i] = myCircle; + } else if (new_y > height + 5) { + myCircle = { + x: midx + (50 * Math.random() - 25), + y: midy + (50 * Math.random() - 25), + particleRadius: Math.ceil(Math.random() * 1 + 0.5) / 2, + vY: 4 * (Math.random() - 0.51), + vX: 4 * (Math.random() - 0.51), + }; + spaceParticles[i] = myCircle; + } else if (new_x < -5) { + myCircle = { + x: midx + (50 * Math.random() - 25), + y: midy + (50 * Math.random() - 25), + particleRadius: Math.ceil(Math.random() * 1 + 0.5) / 2, + vY: 4 * (Math.random() - 0.51), + vX: 4 * (Math.random() - 0.51), + }; + spaceParticles[i] = myCircle; + } else if (new_y < -5) { + myCircle = { + x: midx + (50 * Math.random() - 25), + y: midy + (50 * Math.random() - 25), + particleRadius: Math.ceil(Math.random() * 1 + 0.5) / 2, + vY: 4 * (Math.random() - 0.51), + vX: 4 * (Math.random() - 0.51), + }; + spaceParticles[i] = myCircle; + } + } + } + initialOffset = 1; + drawParticlesLevel(); +} diff --git a/scripts/levels.js b/scripts/levels.js index 6b8aea5..587f97b 100644 --- a/scripts/levels.js +++ b/scripts/levels.js @@ -1147,7 +1147,7 @@ function initialiseLevel() } } -// From here sab set ho raha hai +// From here, we are setting up the game function drawGUI() { diff --git a/style.css b/style.css index 466b663..619ba81 100644 --- a/style.css +++ b/style.css @@ -1,31 +1,31 @@ -canvas -{ - background-color: black; - margin-top: 15px; - box-shadow: 0px 0px 60px 10px #18CAE6; - border-radius: 25px; - border: 5px solid; - border-color: #E6FFFF; +canvas { + background-color: black; + margin: 15px auto 0; + box-shadow: 0px 0px 60px 10px #18cae6; + border-radius: 25px; + border: 5px solid; + border-color: #e6ffff; } - -body -{ - background-color: #000000; +#center { + display: flex; +} +body { + background-color: #000000; padding: 0; margin: 0; } @font-face { - font-family: Zorque; - src: url("fonts/zorque.ttf"); + font-family: Zorque; + src: url("fonts/zorque.ttf"); } @font-face { - font-family: Complex; - src: url("fonts/complex promo.ttf"); + font-family: Complex; + src: url("fonts/complex promo.ttf"); } @font-face { - font-family: DJB; - src: url("fonts/DJB Speak the Truth.ttf"); + font-family: DJB; + src: url("fonts/DJB Speak the Truth.ttf"); }