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
Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

[Duda] Cuadrados modificados para hacer cuadrícula

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 Jose Arturo Herrera Badilla
| 53.2k xp | 8 posts
Técnico Servicio Civil

Alguien que me pueda ayudar con esto?

Lo que deseo es que al yo ingresar la cantidad de columnas y filas me genere una cuadricula, es decir que multiplique el largo por el ancho y me devuelva esa cantidad de cuadros. Creo que lo que no logro realacionar es que a la hora de que aumenta la fila; ahí debo aplicar de nuevo el código de creación de columnas. Adjunto el código :

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


</canvas>

<script>


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


      var columnas= parseInt(prompt("Cuantas columnas deseas dibujar?"));
      var filas = parseInt(prompt("Cuantas filas deseas dibujar?"));

    var inicial = 0;
    for (inicio = 1; inicio <= columnas; inicio++) {

        pincel.fillStyle = "lightblue";
        pincel.fillRect(inicial,0,50,50);
        pincel.strokeStyle = "black";
        pincel.strokeRect(inicial,0,50,50)

        var siguiente = inicial + 50;
        var inicial = siguiente


    var inic = 0;
    for (inici = 1; inici <= filas; inici++) {

        pincel.fillStyle = "lightblue";
        pincel.fillRect(0,inic,50,50);
        pincel.strokeStyle = "black";
        pincel.strokeRect(0,inic,50,50)

        var siguient = inic + 50;
        var inic = siguient


    }



    }







}



dibujar_cuadrados()

</script>
1 respuesta
solución!
por David Blanc
| 129.3k xp | 22 posts

Buenas...

Para lograr lo que deseas, debes mover el código que dibuja las filas dentro del código que dibuja las columnas. De esta manera, se dibujará una fila por cada columna dibujada. Además, como el código está escrito en JavaScript, debes utilizar la palabra clave let en lugar de var para declarar las variables inic y inici, ya que esto te permitirá utilizar el mismo nombre de variable en ambos bucles sin tener conflictos.

El código quedaría de la siguiente manera:

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

  var columnas = parseInt(prompt("Cuantas columnas deseas dibujar?"));
  var filas = parseInt(prompt("Cuantas filas deseas dibujar?"));

  var inicial = 0;
  for (inicio = 1; inicio <= columnas; inicio++) {
    // Dibuja una fila por cada columna dibujada
    let inic = 0;
    for (inici = 1; inici <= filas; inici++) {
      pincel.fillStyle = "lightblue";
      pincel.fillRect(inicial, inic, 50, 50);
      pincel.strokeStyle = "black";
      pincel.strokeRect(inicial, inic, 50, 50);

      let siguient = inic + 50;
      inic = siguient;
    }

    pincel.fillStyle = "lightblue";
    pincel.fillRect(inicial, 0, 50, 50);
    pincel.strokeStyle = "black";
    pincel.strokeRect(inicial, 0, 50, 50);

    let siguiente = inicial + 50;
    inicial = siguiente;
  }
}

dibujar_cuadrados();