Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
5
respuestas

Ya que va, que vuelva (con IF ELSE y WHILE)

Hola a todos. Yo quise hacerlo así. Para mi esto tiene sentido, pero para el código no, evidentemente. Al llegar a 600 me "salta" directamente a 0. No me doy cuenta por qué salta. ¿Qué estoy haciendo mal? ¿Qué esta mal con estos métodos?

<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*4,0,2*Math.PI);
        pincel.fill();
    }    

    function limpiarPantalla(){
        pincel.clearRect(0,0,600,400);
    }


    var x = 0;
    function actualizarPantalla() {
        limpiarPantalla();

        if (x < 600) {
            disenharCircunferencia(x,50,10);
            x++;
        }
        else {
            x = 600;
            while (x > 0) {
                disenharCircunferencia(x,50,10);
                x--;
            }
        }
    }


    setInterval(actualizarPantalla,15);
</script> 
5 respuestas
solución!

Cordial saludo.

Necesitas controlar qué pasa con la circunferencia cuando está a la izquierda o está a la derecha, es decir, el eje X. Cuando la circunferencia está a la izquierda el valor del eje X debe aumentar y cuando está a la derecha el valor del eje X debe disminuir. Prueba esto.

//Código anterior omitido pero está bien.

var x = 0;
var limite = 1; //Permite controlar la circunferencia cuando está a la izquierda o derecha
function actualizarPantalla() {
        limpiarPantalla();
        if (x > 600) {
            limite = -1;           
        } 
        if (x < 0) {
            limite = 1;           
        }
        disenharCircunferencia(x,50,10);
        x = x + limite;       
}
setInterval(actualizarPantalla,15);

Claro. Comprendo. Tan facil parece ahora que leo el código, y yo queriéndome complicarla. ¡GRACIAS!

Cordial saludo.

Nos pasa a todos, tenemos la puerta abierta y nos damos de portazos !! Pero ese es el cuento, debemos seguir practicando, la experiencia hace al maestro.

Un abrazo.

Hola Elian, tu problema es usar el while ya que la acción se hace tan rápido que no se aprecia el movimiento, yo recomiendo eliminar el while y añadir una variable para controlar el sentido de la siguiente manera.

    var x = 0;
    var sentido=true;
    function actualizarPantalla() {
        limpiarPantalla();

        if (x < 600 && sentido==true) {
            disenharCircunferencia(x,50,10);
            x++;
        }
        if (x==600) {
            sentido=false;
        }

        if(x > 0 && sentido==false) {
            disenharCircunferencia(x,50,10);
            x--;
        }

        if (x==0) {
        sentido=true;
        }
    }

Cabe mencionar, la interpretación del set interval es, * realiza una *función cada x tiempo* y no ** realiza todas las acciones dentro de la *función en x tiempo** es por eso que la acciones dentro de una función se hacen tan rápido que parecen instantáneas. como el while esta dentro de la función se hace rápidamente.

Genial Andrés. Interesante método. Es la primera vez que uso el foro. Había probado muchas métodos improvisando. Uno curiosamente era sólo con varios if y hasta también habia creado una variable auxiliar llamada "sentido" aunque no con un booleano sino con un 0. Pero al parecer todo lo que hacia estaba mal. Y comprendo mejor ahora que me mencionas lo del setInterval. Es como si fuera una alterativa a los ciclos.

Me copio tu variante también y la anexo como segunda opción en forma de comentario para que me quede archivada para mis repasos.

Un abrazo a ambos muchachos.