Entrar Ainda não tem acesso?
1
resposta

Alvo aparece apenas uma vez

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Nosso primeiro jogo e atividade Implemente seu primeiro jogo

por Jeandrew Correia Gomes
| 102.5k xp | 25 posts

Não sei o que está de errado ele exibe apenas uma vez o alvo

<canvas width="800" height="600"></canvas>
<style type="text/css">
    canvas{
        border:2px solid #4455BB;
        border-radius: 10px;
    }
</style>
<script>

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

    var xAlvo;
    var yAlvo;
    var raioI = 49;


    function limpaTela(){
        pincel.clearRect(0, 0, 800, 600);
    }
    function desenhaCirculo(x, y, raio, cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raioI, 0, 2*Math.PI);
        pincel.fill();
    }

    function densehaAlvo(x, y){
        var i = 7;

        while(i < raioI) {
            desenhaCirculo(x, y, raioI, 'red');
            raioI -= i;
            desenhaCirculo(x, y, raioI, 'white');
            raioI -= i;
        }

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

        //console.log(raioI)
    }
    //densehaAlvo(xAlvo, yAlvo);

    function sorteiaPosiçao(maximo) {
        return Math.floor(Math.random()*maximo);
    }

    function movimenta() {
        limpaTela();
        xAlvo = sorteiaPosiçao(600);
        yAlvo = sorteiaPosiçao(400);
        console.log(xAlvo + ',' + yAlvo)
        densehaAlvo(xAlvo, yAlvo);
    }

    setInterval(movimenta, 3000)

    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>
1 resposta
por Monalisa Meyrelle de Sousa Silva
| 1996.4k xp | 4458 posts
Alura Scuba Team Monitoria Fórum Ops

Olá, Jeandrew, tudo bem?

Obrigada pelo aguardo de um feedback.

Analisei o seu código e notei alguns problemas que estão ocasionando esse comportamento. Separei em tópicos para assim ficar mais fácil de compreender. São elas:

  • Na função desenhaCirculo na construção da circunferência em pincel.arc, você deve usar o raio recebido por parâmetro, e não o global. O código corrigido ficaria assim:
 function desenhaCirculo(x, y, raio, cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*Math.PI);
        pincel.fill();
    }
  • Na função desenhaAlvo se você altera a variável global, já na primeira iteração o valor não será mais o esperado, então a próxima iteração já não terá mais esse valor, uma solução é usar uma variável local. Portanto, poderíamos deixar assim:
function densehaAlvo(x, y){
        var i = 7;
        var raioLocal = raioI;

        while(i < raioLocal) {
            desenhaCirculo(x, y, raioLocal, 'red');
            raioLocal -= i;
            desenhaCirculo(x, y, raioLocal, 'white');
            raioLocal -= i;
        }

Fico feliz que você tenha tentado uma solução diferente do professor na função desenhaAlvo, e implementado um laço de repetição. A programação nos permite chegar ao mesmo resultado, mas com outras maneiras.

Espero ter ajudado.

Abraços,

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!