Рандом в крестиках ноликах

#javascript #jquery

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

Я добавил условие, что если ячейка не пустая, то ничего не ставить. С крестиком это
срабатывает, а вот с ноликом нет. Если ячейка занята то оно ничего вообще не ставит.
Как можно нормально это поправить?



$(function() {
  var bot = function() {
    var cell = Math.floor(Math.random() * (10 - 1)) + 1;
    
    if( $('.board-cell').eq(cell).text() == '' ) $('.board-cell').eq(cell).text( 'O' );
  };

  $('.board-cell').click(function() {
    if( $(this).text() == '' ){
      $(this).text( 'X' );
      bot();
    };
  });
});
.board {
  display: flex;
  flex-wrap: wrap;
  width: 153px;
  height: 153px;
  border-left: 1px solid black;
  border-top: 1px solid black;
}

.board-cell {
  width: 50px;
  height: 50px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  cursor: pointer;
}



  

  

  

  

  

  

  

  

  





    

Ответы

Ответ 1

Можно так:



$(function() {
  function bot() {
    var $cells = $('.board-cell:empty');
    var i = Math.floor(Math.random() * $cells.length);
    $cells.eq(i).text( 'O' );
  };

  $('.board-cell').click(function() {
    if( $(this).text() == '' ){
      $(this).text( 'X' );
      bot();
    };
  });
});
.board {
  display: flex;
  flex-wrap: wrap;
  width: 153px;
  height: 153px;
  border-left: 1px solid black;
  border-top: 1px solid black;
}

.board-cell {
  width: 50px;
  height: 50px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  cursor: pointer;
}



  

  

  

  

  

  

  

  

  




Ответ 2

Я бы сделал, что если найден повтор, то снова запускать функцию bot и так до тех
пор, пока не будет пустая ячейка. Так же нужно добавить переменную, что бы конце не
создалась вечная функция



$(function() {
  var c = 0;
  
  var bot = function() {
    var cell = Math.floor(Math.random() * (9 - 1)) + 1;
    
    if( $('.board-cell').eq(cell).text() === '' ){
      $('.board-cell').eq(cell).text( 'O' );
      
      c++;
    }else{
      if(c !== 9){
        bot();
      };
    };
  };

  $('.board-cell').click(function() {
    if( $(this).text() == '' ){
      $(this).text( 'X' );
      
      c++;
      
      bot();
    };
  });
});
.board {
  display: flex;
  flex-wrap: wrap;
  width: 153px;
  height: 153px;
  border-left: 1px solid black;
  border-top: 1px solid black;
}

.board-cell {
  width: 50px;
  height: 50px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  cursor: pointer;
}



  

  

  

  

  

  

  

  

  






И я немного ваш рандом переделал, изменив максимальное число на "9"