Entrar Ainda não tem acesso?
4
respostas

Solução mais simples para o exercício da bolinha que vai e volta

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 Leonardo Franco Lima
| 59k xp | 6 posts
<canvas width="600" height="400"></canvas>

<script>

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

    pincel.fillStyle = 'white';
    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;

    function atualizaTela() {

        limpaTela()
        desenhaCirculo(x, 20, 10);
        x++

        if(x == 600) {

            x = 20;

        }
    }

    setInterval(atualizaTela, 20)
4 respostas
por Roberto Zuchetto Machado
| 32k xp | 2 posts
Tecnico em Informática

Eu tinha feito parecido só que não estava funcionando, depois notei que tinha feito o if fora da função.

por Berger Lima
| 140.3k xp | 4 posts
Suporte Técnico

Mas esse teu código não faz ao bolinha ir e voltar, ela vai em somente um sentido. Se faz necessário a criação de uma nova variável que faça mudar o sentido da bolinha sempre que ela chegar ao final da tela do canvas e mudar novamente quando ela chegar ao início. O que eu fiz:



    var x = 20;
    var moveDireita = true;

    function atualizaTela(){
        limpaTela();
        desenhaCirculo(x,20,10);
        if (moveDireita){
            x++;
        } else {
            x--;
        }
        if(x > 580){
            moveDireita = false;
        } else if (x < 20){
            moveDireita = true;
        }
    }
por Vitor Camargo Bazzani
| 48k xp | 20 posts

Esse codigo não funcionou pra mim

por José Pedro Wojeicchowski
| 69.9k xp | 9 posts

Boa...eu fiz praticamente igual a você, mas a condição no if foi um pouco diferente. Isso pq se em algum momento na função autalizaTela mudarmos o incremento para algo diferente de 1 (x++), ele poderá pular a condição x == 600. 

if (x  >=  600) {
    x  =  0 ;
}