[Duda] ¡Ya que va, que vuelva! | Lógica de programación: Practicando con juegos y animaciones

Solucionado (ver solución)

Solucionado
(ver solución)

4
respuestas

por Johnny Escobar

| 152.5k xp | 5 posts

Por favor, me explican la lógica detrás de la solución del instructor, en especial, cómo la var x = 0; incrementa. ¿En cuál parte del código se declara el incremento?

<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 sentido = 1;

    function actualizarPantalla(){

        limpiarPantalla();
        if(x > 600){
            sentido = -1;
        }else if(x < 0){
            sentido = 1;
        }

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

    setInterval(actualizarPantalla,100);

</script>

4 respuestas

por Estudiante

| 91.4k xp | 4 posts

19/04/2023

el var x =0 es una variable que la inicializa en 0 , la logica entraria en tu función actualizar pantalla este if dice que si x que es la variable declarada (var x =0) , es mayor a 600 el sentido ira decrementado o sea ira disminuyendo de uno en uno ya que el sentido se inicializa en 1 que es la variable que se declara como var sentido = 1 entonces si no se cumple ese x >600 entra en una segunda condicion que es el else if la cual dice que si x <0 el sentido valdra 1 entonces ahora ira en un incremento (lo contrario a la primer condicion ) , y lo puedes observar en la funcion diseharCircunferencia(x,20,10); que la manda a llamar abajo y justo abajo de ese llamada a la funcion esta el incremento que anteriormente comente que es x = x+sentido

*ejemplo en la condicion donde incrementa *

si x < 0 entonces el valor de x = 0 por que esta inicializado en 0 y sentido esta inicializado en 1 por lo tanto x vale 1 entonces entra denuevo a la condicion y ahora pregunta x que vale ahora 1 es menor que 0 entonces llega y hace la suma de x = 1 + sentido recuerda que sentido vale uno entonces x = 1+1 , x =2 y asi se va haciendo la condicion hasta que llega a 600 en este caso no llega nunca a 600 dado a que solo es > si fuera >= 600 si llega dado a que toca el limite en el anterior solo llega hasta 599.9999999999999

Espero y me haya dado a entender XD

por Katherine Zuñiga Cruz

| 59.3k xp | 9 posts

Auxiliar operativo puestos de pago

20/04/2023

no xd

por Victor Hugo Vanegas Carvajal

| 36.5k xp | 4 posts

20/04/2023

Tampoco entiendo , me genera mucho ruido esa lógica.

function actualizarPantalla(){

        limpiarPantalla();
        if(x > 600){
            sentido = -1;
        }else if(x < 0){
            sentido = 1;
        }

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

solución!

por Victor Hugo Vanegas Carvajal

| 36.5k xp | 4 posts

20/04/2023

ahhh ya entendí.

Al comenzar el programa , x = 0. el else if(x <0) se vuelve verdadero. sentido = 1; x = x + sentido; comienza a sumar hasta que x = 600;(moviendo la figura de izq a dere)

al x = 600;

El if ( x > 600) se hace verdadero. sentido = -1; x = x + sentido; comienza a restar hasta que x = 0;

Esta última parte me confundía.

al tomar x = 600 x = 600 -1; la resta vuelve a x = 599

function actualizarPantalla(){

        limpiarPantalla();
        if(x > 600){
            sentido = -1;
        }else if(x < 0){
            sentido = 1;
        }

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

En if (x >600) es falsa y else if(x <0) tambien.Entonces sentido conserva el valor de -1.

hasta que la resta de x = x +sentido , x se vuelve igual = -1

Entonces else if (x < 0) se vuelve verdadero porque x = -1 entonces comienza a sumar x= sentido ,