script.js

const grid = document.querySelector('.grid');
const resultDisplay = document.querySelector('.results');
const width = 15;
const aliensRemoved = [];
let currentShooterIndex = 202;
let invadersId;
let isGoingrRight = true;
let direction = 1;
let results = 0;

for (let i = 0; i < width*width; i++) {
    const square = document.createElement('div');
    grid.appendChild(square);
}

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');
        }
    }
}

draw();

squares[currentShooterIndex].classList.add('shooter');

function remove(){
    for (let i = 0; i < alienInvaders.length; i++) {
        squares[alienInvaders[i]].classList.remove('invader');
    }
}

function moveShooter(e){
    squares[currentShooterIndex].classList.remove('shooter');
    switch(e.key){
        case 'ArrowLeft':
            if(currentShooterIndex % width !== 0) currentShooterIndex--
            break
        case 'ArrowRight':
            if(currentShooterIndex % width < width - 1) currentShooterIndex++
            break
    }
    squares[currentShooterIndex].classList.add('shooter');
}

document.addEventListener('keydown', moveShooter);

function moveInvaders() {
    const leftEdge = alienInvaders[0] % width === 0;
    const rightEdge = alienInvaders[alienInvaders.length - 1] % width === width - 1;

    remove()

    if(rightEdge && isGoingrRight){
        for (let i = 0; i < alienInvaders.length; i++) {
            alienInvaders[i] += width + 1;
            direction =  -1
            isGoingrRight = false;
        } 
    }

    if(leftEdge && !isGoingrRight){
        for (let i = 0; i < alienInvaders.length; i++) {
            alienInvaders[i] += width - 1;
            direction = 1
            isGoingrRight = true;
        }
    }
    for (let i = 0; i < alienInvaders.length; i++) {
        alienInvaders[i] += direction
    }

    draw()

    if(squares[currentShooterIndex].classList.contains('invader')){
        resultDisplay.innerHTML = 'Game Over';
        document.querySelector('.grid').style.backgroundColor = 'rgba(255, 0, 0, 0.342)'
        document.querySelector('body').style.color = 'red'
        squares[currentShooterIndex].classList.add('boom')
        clearInterval(invadersId)
    }

    if(aliensRemoved.length === alienInvaders.length){
        resultDisplay.innerHTML = 'You Win';
        document.querySelector('.grid').style.backgroundColor = 'rgba(0, 255, 0, 0.342)'
        document.querySelector('body').style.color = 'green'
        clearInterval(invadersId)
    }
}

invadersId = setInterval(moveInvaders, 600);

function shoot(e){
    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('invader')
            squares[currentLaserIndex].classList.remove('laser')
            squares[currentLaserIndex].classList.add('boom')

            setTimeout(() => squares[currentLaserIndex].classList.remove('boom'), 300)

            clearInterval(laserId)

            const alienRemoved = alienInvaders.indexOf(currentLaserIndex)
            aliensRemoved.push(alienRemoved)

            results++
            resultDisplay.innerHTML = results;
            console.log(aliensRemoved)
        }
    }

    if(e.key === 'ArrowUp'){
        laserId = setInterval(moveLaser, 100);
    }
}

document.addEventListener('keydown',shoot);

document.querySelector('button').onclick = function(){window.location.reload()};