Entrar Ainda não tem acesso?
2
respostas

complicada e perfeitinha

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 Caique Calíope Oliveira Corcovia
| 77.6k xp | 101 posts

compliquei bem mais minha resposta kk mas cheguei lá! isso é o que importa, com o tempo acho (espero!!) que a lógica vá ficando mais simples na cabeça

<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 = 'navy';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0,2* Math.PI);
        pincel.fill();

    }

    function limpaTela(){
        pincel.clearRect(0, 0, 600, 400);

    }

    function mensagemConsole(){
        console.log('Chamei função');
    }

    var x= 20;
    var vaiDaEsquerdaParaAdireita = true;

    function atualizaTela(){
        if (x < 600 && vaiDaEsquerdaParaAdireita == true){
            limpaTela();
            desenhaCirculo(x, 220, 10);
            x++;
        } 

        if (x == 580) {
            vaiDaEsquerdaParaAdireita = false;
            x--;
        }

        if (x < 580 && vaiDaEsquerdaParaAdireita == false){
            limpaTela();
            desenhaCirculo(x, 220, 10);
            x--;
        }

        if (x == 20){
            vaiDaEsquerdaParaAdireita = true;
            x++;
        }
       }

    setInterval(atualizaTela, 10);

</script>
2 respostas
por ARTUR MAGALHAES PEQUENO
| 36.2k xp | 16 posts
Consultoria Empresarial em Compliance e Projetos

Realmente, um pouco mais longa do que a minha - mas no final das contas com uma lógica bem parecida. Eu também acabei criando uma função com um monte de IFs que apagava a tela e dava incremento (x++) na taxa de deslocamento.

A diferença é que eu acrescentei uma variável booleana (valor "true" ou "false") que mudava pra "false" quando a bolinha chegava em 600 pra decrementar (x--) a taxa de deslocamento (e no x=0 mudava pra "true" de novo pra voltar a incrementar).

por ARTUR MAGALHAES PEQUENO
| 36.2k xp | 16 posts
Consultoria Empresarial em Compliance e Projetos

Olhaí, Caíque, como ficou:

<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 //velocidade do deslocamento
    var k = false //sentido da bolinha
    function atualizaTela(){
        limpaTela();
        desenhaCirculo(x,20,10);
        if (x<600&&k==false) {x++}
        if (x==600) {k=true};
        if (x>0&&k==true){x--};
        if (x==0&&k==true){k=false};}

    setInterval(atualizaTela, 5);
</script>