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

[Dúvida] Não entendi a lógica de ida e volta da bolinha

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 Dennyse Barros da Silva
| 36.3k xp | 1 posts
Analista de Suporte

Com o código apresentado na resolução, o código entra em else if primeiro e vai até o final do canvas (600), certo? Mas para voltar, assim que -1 for subtraído de 600 (599), ele voltaria a else if, não e ficaria em loop, não?

Em um dos códigos que fiz antes de desistir e ver o código do instrutor, foi isso que aconteceu com a bolinha: ela ia do começo e chegava ao final, mas não voltava totalmente ao começo, pois ficava indo e voltando ali no final mesmo, em loop.

Não entendi porque mesmo sendo > que 600 e < 0 o código da certo e não aconteceu o mesmo que citei acima com o código do instrutor.

Alguém poderia me explicar?

2 respostas
solução!
por LUIZ EDUARDO AMORIM RAMOS MIRANDA
| 88.5k xp | 50 posts
DevOps Engineer

Se você tivesse colocado seu código, seria mais fácil de apontar o porque de ele não ter funcionado. No seguinte codigo:

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

sentido só vai ser -1 quando x for maior que 600 e vai continuar a ser -1 ate x ser 0, quando ele volta a ser 1. Vai ficar em loop, mas vai manter a direção e inverter sempre que x for 0 ou x for 600. Outra solução seria multiplicar por -1, deixaria o código ate melhor por não ter que usar um valor fixo.

por Antonio Simão da Silva Abreu
| 52.1k xp | 3 posts

Eu fiz assim no meu... Ficou maior que o do professor, mass

<meta charset="UTF-8">

<canvas width="600" height="400"></canvas>

<body>
    <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 y = false;

        function desenha() {
            limpaTela();
            desenhaCirculo(x, 20, 15);
            if (!y) {
                if (x < tela.width) {
                    x++;
                } else {
                    y = true;
                }
            } else {
                if(x >= 20) {
                    x--;
                } else {
                    y = false;
                }
            }
        }

        setInterval(desenha, 10);

    </script>
</body>