Как предотвратить генерирование случайно сгенерированных изображений в таблице на одной и той же <td>?

Question

Я создал таблицу с 12 случайно сгенерированными <td>, которая будет препятствием для настольной игры. Затем я создал случайного игрока на левой стороне доски. После определенного количества обновлений игрок генерирует на вершине препятствия. Как я могу предотвратить генерацию этих <td> друг над другом? Вот код:

//create 10X10 table 
let board = $('#board');
for (i = 0; i < 10; i++) {
    let row = $('<tr>')`enter code here`
    .addClass('row');

    for (j = 0; j < 10; j++) {
        let col = $('<td>')
        .addClass('col')
        row.append(col);
    };
    board.append(row);
};

//generate 12 obstacles 
let obstacleArr = [];
while (obstacleArr.length < 12) {
    let randomNum = Math.floor(Math.random() * 100 + 1);
    if (obstacleArr.indexOf(randomNum) === -1) {
        obstacleArr.push(randomNum);
    }
    let randomtd = $('#board td').eq(randomNum);

    randomtd.addClass('block'); //adds class with image to random <td> 

}

//randomly generate 1st player on left 
let player1Arr = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]

let randomNum = player1Arr[Math.floor(Math.random() * player1Arr.length)];

let randomtd = $('#board td').eq(randomNum);

randomtd.addClass('playerOne'); //* here is problem. how do i ensure it does not generate on a gray obstacle? 

JSBIN ссылка.

Answer 1

Это потому, что вы генерировали неуникальные случайные числа

JSBin: https://jsbin.com/balodanage/edit?html, css, js, вывод

Попробуйте следующий подход

//create 10X10 table 
    let board = $('#board');
    for (i = 0; i < 10; i++) {
        let row = $('<tr>')
        .addClass('row');

        for (j = 0; j < 10; j++) {
            let col = $('<td>')
            .addClass('col')
            row.append(col);
        };
        board.append(row);
    };
    function generateRandomNumber(){
       let randomNum = Math.floor(Math.random() * 100 + 1);
        if (obstacleArr.indexOf(randomNum) == -1) {
            obstacleArr.push(randomNum);
            return randomNum;
        }
        else{
          return generateRandomNumber();
        }
    }
    function generatePlaceForPlayer(player){
        let arr=(player=='player1')?player1Arr:player2Arr;    
        let random=arr[Math.floor(Math.random() * arr.length)];
        if(obstacleArr.indexOf(random) == -1){ 
            return random;
        }
        else
        {
          return generatePlaceForPlayer(player);
        }
    }

    //generate 12 obstacles 
    let obstacleArr = [];
    while (obstacleArr.length < 12) {
        let randomtd = $('#board td').eq(generateRandomNumber());
        randomtd.addClass('block'); //adds class with image to random <td> 

    }
    let player1Position,player2Position;
    //randomly generate 1st player on left 
    let player1Arr = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
    let randomNum = generatePlaceForPlayer('player1');
    let randomtd = $('#board td').eq(randomNum);

    randomtd.addClass('playerOne'); //adds class with image to random <td> 


    //randomly generate 2nd player on right 
    let player2Arr = [9, 19, 29, 39, 49, 59, 69, 79, 89, 99]

    let randomNu = generatePlaceForPlayer('player2');
    let randomt = $('#board td').eq(randomNu);

    randomt.addClass('playerTwo');