diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..d69b3d1 Binary files /dev/null and b/.DS_Store differ diff --git a/app.js b/app.js index 7476fa9..c0c8bfe 100644 --- a/app.js +++ b/app.js @@ -1,133 +1,133 @@ -const grid = document.querySelector('.grid') -const resultsDisplay = document.querySelector('.results') -let currentShooterIndex = 202 -let width = 15 -let direction = 1 -let invadersId -let goingRight = true -let aliensRemoved = [] -let results = 0 +const grid = document.querySelector(".grid"); +const resultsDisplay = document.querySelector(".results"); +let currentShooterIndex = 202; +let width = 15; +let direction = 1; +let invadersId; +let goingRight = true; +let aliensRemoved = []; +let results = 0; for (let i = 0; i < 225; i++) { - const square = document.createElement('div') - grid.appendChild(square) + const square = document.createElement("div"); + grid.appendChild(square); } -const squares = Array.from(document.querySelectorAll('.grid div')) +const squares = Array.from(document.querySelectorAll(".grid div")); const alienInvaders = [ - 0,1,2,3,4,5,6,7,8,9, - 15,16,17,18,19,20,21,22,23,24, - 30,31,32,33,34,35,36,37,38,39 -] + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 30, 31, + 32, 33, 34, 35, 36, 37, 38, 39, +]; function draw() { for (let i = 0; i < alienInvaders.length; i++) { - if(!aliensRemoved.includes(i)) { - squares[alienInvaders[i]].classList.add('invader') + if (!aliensRemoved.includes(i)) { + squares[alienInvaders[i]].classList.add("invader"); } } } -draw() +draw(); function remove() { for (let i = 0; i < alienInvaders.length; i++) { - squares[alienInvaders[i]].classList.remove('invader') + squares[alienInvaders[i]].classList.remove("invader"); } } -squares[currentShooterIndex].classList.add('shooter') - +squares[currentShooterIndex].classList.add("shooter"); function moveShooter(e) { - squares[currentShooterIndex].classList.remove('shooter') - switch(e.key) { - case 'ArrowLeft': - if (currentShooterIndex % width !== 0) currentShooterIndex -=1 - break - case 'ArrowRight' : - if (currentShooterIndex % width < width -1) currentShooterIndex +=1 - break + squares[currentShooterIndex].classList.remove("shooter"); + switch (e.key) { + case "ArrowLeft": + if (currentShooterIndex % width !== 0) currentShooterIndex -= 1; + break; + case "ArrowRight": + if (currentShooterIndex % width < width - 1) currentShooterIndex += 1; + break; } - squares[currentShooterIndex].classList.add('shooter') + squares[currentShooterIndex].classList.add("shooter"); } -document.addEventListener('keydown', moveShooter) +document.addEventListener("keydown", moveShooter); function moveInvaders() { - const leftEdge = alienInvaders[0] % width === 0 - const rightEdge = alienInvaders[alienInvaders.length - 1] % width === width -1 - remove() + const leftEdge = alienInvaders[0] % width === 0; + const rightEdge = + alienInvaders[alienInvaders.length - 1] % width === width - 1; + remove(); if (rightEdge && goingRight) { for (let i = 0; i < alienInvaders.length; i++) { - alienInvaders[i] += width +1 - direction = -1 - goingRight = false + alienInvaders[i] += width + 1; + direction = -1; + goingRight = false; } } - if(leftEdge && !goingRight) { + if (leftEdge && !goingRight) { for (let i = 0; i < alienInvaders.length; i++) { - alienInvaders[i] += width -1 - direction = 1 - goingRight = true + alienInvaders[i] += width - 1; + direction = 1; + goingRight = true; } } for (let i = 0; i < alienInvaders.length; i++) { - alienInvaders[i] += direction + alienInvaders[i] += direction; } - draw() + draw(); - if (squares[currentShooterIndex].classList.contains('invader', 'shooter')) { - resultsDisplay.innerHTML = 'GAME OVER' - clearInterval(invadersId) + if (squares[currentShooterIndex].classList.contains("invader", "shooter")) { + resultsDisplay.innerHTML = "GAME OVER"; + clearInterval(invadersId); } for (let i = 0; i < alienInvaders.length; i++) { - if(alienInvaders[i] > (squares.length)) { - resultsDisplay.innerHTML = 'GAME OVER' - clearInterval(invadersId) + if (alienInvaders[i] > squares.length) { + resultsDisplay.innerHTML = "GAME OVER"; + clearInterval(invadersId); } } if (aliensRemoved.length === alienInvaders.length) { - resultsDisplay.innerHTML = 'YOU WIN' - clearInterval(invadersId) + resultsDisplay.innerHTML = "YOU WIN"; + clearInterval(invadersId); } } -invadersId = setInterval(moveInvaders, 600) +invadersId = setInterval(moveInvaders, 600); function shoot(e) { - let laserId - let currentLaserIndex = currentShooterIndex + let laserId; + let currentLaserIndex = currentShooterIndex; function moveLaser() { - squares[currentLaserIndex].classList.remove('laser') - currentLaserIndex -= width - squares[currentLaserIndex].classList.add('laser') - - if (squares[currentLaserIndex].classList.contains('invader')) { - squares[currentLaserIndex].classList.remove('laser') - squares[currentLaserIndex].classList.remove('invader') - squares[currentLaserIndex].classList.add('boom') - - setTimeout(()=> squares[currentLaserIndex].classList.remove('boom'), 300) - clearInterval(laserId) - - const alienRemoved = alienInvaders.indexOf(currentLaserIndex) - aliensRemoved.push(alienRemoved) - results++ - resultsDisplay.innerHTML = results - console.log(aliensRemoved) - + squares[currentLaserIndex].classList.remove("laser"); + currentLaserIndex -= width; + squares[currentLaserIndex].classList.add("laser"); + + if (squares[currentLaserIndex].classList.contains("invader")) { + squares[currentLaserIndex].classList.remove("laser"); + squares[currentLaserIndex].classList.remove("invader"); + squares[currentLaserIndex].classList.add("boom"); + + setTimeout( + () => squares[currentLaserIndex].classList.remove("boom"), + 300 + ); + clearInterval(laserId); + + const alienRemoved = alienInvaders.indexOf(currentLaserIndex); + aliensRemoved.push(alienRemoved); + results++; + resultsDisplay.innerHTML = results; + console.log(aliensRemoved); } - } - switch(e.key) { - case 'ArrowUp': - laserId = setInterval(moveLaser, 100) + switch (e.key) { + case "ArrowUp": + laserId = setInterval(moveLaser, 100); } } -document.addEventListener('keydown', shoot) +document.addEventListener("keydown", shoot); diff --git a/index.html b/index.html index 3e90b81..3de711d 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,16 @@ - + - - + + - Space Invaders - - - - -

0

-
- - + Space Invaders + + + +

Play Station

+

0

+
+ + diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json new file mode 100644 index 0000000..f50ae10 --- /dev/null +++ b/node_modules/.package-lock.json @@ -0,0 +1,12 @@ +{ + "name": "space-invaders", + "lockfileVersion": 3, + "requires": true, + "packages": { + "node_modules/space-invaders": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/space-invaders/-/space-invaders-0.0.1.tgz", + "integrity": "sha512-EAXdbpRqiAv5GCbxpQOJHyjQadYNgBoIKXyecYe5LYsdChW77y9/BXa2HInvG4WtcZb0hv3fsVwfT2U+cXfYSQ==" + } + } +} diff --git a/node_modules/space-invaders/package.json b/node_modules/space-invaders/package.json new file mode 100644 index 0000000..bc8e146 --- /dev/null +++ b/node_modules/space-invaders/package.json @@ -0,0 +1,11 @@ +{ + "name": "space-invaders", + "version": "0.0.1", + "description": "space-invaders", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Mihir Chaturvedi", + "license": "MIT" +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..e9ecb73 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,17 @@ +{ + "name": "space-invaders", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "space-invaders": "^0.0.1" + } + }, + "node_modules/space-invaders": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/space-invaders/-/space-invaders-0.0.1.tgz", + "integrity": "sha512-EAXdbpRqiAv5GCbxpQOJHyjQadYNgBoIKXyecYe5LYsdChW77y9/BXa2HInvG4WtcZb0hv3fsVwfT2U+cXfYSQ==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..0873c78 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "space-invaders": "^0.0.1" + } +} diff --git a/style.css b/style.css index 3ce9c71..0eed474 100644 --- a/style.css +++ b/style.css @@ -1,29 +1,37 @@ .grid { - width: 300px; - height: 300px; - border: solid black 1px; - display: flex; - flex-wrap: wrap; + width: 300px; + height: 300px; + border: solid black 1px; + display: flex; + flex-wrap: wrap; } .grid div { - width: 20px; - height: 20px; + width: 20px; + height: 20px; } .invader { - background-color: purple; - border-radius: 10px; + background-color: purple; + border-radius: 10px; } .shooter { - background-color: green; + background-color: green; } .laser { - background-color: orange; + background-color: orange; } .boom { - background-color: red; + background-color: red; +} +body { + background-color: chocolate; +} +.h1 { + text-align: center; + text-transform: uppercase; + background-color: chartreuse; }