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

271

04 марта 2017, 04:41

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

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

$(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; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="board"> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
</div>

Answer 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; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="board"> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
</div>

Answer 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; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="board"> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
  <div class="board-cell"></div> 
</div>

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