如何防止桌子上隨機生成的圖像在同一台上生成<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,output

嘗試以下方法

//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');