const gameArea = document.getElementById('game-area');
const player = document.getElementById('player');
let playerX = window.innerWidth / 2;
let bullets = [];
let invaders = [];
let invaderDirection = 1;
let invaderSpeed = 1;

// Create player
player.style.left = `${playerX}px`;

// Create invaders
function createInvaders() {
    for (let row = 0; row < 3; row++) {
        for (let col = 0; col < 8; col++) {
            const invader = document.createElement('div');
            invader.classList.add('invader');
            invader.style.left = `${col * 60 + 50}px`;
            invader.style.top = `${row * 60 + 50}px`;
            gameArea.appendChild(invader);
            invaders.push(invader);
        }
    }
}

// Move player
document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowLeft' && playerX > 0) {
        playerX -= 10;
    } else if (e.key === 'ArrowRight' && playerX < window.innerWidth - 50) {
        playerX += 10;
    } else if (e.key === ' ') {
        shoot();
    }
    player.style.left = `${playerX}px`;
});

// Shoot bullet
function shoot() {
    const bullet = document.createElement('div');
    bullet.classList.add('bullet');
    bullet.style.left = `${playerX + 22.5}px`;
    bullet.style.bottom = '50px';
    gameArea.appendChild(bullet);
    bullets.push(bullet);
}

// Move bullets
function moveBullets() {
    bullets.forEach((bullet, index) => {
        const bottom = parseInt(bullet.style.bottom, 10);
        if (bottom > window.innerHeight) {
            bullet.remove();
            bullets.splice(index, 1);
        } else {
            bullet.style.bottom = `${bottom + 10}px`;
        }
    });
}

// Move invaders
function moveInvaders() {
    let edgeReached = false;
    invaders.forEach(invader => {
        const left = parseInt(invader.style.left, 10);
        if (left + invaderDirection * invaderSpeed < 0 || left + invaderDirection * invaderSpeed > window.innerWidth - 40) {
            edgeReached = true;
        }
    });

    if (edgeReached) {
        invaderDirection *= -1;
        invaders.forEach(invader => {
            const top = parseInt(invader.style.top, 10);
            invader.style.top = `${top + 20}px`;
        });
    } else {
        invaders.forEach(invader => {
            const left = parseInt(invader.style.left, 10);
            invader.style.left = `${left + invaderDirection * invaderSpeed}px`;
        });
    }
}

// Check for collisions
function checkCollisions() {
    bullets.forEach((bullet, bulletIndex) => {
        const bulletRect = bullet.getBoundingClientRect();
        invaders.forEach((invader, invaderIndex) => {
            const invaderRect = invader.getBoundingClientRect();
            if (bulletRect.bottom > invaderRect.top &&
                bulletRect.top < invaderRect.bottom &&
                bulletRect.right > invaderRect.left &&
                bulletRect.left < invaderRect.right) {
                bullet.remove();
                invader.remove();
                bullets.splice(bulletIndex, 1);
                invaders.splice(invaderIndex, 1);
            }
        });
    });
}

// Game loop
function gameLoop() {
    moveBullets();
    moveInvaders();
    checkCollisions();
    requestAnimationFrame(gameLoop);
}

// Initialize game
createInvaders();
gameLoop();