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

[Duda] Dibujando cuadrados dinámicamente (quisiera ver si me pueden ayudar)

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Utilizando funciones y actividad Repetir código no es de buenos programadores

por BenjamínNájeraEspinosa
| 91k xp | 33 posts

Les dejo mi manera de hacerlo, pero me gustaría que me ayudaran a hacerlo de colores como en el ejemplo :(, no se cómo hacerlo

    <script>

let cuadros = parseInt(prompt("introduce el no# de cuadros que quieras"));
numcuadros = (cuadros*50)-50;


        function dibujarCuadroVerdeVertical(a, b) {
            let pantalla = document.querySelector('canvas');
            let pincel = pantalla.getContext('2d');

            for (let i = 0; i <= numcuadros; i += 50) {
                pincel.fillStyle = "red";
                pincel.fillRect(a, b + i, 50, 50);
                pincel.strokeStyle = "black";
                pincel.strokeRect(a, b + i, 50, 50);
            }
        }

        dibujarCuadroVerdeVertical(0, 0);

        </script>
1 respuesta
por Ronmel Fernando Nicolás Martínez Mondragón
| 103.5k xp | 43 posts

Mira, solo le modifiqué 2 cositas. 

let dato = parseInt(prompt("introduce el no# de cuadros que quieras"));
    cuadros = ((dato+1)*50)-50; 

        function dibujarCuadroVerdeVertical(a, b) {
            let pantalla = document.querySelector('canvas');
            let pincel = pantalla.getContext('2d');


            for (let i = 0; i<= cuadros; i++) {
                i+=50; 
                pincel.fillStyle = ((i % 2) != 0) ? "red" : "green"; //par= red impar= green
                pincel.fillRect(a+i, b , 50, 50);

                pincel.strokeStyle = "black";
                pincel.strokeRect(a+i, b , 50, 50);

            }
        }

        dibujarCuadroVerdeVertical(0,0);