samedi 18 novembre 2017

Use a random array of div in JavaScript with probability

I try to do a script in JavaScript where I try to do a building with random wall, door, window and decoration (and random floors)

I do it on http://ift.tt/2hJuZDt

But I try to add a probabilty of : more probability of door and probability of window not null on downstairs more probability of window and probability of door not null on upstairs I got the condition where upstairs and downstairs.

Here my JS code:

(function(){
    let container = document.querySelector('.container-building');
    let floorsContainer = document.querySelector('.floor');
    let floors = getRandomArbitrary(2, 10);
    let door = '';
    let windows = '';

    // wall : class wall
    // door class door
    // window class window
    // decoration class deco

    let items = Array(
        '<div class="window"></div>',
        '<div class="door"></div>',
        '<div class="wall"></div>',
        '<div class="deco"></div>'
    );

    let randomElementContainer = '';

    for (let i=0; i<floors; i++)
    {
        let randomElements = getRandomArbitrary(0, 10);
        let widthFigureBuilding = getRandomArbitrary(80, 100);

        let floorsBy2 = floors/2;

        for (let j=0;j<randomElements;j++) {

            if (i>=0 && i<floorsBy2) {  // downstairs
                randomElementContainer = randomElementContainer + items[Math.floor(Math.random()*items.length)];
            }

            if (i>=floorsBy2) { // upstairs
                randomElementContainer = randomElementContainer + items[Math.floor(Math.random()*items.length)];
            }
        }

        let figureBuilding = document.createElement('div');

        figureBuilding.innerHTML = 
        '<div class="floor '+ i +'">'+ randomElementContainer +'</div>';

        figureBuilding.style.width = widthFigureBuilding + '%';

        container.appendChild(figureBuilding);

        randomElementContainer = '';
    }


    function getRandomArbitrary(min, max) {
        return Math.random() * (max - min) + min;
    }
})();

Can you help me?




Aucun commentaire:

Enregistrer un commentaire