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

Desafio final - jogo do Alvo

Pessoal, consegui fazer com que o alvo apareça em lugares aleatórios no canvas, mas não consegui fazer com que o clique identifique a área total do meu alvo, somente o ponto central.

Outra dúvida, tenho como jogar um canvas dentro do outro? Assim eu usaria DOM para pegar os parâmetros desse novo canvas, uma vez que eu iria desenhá-lo dentro desse canvas, ficando assim:

canvasDentroDoCanvasComDesenhodoAlvo.onclick = atira;

Minha meta é transformar num pequeno jogo de 10 fases, onde cada acerto, vai diminuindo em 1 segundo o tempo de aparição do alvo na tela; clicou, acertou e vai pra próxima fase; errou, acaba o jogo.

Meu código atual segue abaixo:

<meta charset="UTF-8">

<style>
    body {background: #f1f1f1; margin: 0;}
    canvas {background: #fff;}
</style>

<canvas id="tela" width="600" height="400"></canvas>
<script>
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");
    var corBranca = "white";
    var corVermelha = "red";
    var raio = 50;
    var eixoX;
    var eixoY;

    function circulo(eixoX,eixoY,raio,cor) {
        c.fillStyle = cor;
        c.beginPath();
        c.arc(eixoX, eixoY, raio, 0, 2*Math.PI);
        c.fill();
    };

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

    function alvo() {
        limpaTela();
        eixoX = Math.round(Math.random()*599) + 1;
        eixoY = Math.round(Math.random()*399) + 1;
        circulo(eixoX,eixoY,raio,corVermelha);
        circulo(eixoX,eixoY,raio-10,corBranca);
        circulo(eixoX,eixoY,raio-20,corVermelha);
        circulo(eixoX,eixoY,raio-30,corBranca);
        circulo(eixoX,eixoY,raio-40,corVermelha);
    };

    function atira(evento) {
        var posicaoX = evento.pageX;
        var posicaoY = evento.pageY;
        c.fillStyle = "blue";
        c.beginPath();
        c.arc(posicaoX, posicaoY, 4, 0, 2 * Math.PI);
        c.fill();
        if(posicaoX == eixoX && posicaoY == eixoY){
            alert("Você acertou o alvo.");
        } else {
            alert("Você errou o alvo.");
        }
    };

    setInterval(alvo, 2000);    
    tela.onclick = atira;

</script>
2 respostas
solução!

Oi, Gmila84

O segredo pra fazer o tiro pegar fora da parte central do alvo está nesse if do seu código:

if(posicaoX == eixoX && posicaoY == eixoY){

Repare que você está verificando se o tiro foi dado exatamente no centro do alvo. Você quer que o tiro possa ser dado em outras partes do alvo, ou seja, você quer que o tiro possa ser dado a uma distância do centro do alvo.

O primeiro passo, então, é calcular a distância da posição do tiro ao centro do alvo. Usando a fórmula de distância euclidiana podemos fazer:

var distanciaX = posicaoX - eixoX;
var distanciaY = posicaoY - eixoY;
var distancia = Math.sqrt(distanciaX * distanciaX + distanciaY * distanciaY);

Tendo calculado essa distância, seu if agora pode ser:

if(distancia <= raio){
    alert("Você acertou o alvo.");
} else {
    alert("Você errou o alvo.");
}

Deu para entender?

Luiz, valeu pela ajuda e funcionou de primeira!

Minha próxima etapa é transformar no jogo com 10 rodadas.

Abraço!