从数组中删除值

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);


};

游戏中的每个方框都有一个字母和一个分配给它的编号。该字母表示该框在网格中的哪一行，而该数字表示该框在每列中占据的位置。一旦用户选择将标记放在九个盒子中的一个上，该选项就从阵列中取出，计算机将随机选择一个用于放置其标记的盒子。我遇到的问题是使用数组方法删除和拼接。我认为最初使用splice方法从数组中取出一个值但是意识到一旦它完成，剩下的值的所有位置都会移位，这将导致代码的其余部分不正确。例如，如果要从数组中取出a1，则无法再使用代码my_array.splice（1,1）删除b1。为了使其工作，代码现在必须是my_array.splice（0,1）。我删除了这种方法，转而使用delete方法，因为这意味着一旦删除了一个值，就会出现一个＆＃34;空格＆＃34;会占据它的位置，确保其余值的位置保持不变。然而，一旦我这样做了，我就意识到，一旦计算机完成移动，我就会遇到另一个问题，因为它可能会随机选择一个＆＃34;空间＆＃34;来自新的价值阵容，这不会触发任何事情发生。

我很抱歉长篇大论，但我想确保尽可能彻底。我真的很感激我的其他选择可以是第二种意见。谢谢！

编辑** 我实现了以下解决方案但偶尔会出现一个负数（＆＃34;未定义＆＃34;）数字，当我在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类。在该示例中，通过添加类名来标记填充正方形。该类还可用于设置方形文本的颜色和事件，即＆＃34; X＆＃34;或者＆＃34; O＆＃34;。使用querySelectorAll()，计算机可以获得剩余未使用的方块列表并随机选择一个。玩得开心。

运行代码段并点击一个方块以尝试

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;