Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Duda] Ayuda en el codigo

Este es el codigo que hacer ir y volver un circulo. Cree una variable buleana que me ayudara para saber en q sentido se mueve el circulito.No descubro donde esta el error, o si estoy muy fuera de foco.

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");        
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0,0,600,400); 

    function disenharCircunferencia(x,y,radio){
        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();
    }    

    function limpiarPantalla(){

        pincel.clearRect(0,0,600,400);

    }

    var x = 0
    boolean = false
    function actualizarPantalla(){

        limpiarPantalla();
        disenharCircunferencia(x,20,10);
        x++;
            if (x == 500){
            boolean = true;
            }
        }
    function vueltaPantalla(){
        limpiarPantalla();
        disenharCircunferencia(x,20,10);
        x--;
        if (x == 0){
            boolean = true;
        }

    }

        if (boolean == true){
            setInterval(actualizarPantalla,1);
        }
        if (boolean == false) {
            setInterval(vueltaPantalla,1);
        }

</script> 
1 respuesta

Hola!

Me parece que el error está en que estas usando la función setInterval() varias veces, dicha función ejecuta "infinitamente" la función que le pases como argumento, por lo que tus funciones actualizarPantalla() y vueltaPantalla() se estarían ejecutando muchas veces y de forma desordenada, recomendaría colocar la lógica, tanto de ida, como de vuelta, en una sola función, posteriormente, llamar esa función unificada en el setInterval()