Código fixa um alvo quadrado. | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por THIAGO DE ALENCAR COIMBRA

| 82.6k xp | 9 posts

Prezados, da forma que foi sugerido, o alvo fica sendo um quadra de tamanho 10, limitado pelas coordenadas x ( entre 290 e 310) e y ( entre 190 e 210)

if ((x > 300 - raio) && (x < 300 + raio) && (y > 200 - raio) && (y < 200 + raio)) {

Então, mesmo que cliquemos num ponto fora do círculo central, o alerta é disparado. Teria uma solução pra fixar o alvo na circunferência central somente!? Abaixo segue o código completo do exercício.

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var raio = 10;

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    desenhaCirculo(300,200, raio + 20, 'red');
    desenhaCirculo(300,200, raio + 10, 'white');
    desenhaCirculo(300,200, raio, 'red');

    function dispara(evento) {

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


        if ((x > 300 - raio) 
            && (x < 300 + raio)
                && (y > 200 - raio) 
                    && (y < 200 + raio)) {

            alert('Acertou');
        }
    }

    tela.onclick = dispara;

</script>

2 respostas

solução!

por Ricardo Bugan Debs

| 320.1k xp | 526 posts

Instrutor

01/11/2019

Oi Thiago, tudo bom?

Verdade, da maneira que foi sugerido o código a "colisão" do alvo fica como um quadrado e nesse caso mesmo que vc tenha clicado um pouco fora da imagem ele ainda vai reconhecer o click no lugar "certo".

Da pra fazer melhor sim, pra isso precisamos de um pouco de geometria. A pergunta que estamos fazendo quando queremos saber se a pessoa clicou no algo pode ser traduzida como "O ponto X, Y do meu mouse está dentro da circunferência A do alvo?"

Como podemos saber isso? Bom em geometria sabemos que o circulo é representado por um ponto central e ele define um raio. O raio nos diz que todos os pontos na borda do circulo estão a mesma distância do centro dele. Então qualquer ponto que estiver a uma distância menor que o raio estará dentro do circulo e se a distância for maior então o ponto estará fora do circulo.

Sabemos que o centro do circulo está no ponto (300, 200) e precisamos saber se a distância do mouse (X, Y) é menor do que 30 em relação a esse ponto. [30 pq é o raio do maior circulo do alvo]

Como vamos saber a distância entre o centro do circulo e o ponto clicado? Pra isso podemos aplicar a formula de Pitagoras onde a hipotenusa representa nossa distância.

h² = cateto1²+cateto2²

h = √(cateto1²+cateto2² )

Em Javascript podemos achar a raiz quadrada de um número com a função math.sqrt e podemos usar a função math.pow para achar o exponencial de um número.

let cateno1 = 300-x
let cateno2 = 200-y
let quadradoCateno1 = math.pow(cateno1,2)
let quadradoCateno2 = math.pow(cateno2,2)
let somaDosQuadradosDosCatenos = quadradoCateno1 + quadradoCateno2 
let distancia = math.sqrt(somaDosQuadradosDosCatenos )

if(distancia < 30){
    alert("Acertou")
}

Vc pode achar estanho eu calcular o cateno como sendo (300-x) ou (200-Y) mas acontece que pitagoras usa os lados do triângulo para saber a hipotenusa, então preciso calcular o lado de um triangulo que começa em 300 até x na base e tem 200- y de altura

Deu pra entender como faz? Como a conta é mais complicada e tem mais funções envolvidas o professor preferiu fazer do jeito mais simples, mesmo com o "erro" que vc comentou

por THIAGO DE ALENCAR COIMBRA

| 82.6k xp | 9 posts

01/11/2019

Perfeito!!!

Era isso mesmo. Eu entendo que, pelo nível que estamos estudando, a solução apresentada pelo professor foi a melhor. De qualquer forma, agradeço por responder =)