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

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

Olá galera, em vez de criar o alvo como orienta o exercício eu optei por usar a imagem do alvo. Consegui colocar a imagem para ficar aparecendo em locais aleatórios do espaço do canvas e no console do navegador imprime a posição de cada imagem random. Também consegui capturar o click do mouse e imprimir no console do navegador a posição do click do mouse, creio eu que agora só falta comparar as duas posições e quando forem igual apresentar a mensagem ao usuário que ele acertou, mas não estou conseguindo realizar essa comparação. Alguém poderia me dar uma dica de como fazer isso? Segue o código atual:

<meta charset="UTF-8">

<h1><i>Acerte o Alvo</i></h1>
<canvas id="tela" width="500" height="400"></canvas>
<h4><i>By Tharles Amaro</i></h4>

<script>

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

//Pintando a tela de fundo
pincel.fillStyle = "black";
pincel.fillRect(0,0,500,400);


//imagem do alvo
var imagem = new Image();
imagem.src = "http://i63.tinypic.com/2u60nxy.png";

//função para limpar a tela
var limpaTela = function() {
    pincel.clearRect(0,0,500,400);
};

//função para desenhar imagem do alvo na tela
var desenhaAlvo = function(x,y) {
    pincel.drawImage(imagem,x,y);
};

//função para desenhar em locais aleatórios

var pontoX;
var pontoY;

var desenha = function(pontoX,pontoY) {
    limpaTela();
    pontoX = Math.round(Math.random() * 500);
    pontoY = Math.round(Math.random() * 400);
    desenhaAlvo(pontoX,pontoY);

    console.log("Posição do Alvo: " + pontoX + ", " + pontoY); //posição onde a imagem do alvo está
};

setInterval(desenha, 900);

//função para clique com botão esquerdo
var x;
var y;

var clickEsquerdo = function(evento) {

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

    console.log("Posição do clique: " + x + ", " + y); //mostra a posição do click no console do navegador
};

//Capturando os eventos do click do mouse (esquerdo)
tela.onclick = clickEsquerdo;

//comparar valores da localização da imagem e do click
//fail!!!!!!!!!!!!!!!!!!! :(
</script>
2 respostas
solução!

Oi Tharles, tudo bem? Você está bem perto de concluir, o que você precisa fazer é: Comparar o x do clique com o x da posição atual da imagem, o mesmo fazer com os y's. Agora, leve em consideração o seguinte, o x,y da imagem, são os pontos iniciais do desenho da mesma, e o x,y do clique, é o ponto exato do clique.

Quando você for comparar, terá que considerar o tamanho da imagem para saber se o clique foi dentro dela. Neste caso, você pode acabar fazendo algo parecido com isso:

comparaSeAcertou(xDoClique, yDoClique, xDaImagem, YdaImagem ){
    if(xDoClique >= xDaImagem && yDoClique >= yDaImangem){
           //isso prova que ele pode ter clicaco dentro da imagem ou depois dela
        if(xDoClique <= XlimiteDaImagem && yDoClique <= YlimiteDaImagem){
                //beleza, dentro da imagem
        }
     }
}

Onde YLimiteDaImagem, e XLimiteDaImagem são. xDaImagem e YDaImagem somados com o width e o height da mesma respectivamente.

Conseguiu entender? Espero ter ajudado. Bons estudos

Obrigado Wanderson pela ajuda, consegui resolver o problema usando essa lógica!