Удаление значения из массива

Question

Я пытаюсь создать игру tic-tac-toe и столкнулся с проблемой, связанной с логикой.

var my_array = [a1, b1, c1, a2, b2, c2, a3, b3, c3]; 

window.compTurn = function() { 

var random = Math.floor(Math.random() * my_array.length); 

if (window.game.a1 == 1){ 
    //my_array.splice(0,1); 
    delete my_array[0]; 
    my_array.splice(random); 
} 

if (window.game.b1 == 1){ 
    //my_array.splice(1,1); 
    delete my_array[1]; 
    my_array.splice(random); 
} 

if (window.game.c1 == 1){ 
    //my_array.splice(2,1); 
    delete my_array[2]; 
    my_array.splice(random); 
} 

if (window.game.a2 == 1){ 
    //my_array.splice(3,1); 
    delete my_array[3]; 
    my_array.splice(random); 
} 

if (window.game.b2 == 1){ 
    //my_array.splice(4,1); 
    delete my_array[4]; 
    my_array.splice(random); 
} 

if (window.game.c2 == 1){ 
    //my_array.splice(5,1); 
    delete my_array[5]; 
    my_array.splice(random); 
} 

if (window.game.a3 == 1){ 
    //my_array.splice(6,1); 
    delete my_array[6]; 
    my_array.splice(random); 
} 

if (window.game.b3 == 1){ 
    //my_array.splice(7,1); 
    delete my_array[7]; 
    my_array.splice(random); 
} 

if (window.game.c3 == 1){ 
    //my_array.splice(8,1); 
    delete my_array[8]; 
    my_array.splice(random); 
} 

window.game = { a1:0, b1:0, c1:0, a2:0, b2:0, c2:0, a3:0, b3:0, c3:0}; 
console.log(my_array); 


}; 

В каждой коробке в игре есть буква и номер, присвоенный ей. Буква представляет собой строку, в которой находится поле в сетке, в то время как номер представляет, какую позицию занимает поле в каждом столбце. Как только пользователь захочет разместить свою метку в одном из девяти ящиков, эта опция вынимается из массива, и компьютер случайно выбирает ящик, в который помещается его метка. Проблема, с которой я столкнулся с проблемами, использующими методы массива delete и splice. Сначала я думал об использовании метода сплайсинга, чтобы извлечь значение из массива, но понял, что после того, как все позиции остальных значений будут сдвинуты, это приведет к тому, что остальная часть кода будет неправильной. Например, если a1 должно быть выведено из массива, b1 больше не может быть удалено с помощью кода my_array.splice (1,1). Чтобы это сработало, теперь код должен быть my_array.splice (0,1). Я воспользовался этим методом в пользу использования метода delete, потому что это означало бы, что после того, как значение будет удалено, «пространство» займет свое место, гарантируя, что позиция остальных значений останется прежней. Однако, как только я это сделал, я понял, что когда-нибудь наступит время для того, чтобы компьютер сделал свой ход, потому что он мог бы случайным образом выбрать «пространство» из новой линейки значений, что ничего не вызвало бы бывает.

Прошу прощения за длинную рецензию, но я хотел удостовериться, что я был настолько тщательным, насколько это возможно. Я бы очень признателен за второе мнение о том, какими могут быть мои другие варианты. Благодаря!

EDIT ** Я реализовал следующее решение, но время от времени появляется отрицательное («неопределенное») число, когда я console.log значение индекса случайного выбора компьютера: \ Кто-нибудь может знать, почему это произойдет?

my_array = ['a1', 'b1', 'c1', 'a2', 'b2', 'c2', 'a3', 'b3', 'c3']; 

window.compTurn = function() { 

var random = Math.floor(Math.random() * my_array.length); 

if (window.game.a1 == 1) { 
    my_array.splice(my_array.indexOf('a1'),1); 
    a1compChoice = my_array[random]; 
    console.log(a1compChoice); 
    console.log(my_array.indexOf(a1compChoice)); 
} 

if (window.game.b1 == 1){ 
    my_array.splice(my_array.indexOf('b1'),1); 
    b1compChoice = my_array[random]; 
    console.log(b1compChoice); 
    console.log(my_array.indexOf(b1compChoice)); 
} 

if (window.game.c1 == 1){ 
    my_array.splice(my_array.indexOf('c1'),1); 
    c1compChoice = my_array[random]; 
    console.log(c1compChoice); 
    console.log(my_array.indexOf(c1compChoice)); 
} 

if (window.game.a2 == 1){ 
    my_array.splice(my_array.indexOf('a2'),1); 
    a2compChoice = my_array[random]; 
    console.log(a2compChoice); 
    console.log(my_array.indexOf(a2compChoice)); 
} 

if (window.game.b2 == 1){ 
    my_array.splice(my_array.indexOf('b2'),1); 
    b2compChoice = my_array[random]; 
    console.log(b2compChoice); 
    console.log(my_array.indexOf(b2compChoice)); 
} 

if (window.game.c2 == 1){ 
    my_array.splice(my_array.indexOf('c2'),1); 
    c2compChoice = my_array[random]; 
    console.log(c2compChoice); 
    console.log(my_array.indexOf(c2compChoice)); 
} 

if (window.game.a3 == 1){ 
    my_array.splice(my_array.indexOf('a3'),1); 
    a3compChoice = my_array[random]; 
    console.log(a3compChoice); 
    console.log(my_array.indexOf(a3compChoice)); 
} 

if (window.game.b3 == 1){ 
    my_array.splice(my_array.indexOf('b3'),1); 
    b3compChoice = my_array[random]; 
    console.log(b3compChoice); 
    console.log(my_array.indexOf(b3compChoice)); 
} 

if (window.game.c3 == 1){ 
    my_array.splice(my_array.indexOf('c3'),1); 
    c3compChoice = my_array[random]; 
    console.log(c3compChoice); 
    console.log(my_array.indexOf(c3compChoice)); 
} 

console.log(my_array); 
window.game = { a1:0, b1:0, c1:0, a2:0, b2:0, c2:0, a3:0, b3:0, c3:0}; 

}; 

@Roberto Спасибо за отзывы, но, к сожалению, я не имею возможности манипулировать классы CSS: \

Answer 1

В качестве альтернативы для использования массива, вы могли бы рассмотреть с помощью классов CSS. В этом примере квадраты отмечены заполненными добавлением имени класса. Класс также может использоваться для установки цвета и события текста квадрата, т. Е. «X» или «O». Используя querySelectorAll(), компьютер может получить список оставшихся неиспользуемых квадратов и произвольно выбрать один из них. Получайте удовольствие от своего проекта.

Выполните фрагмент и нажмите квадрат, чтобы попытаться

window.tic.addEventListener('click', function(e) { 
 

 
    // if user clicks a filled square then do nothing 
 
    if (e.target.classList.contains('filled')) return; 
 

 
    // select the square that user clicked 
 
    e.target.classList.add('filled', 'X'); 
 

 
    // get list of unfilled squares 
 
    var squares = document.querySelectorAll('td:not(.filled)'); 
 

 
    // computer randomly selects one 
 
    if (squares.length) { 
 
    var n = Math.floor(Math.random() * squares.length); 
 
    squares[n].classList.add('filled', 'O'); 
 
    } else { 
 
    window.msg.innerHTML = 'Game Over'; 
 
    } 
 

 
});

table { 
 
    border-collapse: collapse; 
 
    font-size: 24px; 
 
    font-family: sans-serif; 
 
    background-color: aliceblue; 
 
} 
 
td { 
 
    border: 1px solid black; 
 
    height: 2em; 
 
    width: 2em; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    cursor: default; 
 
} 
 
.X::before { 
 
    content: "X"; 
 
    color: red; 
 
} 
 
.O::before { 
 
    content: "O"; 
 
    color: blue; 
 
}

<table id="tic"> 
 
    <tr><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td></tr> 
 
</table> 
 
<div id="msg">Tic-Tac-Toe</div>