Я сделал простую версию игры крестики нолики. При нажатии на ячейку, в ней появляется крестик и вызывается функция, что бы поставить нолик рандомно.
Я добавил условие, что если ячейка не пустая, то ничего не ставить. С крестиком это срабатывает, а вот с ноликом нет. Если ячейка занята то оно ничего вообще не ставит. Как можно нормально это поправить?
$(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;
}
Ответ
Можно так:
$(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;
}
Комментариев нет:
Отправить комментарий