I made a simple version of the game tic tac toe. When you click on a cell, a cross appears in it and a function is called to put a zero randomly.

I added the condition that if the cell is not empty, then put nothing. With a cross it works, but with zero. If the cell is busy, then it does not put anything at all. How can I fix this normally?

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

    2 answers 2

    It is possible so:

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

    • Thank you so much :) - user238931
    • Everything is brilliantly simple - Yuri
    • @Yuri, but not very effective. However, no worse than in the question. - Qwertiy ♦

    I would do that if a repetition is found, then run the bot function again and so on until there is an empty cell. You also need to add a variable so that the end would not create an eternal function

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

    And I redid your randomly by changing the maximum number to "9"

    • Thanks a lot :) - user238931