Entrar Ainda não tem acesso?
4
respostas

UMA SOLUÇÃO DIFERENTE PARA O CÓDIGO

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Acertando o alvo

por Izabele Soares
| 31.3k xp | 49 posts
ASSISTENTE ADMINISTRATIVO 
<canvas width="600" height="400"></canvas>

<script>

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

    pincel.fillStyle = "darkgreen";
    pincel.fillRect(0, 0, 600, 400);

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

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


    function desenhaAlvo(x, y){

        var cores = ["red","white"];
        var posicao = 0;
        var cor = cores[posicao];

        var raio = 100;

        var alvos = 0
        while(alvos <= 10 && raio != 0){

            desenhaCirculo(x, y, raio = raio - 10, cores[posicao]);
            posicao++
            if(posicao >= cores.length){
                posicao = 0
            }
        alvos++
        }
    }

    desenhaAlvo(300,200);

    atira = function(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        console.log(x + "," + y)
        if (x > 290 && x < 310 && y > 190 && y < 210 ) {
                alert("Bem na mosca!")
        }
    }

    tela.onclick = atira;

</script>
4 respostas
por JP
| 274k xp | 270 posts
Instrutor

Oi Izabele!

Muito bom! Parabéns pelo empenho nos estudos!

Continue praticando e qualquer dúvida pode contar com a gente.

por Fabio Nilo dos Santos Soares
| 133.8k xp | 8 posts
1 TENENTE

Aproveitando topico pra não criar outro, tenho uma dúvida sobre o uso do if conforme a fórmula abaixo. Gostaria de saber qual foi o erro na construção, já vi as respostas corretas contudo gostaria de saber o motivo da sintaxe ser errada.

if(290 < x > 310 && 190 < y > 210)

por Hellan Rodrigues Da Silva
| 30.9k xp | 11 posts
Técnico de Suporte N4

Fabio, vai no sentido que a Izabele usou no dela. Você compara uma coisa com outra, e precisa ter o operador lógico no meio de cada comparação:

O seu: 

if (290 < x > 310 && 190 < y > 210)

O da Izabele: 

if (x > 290 && x < 310 && y > 190 && y < 210 )
por Jeandrew Correia Gomes
| 102.5k xp | 25 posts

Nossa muito bom a automatização do alvo com array, eu fiz só que de outra forma o que acha?

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

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

    var xAlvo = 300;
    var yAlvo = 200;
    var raioI = 49;


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

    function densehaAlvo(){
        var i = 7;

        while(i < raioI){
            pincel.fillStyle = 'red';
            pincel.beginPath();
            pincel.arc(xAlvo, yAlvo, raioI, 0, 2*Math.PI);
            pincel.fill();
            raioI -= i;
            pincel.fillStyle = 'white';
            pincel.beginPath();
            pincel.arc(xAlvo, yAlvo, raioI, 0, 2*Math.PI);
            pincel.fill();
            raioI -= i;
        }
    }
    densehaAlvo();

    tela.onclick = function(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        if(x <= xAlvo+raioI && x >= xAlvo-raioI && y <= yAlvo+raioI && y >= yAlvo-raioI){
            console.log('Acertou');
        }else{
            console.log(x + ',' + y);
        }
    }

</script>

Quem puder me ajudar a melhorar meu código fique a vontade