Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Consegui, mas não estou feliz com o código. Alguém pode me explicar como funciona 'Else if'?

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Movendo elementos: animações simples e atividade Tudo que vai volta!

por Athos Franco de Sá Feitosa
| 32.9k xp | 30 posts
<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio) {

        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

    var x = 20;
    var indo = true; 



    function atualizaTela() {

        limpaTela();
        desenhaCirculo(x, 20, 10);
        if(indo) {
        x++;    
        }
        else{
        x--;
        }
        if(x==590) {
            indo = false;
        }
        if(x==20) {
            indo = true;
        }


    }
    setInterval(atualizaTela, 10);

</script>

O código funciona, a bolinha vai e vem, mas não gostei muito de como foi escrito. Fui ver a orientação do professor e percebi que ele fez de uma forma diferente, utilizando uma condicional chamada 'Else if'. Alguém sabe me explicar como funciona?

2 respostas
por Isabella Leal
| 194.5k xp | 289 posts
Moderador

Oi Athos, tudo bem? Eu espero que sim!

Certo, percebi que esse conceito de repetição que foi usado no exercício não ficou muito claro pra você ainda, então vamos entender o que nos foi pedido e o que é preciso fazer.

A proposta é que o aluno altere o código para que o círculo, assim que chegar no canto direito da tela, volte. No final, o círculo deve ficar indo e voltando eternamente.

Existem várias formas de se conseguir esse resultado, assim como tudo no universo da programação. A forma que o instrutor usou foi a condição de repetição if e else, vou te ajudar a entender como ela funciona.

No código abaixo, que seria a forma correta de resolver o exercício, a lógica é: 

    function atualizaTela() {

        limpaTela();

        if( x > 600) {
            sentido = -1;
        } else if (x < 0) {
            sentido = 1;
        } 

        desenhaCirculo(x, 20, 10);
        x = x + sentido;
    }

SE X for maior que 600, sentido é igual á -1. OU SE x for menor que 0, sentido é igual á 1. Ou seja, seguindo essa lógica, ele vai ficar indo entre -1 e 1. endo assim, ele dá uma condição para que ele fique indo e voltando? Porque ele precisa de um parâmetro para ter uma posição.

Ficou claro dessa forma? Eu espero ter te ajudado, e bons estudos! :)

solução!
por Akashi
| 220.4k xp | 284 posts

Athos,

'else if' nada mais é que um if dentro das condições de um else.

Entenda 'if' como 'se', e o 'else' como 'senão'.

no exemplo do professor:


        if( x > 600) {

            sentido = -1;

        } else if (x < 0) {

            sentido = 1;

        }

SE x > 600, {faça sentido = -1;} SENÃO, SE x < 0 {faça sentido = 1;}

Este segundo SE só entra em cena se a condição anterior (x > 600) não for atendida. Se a primeira condição (x > 600) for atendida, este ELSE IF nem é executado.