Como posso melhorar meu código? - Prova Final | Lógica de Programação II: Funções, Desenhos e um Jogo

2
respostas

por Renan Viana

| 243.3k xp | 17 posts

<!doctype html>
<head>
    <meta charset="UTF-8"/>
</head>
<html>
    <body>
        <canvas id="tela" width="600" height="400"></canvas>
        <div id="score"></div>
        <script>

            var tela = document.getElementById("tela");
            var c = tela.getContext("2d");
            var countAcerto = 0;
            var pos;
            var alvoX;
            var alvoY;
            var raio = 40;
            var score = document.getElementById("score");

            var sorteia = function (max){
                return pos = Math.floor(Math.random() * max);
            };

            var circulo = function(x,y,raio,cor){
                c.beginPath();
                c.fillStyle = cor;
                c.arc(x,y,raio,0,2*Math.PI);
                c.fill();
            };

            var desenhaAlvo = function(x, y) {
                circulo(x, y, raio, "white");
                circulo(x, y, raio-10, "red");
                circulo(x, y, raio-20, "white");
                circulo(x, y, raio-30, "red");
            };

            var desenha = function() {
              limpaTela();
              alvoX = sorteia(600);
              alvoY = sorteia(400);
              desenhaAlvo(alvoX, alvoY);
            };

            var limpaTela = function(){
                c.clearRect(0,0,600,400);
            }

            tela.onclick = function(event){
                var x = event.pageX - tela.offsetLeft;
                var y = event.pageY - tela.offsetTop;

                if(((x > alvoX - raio)&&(x < alvoX + raio)) && ((y > alvoY - raio)&&(y < alvoY + raio))){
                    countAcerto = countAcerto + 1;

                    score.innerHTML = 'Score: ' + countAcerto;
                }
            }

            setInterval(desenha, 2000);
        </script>


    </body>
</html>

2 respostas

por Alberto Souza

| 2676.6k xp | 5740 posts

Instrutor Desenvolvedor e Instrutor

18/10/2016

Oi Renan, baseado no seu curso de lógica, achei seu código bem legal. Acho que vc vai gostar muito de fazer os cursos da trilha de javascript avançado, que Flavio gravou.. Lá vc vai aprender outras técnicas de desenvolvimento que vão te ajudar a deixar mais modularizado esse seu código.

Minha sugestão é que vc faça o outro treinamento e depois tenta mexer nesse mesmo código que vc criou :).

por Paulo Duarte

| 153.5k xp | 16 posts

Analista e Arquiteto de Sistemas

20/10/2016

O código está muito bom, e na minha opinião com alguns poucos pontos de atenção para melhorar a qualidade do código.

seguindo as regras de refatoração, eu começaria melhorando o nome das variáveis. Por exemplo:

countAcerto

ficaria melhor se fosse:

placar

a instrunção de avaliação abaixo:

if(((x > alvoX - raio)&&(x < alvoX + raio)) && ((y > alvoY - raio)&&(y < alvoY + raio))){
countAcerto = countAcerto + 1;
score.innerHTML = 'Score: ' + countAcerto;
}

ficaria melhor se fosse aplicado um Extract Method:

var acertouAlvo = function (x,y) {
return ((x > alvoX - raio)&&(x < alvoX + raio)) && ((y > alvoY - raio)&&(y < alvoY + raio));
}

ao invés de fazer:

countAcerto = countAcerto + 1;

opte por:

countAcerto++;

a função abaixo está com nome que é considerado um nome ruim, pois não refere-se exatamente ao que a função faz, além do que ela faz mais do que apenas desenhar. E se ela só desenhasse, o que ela está desenhando?

var desenha = function();

renomeie-a para:

var iniciaJogo = function();

o mesmo vale para a função abaixo:

            var circulo = function(x,y,raio,cor){
                c.beginPath();
                c.fillStyle = cor;
                c.arc(x,y,raio,0,2*Math.PI);
                c.fill();
            };

o que é a variável c? só vou saber se ler o código, então é nome ruim para a variável, e também o nome melhor pra função seria desenhaCirculo;

Outro ponto importante. Elimine os números mágicos!

Por mais óbvio que pareça, alguém irá se perguntar porque ele está lá!

alvoX = sorteia(600);
alvoY = sorteia(400);

var limpaTela = function(){
    context.clearRect(0,0,600,400);
}

substitua-os por constantes:

const LARGURA_TELA = 600;
const ALTURA_TELA = 400;

var iniciaJogo = function() {
              limpaTela();
              alvoX = sorteia(LARGURA_TELA);
              alvoY = sorteia(ALTURA_TELA);
              desenhaAlvo(alvoX, alvoY);
};

var limpaTela = function(){
    context.clearRect(0,0,LARGURA_TELA,ALTURA_TELA);
}

Ao eliminar os números mágicos, você até resolveu o problema da duplicação de código. Pois não precisará mais mudar o tamanho da tela em 2 lugares, correndo risco de esquecer.

E ai? O que achou dessas mudanças?