Solucionado (ver solución)
Solucionado
(ver solución)
3
respuestas

[Sugerencia] Ida y vuelta

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad No se como hacer que se vuelva cíclico, solo va y viene 1 sola vez.

<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 ida = 0
    var vuelta = 600


     function avanzar(){

        limpiarPantalla();
        disenharCircunferencia(ida,20,10);
        ida++;

        }

    function retroceder(){

        limpiarPantalla();
        disenharCircunferencia(vuelta,20,10);
        vuelta = vuelta-1;
        }

    function queVuelva(){

        if (ida <= 599){
            avanzar();
        } else if (ida == 600) {
            retroceder();
        }

    }

    setInterval(queVuelva,10);

</script> 
3 respuestas

buenas tardes !! primero te quiero felicitar por que tu código es muy bueno de verdad , estuve como una hora para entenderlo mientras trataba de ayudarte para que vaya y venga indefinidamente. Pensé que con un while sin definir el contador se podria hacer pero no funciona y con un for menos ,voy a seguir investigando , pero muy buena tu resolución ,saludos

solución!

lo que pasa es tu codigo tiene el problema que cuando entra en el else if decrementas y nunca das una señal par que pueda volver a incrementar la variable x y por eso solo funcionan una vez le agregue dos condiciones a tu codigo para que funcion aunque el codigo del instructor es el mas eficiente por que solo usa dos condiciones para que funcion de izq a der

<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 ida = 0
    var vuelta = 600


     function avanzar(){

        limpiarPantalla();
        disenharCircunferencia(ida,20,10);
        ida++;
        if(ida==600){ condicion  para que la variable vuelva a 600 despues de avanzar y pueda entrar en la condicion de vuelta
            vuelta=600;
        }
        }

    function retroceder(){

        limpiarPantalla();
        disenharCircunferencia(vuelta,20,10);
        vuelta = vuelta-1;
        if(vuelta==0){// condicion  para que la variable vuelva a cero despues de regresar y pueda entrar en la condicion de ida
            ida=0;
        }
        }

    function queVuelva(){

        if (ida <= 599){
            avanzar();
        } else if (ida == 600) {
            retroceder();
        }

    }

    setInterval(queVuelva,10);

</script> 

Gracias ángel, esa era la lógica que me faltaba, no tenia claro como hacer ese condicional para que retornara. También revisé el código del profesor y me pareció muy interesante y mas eficiente.