1
respuesta

[Proyecto] ¡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 Estudiante
| 90.3k xp | 15 posts

Hola, comparto mi proyecto, solo me quedé con la duda de por qué el cuadro de fondo no se ve gris? Saludos!

<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 dibujarCirculo(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;
        }

        dibujarCirculo(x,20,10);
        x = x + sentido; 

    }

    setInterval(actualizarPantalla,10);

</script>
1 respuesta
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Estudante!

En tu proyecto, el cuadro de fondo no se ve gris porque no estás llamando a la función fillRect en el lugar correcto. En este caso, estás llamando a fillRect antes de dibujar el círculo, lo que significa que el círculo está cubriendo el fondo gris. Para solucionar esto, simplemente mueve la llamada a fillRect al final de la función actualizarPantalla, después de dibujar el círculo. Debería verse así:

function actualizarPantalla(){
    limpiarPantalla();

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

    dibujarCirculo(x,20,10);
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0,0,600,400); 
}

¡Espero que esto te ayude a solucionar tu problema! ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)