2
respostas

Incrementos ao exercício 7| Aula 4

Por que a bolinha vermelha não está se movendo, e a azul parece estar travando ao pulsar?

<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,cor) {
        pincel.fillStyle = cor 
        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 sentido = 1 
    var raio = 20


    function movimento () {
        limpaTela();
        if(raio>30) {
            sentido = -1

        }else if(raio<20) {
            sentido = 1 
        }

        desenhaCirculo(300,200,raio,'blue');
        raio = raio+sentido;

    }

    function anda () {
        limpaTela();
        if(x>600) {
            sentido = -1

        }else if(x<0) {
            sentido = 1 
        }

        desenhaCirculo(x,20,10,'red');
        x = x+sentido;

    }

    function apareca () {
        setInterval(movimento,5);
        setInterval(anda,5);
    }

    tela.onclick = apareca;



</script>
2 respostas

Boa tarde.

Você propôs um incremento ao exercício 7. Mas qual a sua intenção? O que espera com o incremento? É importante deixar isso para guiar a leitura do seu código.

Olá Clara,

A intenção do seu código era fazer com que a bola vermelha andasse de um lado para o outro, enquanto que a bola azul ficasse pulsando é?

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software