diff --git a/app.js b/app.js index 7476fa9..d28c864 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 -] +]; function draw() { for (let i = 0; i < alienInvaders.length; i++) { if(!aliensRemoved.includes(i)) { - squares[alienInvaders[i]].classList.add('invader') + 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') + squares[currentShooterIndex].classList.remove('shooter'); switch(e.key) { case 'ArrowLeft': - if (currentShooterIndex % width !== 0) currentShooterIndex -=1 - break + if (currentShooterIndex % width !== 0) currentShooterIndex -=1; + break; case 'ArrowRight' : if (currentShooterIndex % width < width -1) currentShooterIndex +=1 - break + 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) { 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) + 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) + 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') + 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('laser'); squares[currentLaserIndex].classList.remove('invader') - squares[currentLaserIndex].classList.add('boom') + squares[currentLaserIndex].classList.add('boom'); - setTimeout(()=> squares[currentLaserIndex].classList.remove('boom'), 300) - clearInterval(laserId) + setTimeout(()=> squares[currentLaserIndex].classList.remove('boom'), 300); + clearInterval(laserId); - const alienRemoved = alienInvaders.indexOf(currentLaserIndex) - aliensRemoved.push(alienRemoved) - results++ - resultsDisplay.innerHTML = results - console.log(aliensRemoved) + const alienRemoved = alienInvaders.indexOf(currentLaserIndex); + aliensRemoved.push(alienRemoved); + results++; + resultsDisplay.innerHTML = results; + console.log(aliensRemoved); } } switch(e.key) { case 'ArrowUp': - laserId = setInterval(moveLaser, 100) + laserId = setInterval(moveLaser, 100); } } -document.addEventListener('keydown', shoot) +document.addEventListener('keydown', shoot);