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

[Duda] NO ENCUENTRO EL ERROR EN MI CÓDIGO

<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 dibujarCirculo(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;
        var x2=(600-1);

        while (x <= x2) {

                if (x >= 0){
                        function actualizarPantalla() {

                        limpiarPantalla();
                        dibujarCirculo(x,20,10);

                        }

                }



                if (x == 600) {

                        function actualizarPantalla2 (){

                        limpiarPantalla();
                        dibujarCirculo(x2,20,10);
                        x2--;

                }

                setInterval(actualizarPantalla2,500);

                }

                x++;


        }


</script>
5 respuestas

Hola, Parece que ha definido las funciones actualizarPantalla() y actualizarPantalla2() dentro del bucle while. Esto significa que se están definiendo múltiples veces en cada iteración del bucle, lo que puede causar problemas.

solución!

Para corregir este error, debe sacar las funciones actualizarPantalla() y actualizarPantalla2() del bucle while y definirlas fuera de él. También debe llamar a la función setInterval() para la función actualizarPantalla() fuera del bucle while.

Hola Federico, ya realicé los cambios que comentas pero aún así sigue sin funcionar el código :(

<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 dibujarCirculo(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;
        var x2=(600-1);

        function actualizarPantalla() {

                        limpiarPantalla();
                        dibujarCirculo(x,20,10);

                        }

        function actualizarPantalla2(){

                        limpiarPantalla();
                        dibujarCirculo(x2,20,10);
                        x2--;

        setInterval(actualizarPantalla,500);


        while (x <= x2) {

                if (x >= 0){

                }



                if (x == 600) {

                }

                x++;

        }


</script>

Hola, mira tu codigo tiene varios problemas:

1- El while no realiza nada en concreto, ya que quieres realizar un bucle pero no es nesesario utilizarlo para este tipo de ejercicios, por el contrario te recomiendo usar if y elseif.

2- la funcion actualizarPantalla y actualizarPantalla2 se encuentran dentro del ciclo if en donde para realizar el ejercicio tienen que crear las funciones, en lugar de eso te recomiendo en vez de crear las funciones dentro de los if diseñalos aparte y utiliza el if para llamarlos asi: actualizarPantalla() . Tambien me fije que dichas funciones realizan exactamente la misma funcion solo que una tiene como objetivo restar x cuando este sea igual a 600, es mas estetico y evitas menos problemas creando una sola funcion actualizarPantalla en donde contenga los diferentes if y realize la misma funcion.

3- la variable x2 no hace nada en concreto ya que si quitamos el bucle while y la funcion actualizarPantalla2 no se muestra en ningun lado. por lo contrario te recomiendo crear una nueva variable la cual nos muestre el sentido y la direccion en la cual se mueve nuestro circulo, en este caso la llame direccion y se podria decir que es un termino buleano en donde muestra solo dos valores 1** y **-1.

4- la ultima correcion seria las condiciones de los dos if en donde establecemos que (x < 0) y (x>600) cambie la variable direccion dependiendo de la esquina en donde se encuentre nuestro circulo y al final para que nuestro circulo se mueva en la direccion correcta sumamos x** con el valor de **direccion.

Tu codigo se veria asi:

var x = 0;
        var direccion = 1
        function actualizarPantalla() {
            limpiarPantalla();
            if (x > 600){
                direccion = -1
            }
            if (x < 0){
                direccion = 1
            }
            dibujarCirculo(x,20,10);
            x+= direccion;
            }

    setInterval(actualizarPantalla,500);

Muy amable compañero, en verdad me has ayudado muchismo !