从数组中删除值

Question

我正在尝试创建一个井字棋游戏，并且遇到了关于逻辑的障碍。

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从数组中取出，则不能再使用代码my_array.splice（1,1）来删除b1。为了这个工作，代码现在必须是my_array.splice（0,1）。我刮掉了这种方法，主张使用删除方法，因为这意味着一旦删除了一个值，“空间”就会占据它的位置，从而确保其余值的位置保持不变。然而，一旦我这样做了，我意识到，一旦计算机开始动作，我会遇到另一个问题，因为它可能会随机从新的值列表中随机选择一个“空间”，这将不会触发任何发生。

对于长篇报道我很抱歉，但我想确保我尽可能地做到尽善尽美。对于我的其他选择可能是什么，我真的很感激。谢谢！

编辑** 我实现了下面的解决方案，但是每当我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>