DESAFIO FINAL

Oi Guilherme, tudo bom?

Você pode anexar aqui seu código para que nós possamos te auxiliar melhor?

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

<script>
var raio = 10;
var alvoX;
var alvoY;

var tela = document.getElementById("tela");
var c = tela.getContext("2d");

var desenhaAlvo = function(x, y) {

    circulo(x, y, raio+30, "white");
    circulo(x, y, raio+20, "red");
    circulo(x, y, raio+10, "white");
    circulo(x, y, raio, "red");
};

var circulo = function(x,y,raio, cor) {
    c.fillStyle = cor;
    c.beginPath();
    c.arc(x,y,raio, 0, 2*Math.PI);
    c.fill();
}

var limpa = function() {
    c.clearRect(0,0,600,400);
}

var sorteia = function(max) {
    return Math.floor(Math.random() * max);
}

var desenha = function() {
  limpa();
  alvoX = sorteia(600);
  alvoY = sorteia(400);
  desenhaAlvo(alvoX, alvoY);
};

setInterval(desenha, 3000);

tela.onclick = function(evento) {
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    if((x > alvoX - raio) && (x < alvoX + raio) && 
        (y > alvoY - raio) && (y < alvoY + raio)) {
            alert("acertou!");
    }
}
</script>

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

<script>
var raio = 10;
var alvoX;
var alvoY;

var tela = document.getElementById("tela");
var c = tela.getContext("2d");

var desenhaAlvo = function(x, y) {

    circulo(x, y, raio+30, "white");
    circulo(x, y, raio+20, "red");
    circulo(x, y, raio+10, "white");
    circulo(x, y, raio, "red");
};

var circulo = function(x,y,raio, cor) {
    c.fillStyle = cor;
    c.beginPath();
    c.arc(x,y,raio, 0, 2*Math.PI);
    c.fill();
}

var limpa = function() {
    c.clearRect(0,0,600,400);
}

var sorteia = function(max) {
    return Math.floor(Math.random() * max);
}

var desenha = function() {
  limpa();
  alvoX = sorteia(600);
  alvoY = sorteia(400);
  desenhaAlvo(alvoX, alvoY);
};

setInterval(desenha, 3000);

tela.onclick = function(evento) {
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    if((x > alvoX - raio) && (x < alvoX + raio) && 
        (y > alvoY - raio) && (y < alvoY + raio)) {
            alert("acertou!");
    }
}
</script>

Rodei seu código aqui na minha máquina no google chrome e funcionou perfeitamente, seu código está perfeito. Parabéns =)

Qual navegador você está utilizando? verifique se você não está utilizando algum plugin que reprima popups e se o javascript está habilitado no seu navegador.

Qualquer dificuldade, compartilhe aqui =)

espero ter ajudado.

Peço desculpas, acabei colando o código errado (código feito pela Alura).

Segue o meu código que não está funcionando a funcionalidade:

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

<meta charset="utf-8">

<script>

var raio = 10;

var tela = document.getElementById("tela");

var c = tela.getContext("2d");

var alvo = function(x, y) {

    var raio = 40;
    c.fillStyle = "white";
    c.beginPath();
    c.arc(x, y, raio, 0, 2 * Math.PI);
    c.fill();

    c.fillStyle = "red";
    c.beginPath();
    c.arc(x, y, raio - 10, 0, 2 * Math.PI);
    c.fill();

    c.fillStyle = "white";
    c.beginPath();
    c.arc(x, y, raio - 20, 0, 2 * Math.PI);
    c.fill();

    c.fillStyle = "red";
    c.beginPath();
    c.arc(x, y, raio - 30, 0, 2 * Math.PI);
    c.fill();

}

var limpaTela = function(){
    c.clearRect(0,0,600,400)
}

var aparecer = function(){

    var alvoX = Math.round(Math.random() * 600);
    var alvoY = Math.round(Math.random() * 400);

    limpaTela();
    alvo(alvoX,alvoY);

    console.log(alvoX, alvoY);

    return alvoX 
    return alvoY

}

setInterval(aparecer, 1000);

tela.onclick = function(evento, alvoX, alvoY) {

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

    if((x > alvoX - raio) && (x < alvoX + raio) && 
        (y > alvoY - raio) && (y < alvoY + raio)) {
            alert("Acertou!");
    }

    console.log("posição do clique : " + x + ", " + y);
}


</script>

enviei essa resposta sem querer, a resposta completa está a seguir =)

Opa, primeiramente, não precisamos dos parametros alvoX e alvoY na function do tela.onclick:

tela.onclick = function(evento) {

Tanto porque, não estamos fornecendo esses dados para a função.

Além disso, de uma olhada na declaração do seus atributos alvoX e alvoY. Neste código, estamos declarando eles dentro da função aparecer, portanto eles só existem dentro dessa função. Tente declará-los fora da função aparecer para que você possa acessá-los no seu onclick =). Vale a pena também verificar que está função (aparecer) está com dois return.

Por fim, verifique a sua lógica para gerar o alvo alvoX e alvoY:

alvoX = Math.round(Math.random() * 600);
alvoY = Math.round(Math.random() * 400);
 //lembre-se de declarar as variaveis em outro lugar

Pois o valor gerado não está compativel com a posição do click. Verifique que no seu console a posição do click diverge muito da posição do alvo.

Espero ter ajudado =)

Consegui resolver da seguinte maneira

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

<meta charset="utf-8">

<script>

var alvoX;
var alvoY;
var raio = 10;

var tela = document.getElementById("tela");

var c = tela.getContext("2d");

var alvo = function(x, y) {

    var raio = 40;
    c.fillStyle = "white";
    c.beginPath();
    c.arc(x, y, raio, 0, 2 * Math.PI);
    c.fill();

    c.fillStyle = "red";
    c.beginPath();
    c.arc(x, y, raio - 10, 0, 2 * Math.PI);
    c.fill();

    c.fillStyle = "white";
    c.beginPath();
    c.arc(x, y, raio - 20, 0, 2 * Math.PI);
    c.fill();

    c.fillStyle = "red";
    c.beginPath();
    c.arc(x, y, raio - 30, 0, 2 * Math.PI);
    c.fill();

}

var limpaTela = function(){
    c.clearRect(0,0,600,400)
}


var sorteia = function(max){

    return Math.round(Math.random() * max);
}

var aparecer = function(){

    limpaTela();
    alvoX = sorteia(600);
    alvoY = sorteia(400);
    alvo(alvoX,alvoY);

    console.log(alvoX, alvoY);
}

setInterval(aparecer, 1000);

tela.onclick = function(evento) {

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

    if((x > alvoX - raio) && (x < alvoX + raio) && 
        (y > alvoY - raio) && (y < alvoY + raio)) {
            alert("Acertou!");
    }

    console.log("posição do clique : " + x + ", " + y);
}


</script>

Muito obrigado!