Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

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

Referente ao curso Lógica de Programação II: Funções, Desenhos e um Jogo, no capítulo Desafio Final e atividade Tiro ao alvo

por LariV
| 31.3k xp | 28 posts

Não aparece a mensagem de alert: Você acertou quando eu clico no alvo. Aparece nos de vocês!

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

<script>

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

var raio = 10;
var alvoX;
var alvoY;

var desenhaAlvo = function(x, y){
    c.fillStyle = "red";
    c.beginPath();
    c.arc(x,y,raio+30,0,2*3.14);
    c.fill();

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

    c.fillStyle = "red";
    c.beginPath();
    c.arc(x,y,raio+10,0,2*3.14);
    c.fill();
}

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

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


var desenha = function(){
    limpaTela();
    var alvoX = sorteia(600);
    var 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("Você acertou!");
    }
}


</script>
2 respostas
solução!
por Wagner D'Albuquerque Viana
| 149.7k xp | 16 posts
Analista de Suporte

Cuidado você quis "abreviar" o código, você pode ficar um pouco perdido.

Eu preferi separar o código do alvo e do círculo.

var cor = function(cor){
        context.fillStyle = cor;
    }

    var desenhaAlvo = function(x, y) {
        cor("white");
        circulo(x, y, raio);
        cor("red");
        circulo(x, y, raio-10);
        cor("white");
        circulo(x, y, raio-20);
        cor("red");
        circulo(x, y, raio-30);
    };

Assim só chamar a função cor no círculo e deixe a variável raio do tamanho do alvo, em 10 só vai aparecer a mensagem se você acertar bem no meio, e não vai considerar o alvo como um todo.

var raio = 40;

Verifique se a função tela.onclick, se está tudo certo imprimindo no console.

por Alexandre Roggen
| 283.6k xp | 12 posts
Owner

Boa Tarde Larissa, note que no circulo central do seu alvo você usou o raio "raio + 10", portanto o seu if no tela.onclick teria que ser assim.


tela.onclick = function(evento) {
var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    var raioUsadoNoCirculoCentral = raio+10;
    if((x > alvoX - raioUsadoNoCirculoCentral) && (x < alvoX + raioUsadoNoCirculoCentral) &&  (y > alvoY - raioUsadoNoCirculoCentral) && (y < alvoY + raioUsadoNoCirculoCentral)){
            alert("acertou!");
    }
}