const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.style.display = "block";
canvas.width = window.innerWidth - 100;
canvas.height = window.innerHeight - 200;

let audio = new Audio('./zap.wav');
audio.preload = 'auto';

let audioLoaded = false;

audio.addEventListener('canplaythrough', function() {
    audioLoaded = true;
});

audio.addEventListener('error', function() {
    console.error('Error loading audio file');
});

const createTargets = () => {
    let targets = [];

    for(let i = 0; i < 10; i++) {
        let radius = Math.random() * 50 + 20;
        let x = Math.random() * (canvas.width - 2 * radius - 120) + radius + 60;
        let y = Math.random() * (canvas.height - 2 * radius - 120) + radius + 60;
        let vx = (Math.random() - 0.5) * 10;
        let vy = (Math.random() - 0.5) * 10;

        targets.push({x, y, vx, vy, radius});
    }

    return targets;
}

let score = 0;
const drawScore = () => {
    ctx.font = '20px Arial';
    ctx.fillStyle = 'white';
    ctx.fillText('Score: ' + score, 10, 30);
};


let showHelp = true;
const drawHelp = () => {
    if(showHelp) {
        ctx.font = '20px Arial';
        ctx.fillStyle = 'white';
        ctx.fillText('Click to shoot. Press R to respawn targets. Press H to toggle help text.', 10, 50);
    }
}

const drawLine = (line) => {
    if (line && Date.now() - line.time < 500) {
        ctx.beginPath();
        ctx.moveTo(line.startX, line.startY);
        ctx.lineTo(line.endX, line.endY);
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 4;
        ctx.stroke();
    }
};

const drawTargets = (targets) => {
    for (let target of targets) {
        target.x += target.vx;
        target.y += target.vy;

        if (target.x - target.radius < 0 || target.x + target.radius > canvas.width) {
            target.vx = -target.vx;
        }
        if (target.y - target.radius < 0 || target.y + target.radius > canvas.height) {
            target.vy = -target.vy;
        }

        ctx.beginPath();
        ctx.arc(target.x, target.y, target.radius, 0, Math.PI * 2);
        ctx.fillStyle = '#aaa';
        ctx.fill();
    }
};

const gameLoop = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    drawScore();
    drawHelp();
    drawLine(line);
    drawTargets(targets);

    requestAnimationFrame(gameLoop);
};

let line = null;

canvas.addEventListener('click', (e) => {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    if (audioLoaded) {
        audio.play().catch((error) => {
            console.error('Error playing audio:', error);
        });
    }

    line = {
        startX: 0,
        startY: canvas.height,
        endX: x,
        endY: y,
        time: Date.now()
    };

    targets = targets.filter((target) => {
        const dx = target.x - x;
        const dy = target.y - y;
        if (dx * dx + dy * dy <= target.radius * target.radius) {
            score++;
            return false;
        }
        return true;
    });
});

window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

window.addEventListener('keydown', (e) => {
    if (e.key === 'r' || e.key === 'R') {
        targets = createTargets();
    }
});

window.addEventListener('keydown', (e) => {
    if (e.key === 'h' || e.key === 'H') {
        showHelp = !showHelp;
    } else if (e.key === 'r' || e.key === 'R') {
        targets = createTargets();
    }
});

let targets = createTargets();

gameLoop();