Dúvida no Ex. 1 da Aula 5 - Desafio Final

Olá Flavio! Seria mais interessante se você fizesse um alvo mesmo. A proposta do desafio final é você por em prática tudo por você aprendido. Então explore ao máximo seus conhecimentos adquiridos e se possivel até aprimore o desafio como você puder.

Espero ter ajudado. Bons Estudos!

Deixarei meu código , se puder apontar o erro fico agradecido.

'''

Acho que agora o código vai.

''

''

Não entendi como colocar o código aqui. Alguém poderia dar um exemplo.

Boa Tarde Flavio

para colocar o código no padrão é utilizar três acentos graves ( ```)

Exemplo:

System.out.println("Hello Word");

espero tenha ajudado, bons Estudos .

Agora consegui.

<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,"white");
    circulo(x, y, raio+5,"red");
    circulo(x, y, raio+15,"white");
    circulo(x, y, raio+25,"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);
}


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


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



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("Parabens você acertou!");
     }
}


SetInterval(desenha,3000);



</script>

Olá Flávio,

fiz umas alterações no seu código pois essa versão que você colou estava com alguns probleminhas de sintaxe.

Segue o código:

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

<script>

// deixe o raio do maior círculo aqui
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,"white"); 
    circulo(x, y, raio+5,"red"); 
    circulo(x, y, raio+15,"white"); 
    circulo(x, y, raio+25,"red");

};

var circulo = function(x, y , raio,cor) { 

    //c.fillStyle = "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); 

};

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("Parabens você acertou!"); 

    } 

}

setInterval(desenha,3000);

</script>

A principio tem dois probleminhas na lógica, um no método circulo, onde o valor de fillStyle esta recebendo uma string "cor" ao invés da referência ao parâmetro de entrada cor, porém imagino eu que tenha sido algum problema quando você colou o código aqui no editor, assim como algumas referências a variáveis que estão com letras maiúsculas no nome ao invés de minuscula.

Porém o comportamento do grande círculo vermelho se deve a ordem na qual você está criando as faixas do alvo.

Da maneira que está o método desenhaAlvo um círculo pequeno está sendo desenhado e depois círculos maiores por cima dele, tente ao contrário, desenho o maior e vá diminuindo o raio nos próximos.

Att.

Obrigado darei uma olhada.

Muito obrigado.