Entrar Ainda não tem acesso?
3
respostas

Resolução Alternativa

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 Rafael Marton da Silva
| 28.7k xp | 2 posts
Coordenador de TI

Escrevi um pouco mais que o Professor, mas acho que dessa forma fica mais fácil de entender o que está ocorrendo no programa.

<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 indoFrente(){
        limpaTela();
        desenhaCirculo(x, 20, 10);
        x++
        if(x>580){
            indo = false;
        }
    }

    function indoTraz(){
        limpaTela();
        desenhaCirculo(x, 20, 10);
        x = x - 1
        if(x<20){
            indo = true;
        }
    }

    function atualizaTela(){
        if(indo){
            indoFrente();
        }
        else{
            indoTraz();
        }
    }

    setInterval(atualizaTela, 10);

</script>
3 respostas
por Cássio Murilo
| 1276.4k xp | 2204 posts
Instrutor Agile Master

Bacana, Rafael!

Realmente dessa forma fica mais fácil de compreender através das funções!!!

Obrigado por ter compartilhado!

Um abraço e bons estudos!

por Jillsea
| 209.4k xp | 193 posts
"Eu juro que mês passado essa linha aqui fazia sentido"

Fiz parecido (lembrei do false e true tambem) mas deixei tudo em uma só função:

<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 controle = true;


    function atualizaTela() {

        if (controle==true){
            limpaTela();
            desenhaCirculo(x, 20, 10);
            x++;

            if (x>550) {

                controle=false;
            }
        }


        if (controle==false){
            limpaTela();
            desenhaCirculo(x, 20, 10);
            x--;


            if (x<50) {

                controle=true;
            }

        }
    }

    setInterval(atualizaTela, 10);

</script>

Achei bem interessante essa sua solução resumida no final.

por Cássio Murilo
| 1276.4k xp | 2204 posts
Instrutor Agile Master

Bacana, Alves!!!

Mandou bem!!!

Qualquer dúvida nos procure ;-)