Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

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

Meu alvo ficou preto. Alguém pode me ajudar?

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

<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.fillRect = cor;
    c.beginPath();
    c.arc(x,y,raio,0,2*Math.PI);
    c.fill();
}

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

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

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

setInterval(desenha,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("Você acertou. Parabéns");
    }
}

</script>
2 respostas

David, na função abaixo você errou a linha que define a cor da linha:

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

O correto seria:

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

Resolvido. Obrigado Fabrício.