从数组中删除值

Question

I'm trying to create a tic-tac-toe game and have encountered a snag regarding the logic.

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


};

Each box in the game has a letter and a number assigned to it. The letter represents which row the box is in in the grid while the number represents which position the box occupies in each column. Once the user chooses to place their mark on the one of the nine boxes, that option is taken out of the array and the computer will randomly choose a box in which to place its mark. The issue that I've run into concerns using the array methods delete and splice. I thought initially of using the splice method to take a value out of the array but realized that once it did all the positions of the remaining values would shift, which would render the rest of the code incorrect. For instance, if a1 were to be taken out of the array, b1 can no longer be removed using the code my_array.splice(1,1). In order for this to work, the code would now have to be my_array.splice(0,1). I scraped that approach in favor of using the delete method because this would mean that once an value was removed, a "space" would take it's place, ensuring that the position of the rest of the values would remain the same. Once I did this, however, I realized that I would run into another issue once it came time for the computer to make its move because it could potentially randomly choose a "space" from the new lineup of values, which would not trigger anything to happen.

I'm sorry for the long write-up but I wanted to make sure I was being as thorough as possible. I would really appreciate a second opinion on what my other options could be. Thanks!

EDIT** I implemented the following solution but every once in a while a negative ("undefined") number shows up when I console.log the index value of the computer's random choice :\\ Would anyone happen to know why this would happen?

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 Thanks for the feedback but unfortunately I don't have the option of manipulating CSS classes :\\

Answer 1

As alternative to using an array, you might consider using CSS classes. In the example, squares are marked filled by adding a class name. The class can also be used to set the colour and event the text of the square, ie, a "X" or "O". Using querySelectorAll() , the computer can get a list of remaining unused squares and randomly select one. Have fun with your project.

Run the snippet and click a square to try

 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>