Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

[Duda] <Ayuda> Ya que va, que vuelva.

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Moviendo elementos con animaciones simples y actividad ¡Ya que va, que vuelva!

por Gonzalo La Ferrera
| 82.6k xp | 12 posts
Administrativo/Eventos Culturales/Prof. de Música

Hola! Estoy probando otro opcion del "ya que va, que vuelva"...pero no logro hacer que funcione. Probé con iteraciones, y con condicionales...pero nada...Lo máx que he logrado con esta opción es que llegue hasta el margen derecho y allí se quede o desaparezca.....sugerencias???

<canvas width="600" height="400"> </canvas>

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");    
    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400); 

    function disenarCircunferencia(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;
    function animacionIzqDcha(){

        limpiarPantalla();
        disenarCircunferencia(x,20,10);
        x++;
    }

    function animacionDchaIzq(){

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


</script>

No dejé las opciones de iteración(loops) ni de condicionales, porque ninguna terminaba de funcionar, pero la idea es que al final del código, luego de crear las funciones (una con mov para la derecha, y otra con mov para la izq) pudiera generar un loop para que vaya de una función a otra, o bien, un condicional para que entre a una u otra función...pero no puedo lograrlo

2 respuestas
por LUZDALIS LOPEZ D´ROMERO
| 1456.1k xp | 5148 posts
Instructor

¡Hola Gonzalo! ¡Deseo que estés bien!

Para evitar repetir código y hasta ahorrar varias líneas para que quede mas optimizado, te recomiendo que mires la opción Opinión del Profesor. Allí no necesitarias crear dos funciones sino una, donde llevas el control de ambos lados derecha e izquierda a traves de una variable llamada sentido.

A continuación te dejo el código como referencia:

<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,10);

</script>

¡Te deseo mucho éxito en tus estudios! y recuerda que aquí estaremos para apoyarte!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!
por Gonzalo La Ferrera
| 82.6k xp | 12 posts
Administrativo/Eventos Culturales/Prof. de Música

Hola Luz, muchas gracias por tu respuesta. Vi la versión del Instructor, y la entiendo, pero como yo había encarado el código para otro lado, desde las 2 funciones, quería saber que pasaba o como podía hacer que funcionara si continuaba por allí.

Gracias. Saludos.