Falha ao implementar o prompt

Fala, Gabriel! Tudo bem contigo?

Desculpe a demora em dar um retorno!

Primeiramente, parabéns pela ideia! Colocar opções de escolha para o usuário torna muito mais interativa! Bacana mesmo!

Vamos ao problema!

Todas as vezes em que utilizamos o prompt ele sempre vai retornar uma String. Até mesmo quando colocamos um número.

Faça o seguinte teste:

Crie duas variáveis: uma já pré determinada e outra através de um prompt

var numeroA = 1;
var numeroB = prompt("digite o numero um")

Agora vamos compará-los

if(numeroA == numeroB) {
    document.write("São iguais")
} else {
    document.write("São diferentes")
}

Perceba que vai dizer que são iguais! Perfeito!!!

Agora, vamos colocar mais um sinal de comparação

if(numeroA === numeroB) {
    document.write("São iguais")
} else {
    document.write("São diferentes")
}

Agora você pode perguntar "Ué?!" rs

O que acontece é que da primeira forma ele só compara o conteúdo. Já na segunda ele compara não só o conteúdo mas o tipo de qual ele pertence, por exemplo:

• A variável numeroA é um inteiro
• Já a variável numeroB é uma String, pois veio de um prompt

Esse é o motivo de usarmos o parseInt ou parseFloat antes do prompt para que ele transforme nosso número em decimal ou inteiro "de fato".

Segue a documentação da MDN Web Docs para te dar mais profundidade sobre isso.

E tudo isso para falar sobre o que está ocorrendo no código rsrs

Se ele retorna uma String não teria motivo de alguém inserir a cor dentro de aspas ;-) Basta inserir sem aspas mesmo que o prompt se encarrega de torná-la uma String

Espero ter contribuído, Gabriel!

Um abraço e bons estudos!!!

Obrigado pela explicação, sanou minhas dúvidas e o código tá funcionando tudo certinho.

Aqui como ele ficou com algumas outras pequenas mudanças:

<meta charset="utf-8">

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    var corC = prompt("Escolha a cor central do alvo, em inglês");
    var raio = parseFloat(prompt("Escolha o tamanho do raio do alvo"));
    var xAleatorio;
    var yAleatorio;

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI)
        pincel.fill();
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

    function desenhaAlvo(x, y) {

        desenhaCirculo(x, y, raio*3, corC);
        desenhaCirculo(x, y, raio*2, 'white');
        desenhaCirculo(x, y, raio, corC)
    }

    function sorteiaAleatorio(maximo) {

        return Math.floor(Math.random() * maximo);
    }

    function atualizaTela() {

        limpaTela();
        xAleatorio = sorteiaAleatorio(600);
        yAleatorio = sorteiaAleatorio(400);
        desenhaAlvo(xAleatorio, yAleatorio);
    }

setInterval(atualizaTela, 1000);


function dispara(evento) {

    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    if((x > xAleatorio - raio)
    && (x < xAleatorio + raio)
    && (y > yAleatorio - raio)
    && (y < yAleatorio + raio)) {

        alert('Acertou!');
    }
}

tela.onclick = dispara;

</script>