Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Otimização do Código

Tentei "otimizar" o código diminuindo as variáveis globais, e organizando as responsabilidades.

É por esse caminho que funciona a legibilidade do código e padrões de projetos?

<meta charset="utf-8">
<canvas width="600" height="400"></canvas>

<script>

    var comprimentoCanvas = 600;
    var alturaCanvas = 400;
    var raio = 20;

    var posicoesAleatorias = sorteiaPosicoes(comprimentoCanvas, alturaCanvas);

    function pegaPincel() {

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

        return pincel;
    }

    function desenhaBackground(corDoBackground) {

        var pincel = pegaPincel();

        pincel.fillStyle = corDoBackground;
        pincel.fillRect(0, 0, comprimentoCanvas, alturaCanvas);
    }

    function desenhaCirculo(posicaoX, posicaoY, raio, corDoCirculo) {

        var pincel = pegaPincel();

        pincel.fillStyle = corDoCirculo;
        pincel.beginPath();
        pincel.arc(posicaoX, posicaoY, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function desenhaAlvo(posicaoX, posicaoY) {

        desenhaCirculo(posicaoX, posicaoY, raio + 40, 'blue');
        desenhaCirculo(posicaoX, posicaoY, raio + 22, 'white');
        desenhaCirculo(posicaoX, posicaoY, raio, 'red');
    }

    function limpaTela() {

        var pincel = pegaPincel();
        pincel.clearRect(0, 0, comprimentoCanvas, alturaCanvas);
    }

    function sorteiaPosicoes(maximoX, maximoY) {

        var posicaoX = Math.floor(Math.random() * maximoX);
        var posicaoY = Math.floor(Math.random() * maximoY);

        return {x: posicaoX, y: posicaoY};
    }

    function verificaAcerto(xDisparo, yDisparo) {


        if(xDisparo >= posicoesAleatorias.x - raio && xDisparo <= posicoesAleatorias.x + raio) {

            var acertoX = true;
        }

        if(yDisparo >= posicoesAleatorias.y - raio && yDisparo <= posicoesAleatorias.y + raio) {

            var acertoY = true;    
        }

        return acertoX && acertoY;    

    }

    function avisaAcerto() {

        alert('Você ACERTOU!!!');
    }

    function dispara(evento) {

        var xDisparo = evento.pageX;
        var yDisparo = evento.pageY;

        var acertou = verificaAcerto(xDisparo, yDisparo);

        if(acertou) {

            avisaAcerto();
        }
    }

    function atualizaTela() {

        limpaTela();
        desenhaBackground('lightgrey');
        posicoesAleatorias = sorteiaPosicoes(comprimentoCanvas, alturaCanvas);
        desenhaAlvo(posicoesAleatorias.x, posicoesAleatorias.y);
    }

    document.onclick = dispara;


    setInterval(atualizaTela, 1000);


</script>
1 resposta
solução!

Mandou bem Bruno!

Dividir diferentes trabalhos em funções é um otimo começo para melhorar o código. Uma outra parte importante desse trabalho é distribuir seu código em diferentes arquivos linkados entre si, mas isso você vai aprender mais para frente nos estudos. Continue assim ^^