Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Proyecto] poster de creeper, me tomé la libertad de hacerlo a mi manera, espero les guste

<canvas width="800" height="800">

</canvas>

<script>

    var screen = document.querySelector("canvas");
    var brush = screen.getContext("2d");
    var colors = ["#bfdcb9", "#92C98E", "#43AE35", "#1B9F15", "#97CF8E", "#288E20", "#4E9B48"];

    function painter (){

        for(var x = 0; x <= 750; x += 50){
            for(var y = 0; y <= 750; y += 50){
                brush.fillStyle = colors[Math.floor(Math.random() * colors.length)];
                brush.fillRect(x,y,50,50);
            }

        }
    }

    painter();

    brush.fillStyle = "black";
    //eyes
    brush.fillRect(250,250,100,100);
    brush.fillRect(450,250,100,100);
    //nose
    brush.fillRect(350,350,100,100);
    brush.fillRect(300,400,200,100);
    //mouth
    brush.fillRect(300,500,50,50);
    brush.fillRect(450,500,50,50);

</script>

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadquería que tuviera la estetica del juego e hice una función para pintar de un color diferente cada sección del lienzo que hice de 800x800, cada vez que recargas la página genera un fondo diferente.

1 respuesta

¡Hola Emanuel!

¡Qué genial que hayas creado un poster de creeper! Me encanta que hayas utilizado lógica de programación para hacerlo.

En cuanto a tu código, veo que has utilizado canvas y has creado una función llamada painter que pinta diferentes secciones del lienzo con colores aleatorios. Me parece muy interesante que cada vez que se recarga la página, se genera un fondo diferente.

Además, has agregado los ojos, la nariz y la boca del creeper utilizando la función fillRect de canvas.

En general, tu código se ve muy bien y es una buena práctica para seguir mejorando tus habilidades en lógica de programación.

¡Espero haber ayudado y buenos estudios!