1

a ver siento que no he explicado antes realmente bien el objetivo de la pregunta así que he decidido volver a formularla de una forma más gráfica. introducir la descripción de la imagen aquí

Eso es lo que representa mi codigo actualmente. El objetivo es que la variable local LibrosXestante diga exactamente eso, cuantos libros por estante hay. Tengoq ue hacer un bucle que imprima un total de 3 libros por estante. Cuando haya más libros de los que caben en el primer estante (3), que ahora mismo no hay, pero los habrá, el libro numero 4 (3 en el array de la variable objeto book) debe aparecer en una segunda balda. Si cambiamos y ponemos 2 en la variable local LibrosXestante, dos aparecerian en el de arriba y otros dos en el de abajo. Creo que ahora si ha quedado mucho más claro lo que quiero hacer. Este es el código que tengo hecho hasta ahora:

var LibrosXestante= 3;
var book = [

    //libro N1
    {
    title: "The Giver",
    stars: 4},



     //libro N2
    {
    title: "Hola",
    stars: 3
    }
];

// draw shelf
fill(173, 117, 33);
rect(0, 120, width, 10);


// draw book
for (var i = 0; i < book.length; i++) {
   fill(214, 255, 219);
    rect(10, 20, 90, 100); 
    fill(0, 0, 0);
    text(book[0].title, 15, 29, 70, 100);
}

for (var i = 0; i < book[0].stars; i++) {
    image(getImage("cute/Star"), 13 + i * 20, 90, 20, 30);
}

Se que tiene que ser con ese bucle for y de hecho creo que me imprime los dos libros, pero creo que lo hace uno encima de otro y por eso no se ve ¿como puedo hacer para que se vayan desplazando?

1

1 respuesta 1

2

He estado trasteando en Khan academy y creo que tengo algo que podría servirte (se puede mejorar pero te da una idea básica). En los comentarios he puesto a grandes rasgos lo que voy haciendo. Espero que te sirva:

var LibrosXestante= 3;

var book = [{
    title: "The Giver 1",
    stars: 4
},
{
    title: "The Giver 2",
    stars: 3
},
{
    title: "The Giver 3",
    stars: 1
},
{
    title: "The Giver 4",
    stars: 5
},
{
    title: "The Giver 5",
    stars: 4
}];

var y = 140;
// Pintar estantes
for (var i = 0; i < ceil(book.length/LibrosXestante); i++) {
    fill(173, 117, 33);
    rect(0, y, width, 10);
    y = y + 150;
}
//Variable para contar los libros impresos
var booksPrinted = 0;

//Función para pintar libro
var pintarLibro = function(xBook,yBook,i) {
    fill(214, 255, 219);
    rect(10 + xBook, yBook, 90, 115); 
    fill(0, 0, 0);
    text(book[i].title, 15 + xBook, yBook+5, 60, 100);
    //Si no hemos llegado al máximo de libros por estante sumamos uno
    if(booksPrinted<LibrosXestante){
        booksPrinted++;
    }
};

//Función para pintar las estrellas
var pintarEstrellas = function(i,yStars,xStars){
    for (var j = 0; j < book[i].stars; j++) {
        image(getImage("cute/Star"), (xStars + j * 15), yStars, 20, 30);
    }
};

var yBook = 25;
var xBook = 0;
var yStars = 110;
var xStars = 15;

// draw books
for (var i = 0; i < book.length; i++) {
    //Si hemos llegado al máximo de libros impresos saltamos de estante 
    //y reinicializamos las variables
    if(booksPrinted>=LibrosXestante){
        yBook = yBook + 150;
        xBook = 0;
        yStars = yStars + 150;
        xStars = 15;
        //Inicializamos de nuevo los libros impresos
        booksPrinted = 0;
    }
    pintarLibro(xBook,yBook,i);
    pintarEstrellas(i,yStars,xStars);
    xStars = xStars + 100;
    xBook = xBook + 100;
}

El resultado para 3 libros quedaría así:

introducir la descripción de la imagen aquí

2
  • Sí, es precisamente esto lo que necesitaba, muchas gracias!!! Commented el 11 ene. 2019 a las 11:27
  • Si te parece correcta te agradecería que seleccionaras las respuesta como válida ;)
    – Kiko_L
    Commented el 11 ene. 2019 a las 11:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.