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 @@ - + -
- + + -