Проблема с while l oop - генерировать случайные карты - PullRequest
Новая
       41

Проблема с while l oop - генерировать случайные карты

0 голосов
/ 16 июня 2020 

const cards = document.querySelectorAll('.card');
const cardColor = ['red', 'orange', 'yellow', 'lime', 'green', 'blue', 'lightblue', 'violet', 'pink'];

const findCards = (index) => {
    return document.querySelectorAll('.'+cardColor[index]).length;
}

const randomNum = () => {
    return Math.floor(Math.random()*(8));
}

document.addEventListener('DOMContentLoaded', e => {
    for(let i = 0; i<cards.length; i++){
        let currRandomNum = randomNum();
        if(findCards(currRandomNum)>=2){
            do{
                currRandomNum = randomNum();
                console.log('card no.: '+(i+1), 'current num: '+currRandomNum, 'cards with this color: '+findCards(currRandomNum), 'color: '+cardColor[currRandomNum] , 'is more than 2: '+findCards(currRandomNum)<2);
                if(findCards(currRandomNum)<2){
                    cards[i].classList.add(cardColor[currRandomNum]);
                    break;
                }
            }while(findCards(currRandomNum)<2);
        }else{
            cards[i].classList.add(cardColor[currRandomNum]);
        }
    }
});
html,
body{
    width: 100vw;
    height: 100vh;
    margin: 0 !important;
    overflow: hidden;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.game{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}

.card{
    position: relative;
    flex-basis: 15%;
    flex-grow: 1;
    height: 33.33vh;
    border: 5px solid white;
    background-color: black;
}

.red{
    background-color: red;
}

.orange{
    background-color: orange;
}

.yellow{
    background-color: yellow;
}

.lime{
    background-color: lime;
}

.green{
    background-color: green;
}

.blue{
    background-color: blue;
}

.lightblue{
    background-color: lightblue;
}

.violet{
    background-color: violet;
}

.pink{
    background-color: pink;
}
<section class="game">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</section>

Я хочу создать скрипт, который генерирует случайные карты с другими цветами. Проблема в том, что while l oop выполняется каждый раз только один раз. 

[Codepen](https://codepen.io/xKeiR/pen/WNrGqpp)
...