Entrar Ainda não tem acesso?
2
respostas

Acertando o alvo - mudança de cor

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 Jorge Heleno Da Silva Padilha
| 74.5k xp | 154 posts
Vendedor

Após acertar e mudar de cor, como fazer um restart e voltar à cor original?

<meta charset="utf-8">
<canvas width="600" height="400" ></canvas>
<script type="text/javascript">

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'gray';
    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 > 290 && x < 310 && y > 190 && y < 210) {
            desenhaCirculo(300,200, raio + 20,'blue');
            desenhaCirculo(300,200, raio + 10,'yellow');
            desenhaCirculo(300,200,    raio,'green');

            alert('Você acertou o alvo!');
        }    
    }
    tela.onclick = dispara;
</script>
2 respostas
por Estudante
| 150.7k xp | 91 posts

Bom dia, Jorge! Como vai?

Não tenho muita experiência com desenhos e animações, mas eu acredito que você possa perguntar ao usuário se o mesmo deseja jogar novamente.

Caso ele responda que sim, você pode estar desenhando a cor original novamente, como por exemplo:

            var novamente = prompt("Deseja jogar novamente? Digite S ou N.")
            if (novamente == "S" || novamente == "s") {
                desenhaCirculo(300, 200, raio + 20, 'red');
                desenhaCirculo(300, 200, raio + 10, 'white');
                desenhaCirculo(300, 200, raio, 'red');
            }

Mais uma coisa, vejo um pequeno problema (de matemática) no if abaixo:

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

Aparentemente, você está considerando como se fosse um quadrado. Nesse caso, acredito que deva considerar a equação da circunferência. E assim, verificar se o ponto realmente está dentro da circunferência da seguinte forma:

 if ((x - 300) * (x - 300) + (y - 200) * (y - 200) <= raio * raio)
por Jorge Heleno Da Silva Padilha
| 74.5k xp | 154 posts
Vendedor

Oi Rosicley, obrigado por responder.

Sua ideia não funcionou aqui pra mim. Tem como você mandar o código final?

E não entendi sobre o problema de matemática no if. Fiz de acordo com a resposta do instrutor.