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 Daniel De Morais Alves
| 37.9k xp | 2 posts

Não estou conseguindo implementar de maneira funcional o evento de clique, não sei bem onde estou errando, me ajudem. Aqui está o código:

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

<script>

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

var circulo = function(x, y) {

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

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

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

}

var limpaTela = function() {

    c.clearRect(0, 0, 600, 400);

}

var sorteia = function(tamanho) {

    return Math.round(Math.random() * tamanho);

}

var posicaoX;
var posicaoY;

var desenha = function() {

    limpaTela();
    posicaoX = sorteia(600);
    posicaoY = sorteia(400);
    circulo(posicaoX, posicaoY);
    console.log(posicaoX, posicaoY);

}

setInterval(desenha, 1000);

tela.onclick = function(e) {

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

    if(x == posicaoX && y == posicaoY) {

        alert("PARABÉNS!");


    }
    console.log(posicaoX, posicaoY);

}

</script>
2 respostas
solução!
por Celso Theodoro Junior
| 303k xp | 383 posts
Moderador

Daniel ,

para funcionar seu código é necessário que você modifique seu if .

no seu caso não está errado , porém para funcionar você tem que clicar exatamente no ponto X e exatamente no ponto Y . é muito dificil fazer isso .

modifique para o if abaixo :

if((x > alvoX - raio) && (x < alvoX + raio)
            && (y > alvoY - raio) && (y < alvoY + raio))

neste caso ao clicar no alvo exibira a mensagem .

espero ter ajudado , bons estudos

por Daniel De Morais Alves
| 37.9k xp | 2 posts

Entendi, com esse if eu tive que criar uma var raio, que possibilitou uma maior margem de acerto com clique. Muito obrigado, ajudou muito. Aqui o código com as mudanças:

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

<script>

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

var raio = 15;

var circulo = function(x, y) {

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

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

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

}

var limpaTela = function() {

    c.clearRect(0, 0, 600, 400);

}

var sorteia = function(tamanho) {

    return Math.round(Math.random() * tamanho);

}

var posicaoX;
var posicaoY;

var desenha = function() {

    limpaTela();
    posicaoX = sorteia(600);
    posicaoY = sorteia(400);
    circulo(posicaoX, posicaoY);
    console.log(posicaoX, posicaoY);

}

setInterval(desenha, 1000);

tela.onclick = function(e) {

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

    if((x > posicaoX - raio) && (x < posicaoX + raio)
            && (y > posicaoY - raio) && (y < posicaoY + raio)) {

        alert("PARABÉNS!");


    }
    console.log(x, y);

}

</script>

Até mais, obrigado.