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)
6
respuestas

S.O.S Mi código hace que vaya de izquierda a derecha pero no regresa

Buenas noches, chic@s

A continuación expongo mi código, en el cual mi circunferencia gira de izquierda a derecha pero no regresa. :(

<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 
   var topeBorde1 = 600
   var topeBorde2 = 0
   var borde1 = 1
   var borde2 = -1


    function actualizarPantalla1(){

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

    } 


    function actualizarPantalla2 (){

        limpiarPantalla();
        disenharCircunferencia(x,20,10);
        x--;
    }       



    if (borde1 < topeBorde1) {
        setInterval(actualizarPantalla1,50);
        borde1++;
        console.log(x);

    } else if (borde1 > topeBorde2) {
            setInterval(actualizarPantalla2,50);
            borde1 = borde1 + borde2;          
    }

</script>    




Alguien tiene algún aporte para hacerla regresar? Agradecida de antemano.

6 respuestas

Hola Amarilys

Con respecto a tu código no regresa debido a que setInterval sigue ejecuntandose y esto lo puedes comprobar escribiendo un console.log(x) en la funcion actualizarPantalla1 y ahi se puede observar que apesar de haber llegado a 600 x sigue incrementando sin un fin.

para poder darle un "break" a setInterval debes de usar clearInterval(); para poder parar la ejecución

te comparto un video que me ayudo a utilizar clearInterval y un articulo ambos me ayudaron y estoy seguro que podras seguir estructurando tu código

https://www.youtube.com/watch?v=fqpW1DFbQ6s&t=27s

https://www.pedroventura.com/javascript/funciones-javascript-setinterval-clearinterval-settimeout-2/

El problema esta en que se chocan los 'if', fijate que cuando llega a la condicion del segundo if, y ejecuta. se vuelve a cumplir la condicion del primero. Necesias hacer que el primer if se deje de cumplir para que se pueda ejecutar el segundo libremente. Una forma de hacerlo es poniendo valores diferentes para cada condicion, e incluyendo un delimitador que sume o reste '1', segundo llegue a un punto u otro. Una opcion seria asi:

    var x = 0 
    var bordeSignal = -1 


    function actualizarPantalla(){
        console.log(x);
        limpiarPantalla(); 
        disenharCircunferencia(x,20,10);
        if (x < 0) {
        bordeSignal = 1


        } else if (x > 600) {
            bordeSignal = -1
        }


        x= x+bordeSignal;

    } 


    setInterval(actualizarPantalla,10);

</script>    

Gracias, Victor y Carlos. Déjenme revisar y aplicar lo que me comentan y les doy feedback. Un millon de gracias!!

Hola Chic@s,

Logré entender y aplicar el clearInterval, en el caso de la función (actializarPantalla1); a continuación les muestro

`

`

Gracias Víctor, me ayudo mucho mas el video que me recomendaste. Sin embargo, Carlos, no logro entender lo que me cometas acerca del if ; ya que en tu ejemplo colocas a X <0 y eso no ocurre ya que X esta entre 0 y 600, de acuerdo al tamaño del CANVAS, asi como tampoco X > 600. Podrías explicarme que quieres decir, en tu ejemplo. Gracias.

Fijate que x= 0 y la variable bordeSignal esta definida como bordeSignal = -1, esto hace que cuando comience el codigo le va a restar 1 a 'x', por lo que 'x' va a valer -1...

como x es < 0, se activa el codigo y bordeSignal cambia a sentido = 1.

Gracias a que bordeSignal es positivo le va a sumar valores a 'x' hasta que supere 600... en ese momento se va a activar el codigo y bordeSignal pasa a valer -1. y asi sucesivamente

con respecto el tamano del CANVAS no importa en el codigo porque son cosas diferentes. En el CANVAS vas a dibujar los valores positivos pero eso no quiere decir que 'x' no pueda asumir valores negativos en el codigo

solución!

Gracias a todos!!!