Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

Dibujar cuadros horizontalmente (No me funciona)

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Utilizando funciones y actividad Una función más genérica

por Daniel Andrés Roa Aponte
| 44.7k xp | 18 posts

Intenté que se diagramaran los cuadros uno tras otro con FOR pero no lo logré, me podréan compartir su punto de vista?

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

<script>

    function dibujarCuadrado(espacio){
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        var numeroCuadros = 3;
        var espacio = 0

        pincel.fillStyle = "green"
        pincel.fillRect(espacio,0,50,50);
        pincel.strokeStyle = "black";
        pincel.strokeRect(espacio,0,50,50);
    }

    for(var columnas = 1; columnas <= numeroCuadros; columnas++){
        for(espacio ; espacio <=600; espacio+50)
        dibujarCuadrado(espacio);
    }

</script>
2 respuestas
solución!
por Maitena Escalada Palma
| 58.5k xp | 3 posts

Hola buenas, las variables de numeroCuadros y espacio las deberías inicializar por fuera de tu función, ya que las utiliza el for. Además en el 2do for estas haciendo espacio+50 y debería ser espacio = espacio + 50 o espacio+=50 , de esa forma estarías incrementando 50 en cada iteración. Corrigiendo eso debería andar.

por Daniel Andrés Roa Aponte
| 44.7k xp | 18 posts

Gracias Maitena, con lo que me comentaste y un ajuste más en el segundo parametro del segundo for ya funciona, te comparto

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

<script>

    var numeroCuadros = 6;
    var espacio = 0

    function dibujarCuadrado(espacio){
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.fillStyle = "green"
        pincel.fillRect(espacio,0,50,50);
        pincel.strokeStyle = "black";
        pincel.strokeRect(espacio,0,50,50);
    }

    for(var columnas = 1; columnas <= numeroCuadros; columnas++){
        for(espacio ; espacio < numeroCuadros*50; espacio+=50)
        dibujarCuadrado(espacio);
    }

</script>