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
1
respuesta

Banderas peruanas :D

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Utilizando funciones y actividad Las iteraciones son fantásticas

por Rody Josimar Retuerto Niño
| 56.5k xp | 9 posts

No sé si les pasa que quieren hacer una bandera de su país, en mi caso intenté hacer una usando el ciclo FOR y una función. Pero me doy cuenta que mi codigo no es tan eficiente porque repito varias veces al crear los cuadrados, es decir la cantidad de líneas que debo crear para que salgan por lo menos 3 filas de banderas. Si alguien puede mejorarlo lo comenta, muy agradecido.


<canvas width="600" height="400"> </canvas>
<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    function dibujarCuadrado(x,y,color){
    pincel.fillStyle= color;
    pincel.fillRect(x,y,50,50);
    pincel.strokeStyle = "black"; //borde, color negro
    pincel.strokeRect(x,y,50,50); //crear borde alrededor 
    }

    function banderas() {
                for (projo = 0; projo < 600; projo=projo+100){
                    dibujarCuadrado(projo,0,"red");
                    dibujarCuadrado(projo,50,"red");
                    dibujarCuadrado(projo,100,"red");
                }

                for (pblanco = 50; pblanco < 550; pblanco=pblanco+100){
                    dibujarCuadrado(pblanco,0,"white");
                    dibujarCuadrado(pblanco,50,"white");
                    dibujarCuadrado(pblanco,100,"white");
                }
    }

   banderas();


</script>
1 respuesta
por Priscila Storck
| 629.5k xp | 1914 posts

Hola Rody, espero que estés bien.

Gracias por compartir tu código con nosotros. Entiendo que quieres mejorar la eficiencia de tu código para crear las banderas peruanas. Una forma de hacerlo es utilizando un ciclo anidado dentro del ciclo FOR existente. De esta manera, puedes crear las filas de cuadrados de manera más eficiente. Te muestro un ejemplo a continuación:

<canvas width="600" height="400"> </canvas>
<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    function dibujarCuadrado(x, y, color){
        pincel.fillStyle = color;
        pincel.fillRect(x, y, 50, 50);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y, 50, 50);
    }

    function banderas(){
        for (var fila = 0; fila < 3; fila++){
            for (var columna = 0; columna < 6; columna++){
                if (fila % 2 == 0){
                    if (columna % 2 == 0){
                        dibujarCuadrado(columna * 50, fila * 50, "red");
                    } else {
                        dibujarCuadrado(columna * 50, fila * 50, "white");
                    }
                } else {
                    if (columna % 2 == 0){
                        dibujarCuadrado(columna * 50, fila * 50, "white");
                    } else {
                        dibujarCuadrado(columna * 50, fila * 50, "red");
                    }
                }
            }
        }
    }

    banderas();
</script>

En este ejemplo, he utilizado dos ciclos FOR anidados para crear las filas y columnas de cuadrados. Además, he utilizado una estructura condicional para alternar los colores de los cuadrados y crear las banderas peruanas.

Si aun te quedan dudas, aquí estaremos para apoyarte.

¡Saludos!

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