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

ayuda ! Solo lo hace una vez :(

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 Estudiante
| 108.2k xp | 10 posts

Creo que no estoy entendiendo nada :(, intente hacer este ejercicio y el circulo solo va y viene una vez

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

<script>
    var screen = document.querySelector("canvas");
    var brush = screen.getContext("2d");
    brush.fillStyle = "lightgray"
    brush.fillRect(0,0,600,400);
function designcircunference(x,y,radio) {

    brush.fillStyle = "blue"
    brush.beginPath();
    brush.arc(x,y,radio,0,2* Math.PI);
    brush.fill();

}

function cleanScreen() {
    brush.clearRect(0,0,600,400);
}
var right = 0
var left = 600


function animatescreen(){


    if (right <= left ) {
        cleanScreen();
        designcircunference(right,20,10);

      right++;
    }


        else{
        cleanScreen();
        designcircunference(left,20,10);
        left--;




      }




}


 setInterval(animatescreen,9);
 </script>
3 respuestas
por Lucas Tomas Gordillo
| 119.1k xp | 84 posts
Ayudante Técnico

Buenas, no olvides que podes consultar la "opinión del instructor, donde suelen haber consejos y tips de cómo solucionar el ejercicio. Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

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

Espero haber sido de ayuda, de ser así no olvides marcar como solucionado. Saludos :)

solución!
por Juan Carlos Ortiz Huerta
| 13.9k xp | 1 posts
Ingeniero Civil

Yo también pensé en una solución similar a la tuya, lo que te falto es re iniciar los valores de right = 0 y left = 600, para volver a general el ciclo, te dejo el código que realice para que le des un vistazo.

Nota: La solución del instructor le da menos vueltas al asunto.

<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 disenhiarCircunferencia(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 v = 600;

    function cambiarLado(){

        if (x <= 600){

            actualizarPantalla()

        }

        else{

            if (v > 0){

            actualizarPantallaDos()

            }

            else{

                x = 0;
                v = 600;

            }
        }

    }

    function actualizarPantalla(){

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

    }

    function actualizarPantallaDos(){

        limpiarPantalla();
        disenhiarCircunferencia(v,20,10);
        v = v-1;

    }

    setInterval(cambiarLado,20);


</script>
por Estudiante
| 108.2k xp | 10 posts

Gracias Juan! si era esooo :)