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
Solucionado (ver solución)
Solucionado
(ver solución)
3
respuestas

[Duda] AYUDAAAA!!!

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 Angel Pablo Palacios Montes
| 26.8k xp | 28 posts

No entiendo la lógica detrás de la rpta del instructor, se supone que cuando x llegar a ser 601, sentido es ahora -1, pero luego más abajo eso ejecuta la función disenharCircunferencia para después hacer x = 601 - 1 --> lo cual deja a x siendo 600, pero si ahora x vuelve a ser 600 nuevamente va tener que sumar y restar 1, porqué retrocede la pelota?? no debería quedarse la pelota rebotando entre 600 y 601???.

<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>
3 respuestas
por Estudiante
| 103.3k xp | 30 posts

hola. aqui te dejo otra forma por si te sirve.

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "white";
    pincel.fillRect(0,0,600,400);

    function dibujarCirculo(x,y,radio){
        pincel.beginPath();
        pincel.fillStyle = "black";
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();
    }
    function escribir(x,y,texto){
        pincel.font = "20px arial";
        pincel.fillText(texto,x,y);
    }
    function limpiarPantalla(){
        pincel.clearRect(0,0,600,400);
    }
    var ida = 20;
    var venida = 580; 
    function actualizarPantalla(){
        limpiarPantalla();
        escribir(300,200,ida+" x ida");
        escribir(300,250,venida+" x vuelta");
        if(ida<=580){
            dibujarCirculo(ida,20,10);
            ida++;
        }
        else{
            if(venida >= 20){
                dibujarCirculo(venida,20,10);
                venida--;
            }
            else{
                ida = 20;
                venida =580;
            }
        }
    }

        setInterval(actualizarPantalla,5);

    </script>
solución!
por Estudiante
| 64.2k xp | 6 posts

Hola Angel, como estas, espero que bien, en la siguiente imagen vemos como el profesor hace reasignaciones de la variable "sentido" cuando el valor de x cambia a mayor que 600 y menor que 0, cuando esto ocurre el valor es reasignado, en la imagen vemos como se condiciona esta reasignación.

Cualquier inquietud con gusto...

Saludos

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

por Jans Ronald Martínez Puente
| 26.3k xp | 8 posts

Hola Angel, tenia esa duda tambien pero recuerda que , cuando x =601 , la variable "sentido" va a ser siempre -1 ... entonces va a decrecer todo el tiempo hasta que el x llegue a un valor negativo y cambie el valor de variable "sentido" =1 hasta que llegue a x=601 y se repetirá. ya que SetInterval repite la función actualizar Pantalla, no tomaría el valor inicial de " var sentido =1".