Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Não entendi o pq o código não funciona

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 Luan Jose Antonio Souza Barros
| 192.2k xp | 11 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;

    function atualizaTela() {

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

        if (x >= 600){ 
            impaTela();
            desenhaCirculo(x, 20, 10);
            x = x - 1;
            }
    }

    setInterval(atualizaTela, 10) 

</script>
5 respostas
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Fala Luan, Beleza?

Notei que você está chamando a função limpaTela com o texto errado. Tenta alterar esse código e rodar novamente.

if (x >= 600){ 
    limpaTela();
    desenhaCirculo(x, 20, 10);
    x = x - 1;
}
por Luan Jose Antonio Souza Barros
| 192.2k xp | 11 posts

eu notei esse erro e depois corrigir, mas mesmo assim não funcionou

solução!
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Fala Luan... Desculpa ter trazido a resposta incompleta mas é que acabei tentando te ajudar de forma rápida e não adiantou, né?

Olha só, da forma que vc desenvolveu o código o teu x ficará "preso" em um determinado número. Coloca o console.log(x) dentro da função atualizarTela pra você conseguir ver esse efeito.

A solução é criar uma variável, fora da função atualizarTela(), para controlar o sentido que a bola vai andar. Inicialmente pode ser 1 positivo para o sentido ser para a direita.

Dentro da função atualizarTela() só precisamos desenhar a bola 1x, fazer as verificações da posição de x e alterar o sentido da bola caso "bata" nas laterais do canvas. Fora das verificações nós controlaremos o sentido adicionando 1 positivo ou negativo ao x.

var sentido = 1;

function atualizarTela() {
    limpaTela();
    desenhaCirculo(x, 20, 10);

    if (x >= 600) {
        sentido = -1;
    } else if (x <= 10) {
        sentido = 1;
    }
    x += sentido;
}
por Anderson Tadeu Froes Cordeiro
| 218.1k xp | 27 posts
Gestor Financeiro, Profissional Comex e Programador Júnior

esse exercicio é o que você precisa fazer a bolinha voltar a tela novamente correto ?

seu pensamento ali esta correto, mais a forma que você montou o codigo que ficou errado.

    var x = 20;
    var sentido = 1;

    function atualizarTela(){

        limpaTela();

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

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


    setInterval(atualizarTela, 10);
por Luan Jose Antonio Souza Barros
| 192.2k xp | 11 posts

ah entendi, vlw obrigado