Circulo doble sentido | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

4
respuestas

por Yorlin Fabian Pachajoa Rendon

| 82.8k xp | 10 posts

Saludos, en el aula de movimientos de objetos, esta este ejercicio, la verdad entiendo gran parte del codigo pero no el final cuando hace la comparacion para ver en que sentido va. me gustaria si me pudieran explicar como funciona exactamente este fragmento de codigo. gracias

. . .

var x = 0
var sentido = 1;

function actualizarPantalla(){

    limpiarPantalla();                // Tengo entendido que compara, y cuando se pasa , el se devuelve porque cambia su sentido, pero al cambiar x = 559 
    if(x > 600){                           // por ejemplo, y esto haria que volviera a cambiar su sentido y no regresaria de nuevo.
        sentido = -1;
    }else if(x < 0){                     // estoy un poco perdido con este gragmento de codigo. megustaria saber como es su ejecucion.
        sentido = 1;
    }

    disenharCircunferencia(x,20,10);
    x = x + sentido;
}

setInterval(actualizarPantalla,100);

4 respuestas

por JHON ALAN FERNANDEZ MATURANO

| 86.5k xp | 3 posts

10/08/2022

se refiere que solo toma los últimos valores, por ejemplo declara como sentido igual 1 entonces va ir hacia la derecha hasta llegar al punto máximo de la pantalla que en este caso una vez que x=601 entonces el sentido va ser -1 y va ir hacia la derecha, con eso tenemos que cuando x<0 sea negativo por ejemplo x=-1, llegue al tope de la pantalla hacia la derecha el valor del sentido volverá a 1 para ir hacia la izquierda. En mi caso yo hice este codigo antes de dar siguiente.

<meta charset="utf-8">


<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);
       var x=0;
    var volver=false;
       function disernarCircuferencia(x,y,radio){
           pincel.fillStyle="blue";
           pincel.beginPath();
           pincel.arc(x,y,radio,0,2*Math.PI);
           pincel.fill();

       }
      function limpiar(){
          pincel.clearRect(0,0,600,400);
      }
      //disernarCircuferencia(20,20,10);
      //disernarCircuferencia(40,40,20);
      function actualizarPantalla(){

          limpiar();
          disernarCircuferencia(x,20,10);
          //x++;
          //if(x>=600)x=0;
          if(volver){
              x--;
              if(x==10)
              volver=false;
          }
          if(!volver){
              x++;
              if(x==(600-10)){
                  volver=true;
                  console.log(volver)
              }
          }


          //if(volver)x--;
      }

      setInterval(actualizarPantalla,5);

</script>

por Yorlin Fabian Pachajoa Rendon

| 82.8k xp | 10 posts

11/08/2022

Muchas gracias por tu respuesta, no aclaro del todo mi duda pero con tu ejemplo poco a poco ya voy entendiendo. una pregunta. if(x==10) y if(x==(600-10)) lo pones porque el 10 es el radio? o porque lo pones?

Gracias amigo

por JHON ALAN FERNANDEZ MATURANO

| 86.5k xp | 3 posts

11/08/2022

si por el radio me pareció conveniente hacerlo de esa manera ya que a mi parecer no tendría que llegar al 0 por que desaparecería una parte pero en la solución del curso igual fue interesante lo que hicieron con los limites del ancho

por Yorlin Fabian Pachajoa Rendon

| 82.8k xp | 10 posts

11/08/2022

Muchas gracias por sacar el tiempo y explicarme.

Saludos!!!