我正在進行四局連通游戲，現在我可以將芯片放入適當的插槽中，也可以從紅籌變為黃籌。但是，當您放下芯片時，它不會進入電路板。它位于板的外部。我希望被丟棄的芯片落在每個插槽內的深藍色圓圈上，并落在插槽本身之下。因此，它看起來很逼真的3D效果。我以為我可以使用z-index做到這一點，但是我有2個問題。1st當我將div槽設置為3的z-index時，即使下降的籌碼的z-index為2；芯片仍然掉在插槽上嗎？第二，即使確實可行，由于div的z索引較高，每個槽口中的深藍色圓圈現在也將被隱藏，但它們必須保持相同才能使它們都可見。但是，如果它們相同，那么芯片不能落入電路板中嗎？關于如何產生這種效果的任何想法？//grab all slot positions on the boardconst slots = document.querySelectorAll('.board div');let player = 'p1';let board = [     0, 1, 2, 3, 4, 5, 6,    7, 8, 9, 10, 11, 12, 13,    14, 15, 16, 17, 18, 19, 20,    21, 22, 23, 24, 25, 26, 27,    28, 29, 30, 31, 32, 33, 34,    35, 36, 37, 38, 39, 40, 41,]//assign a class to each slot to represent its positionfor(let i = 0; i < slots.length; i++) {    //add class to each div    slots[i].classList.add('c' + i);    //add the slot to each div    let slot = document.createElement('span');    slots[i].appendChild(slot);    //add the function with the game logic to each slot    slots[i].addEventListener('click', runGame); }function runGame() {    //figure out which column the selected slot sits in    const slotColumn = (Number(this.className.slice(1, 3)) % 7);    //create an array to store all the slots that share the above column    const columnArray = [];    //grab all the slots that sit in that column    for(let i = 0; i < board.length; i++) {        if(board[i] % 7 === slotColumn) columnArray.push(board[i]);    }    //drop chip in the chosen column    dropChip(columnArray);    function dropChip(column) {        //select bottom most slot that's available in the column        for(let i = column.length - 1; i >= 0; i--) {            if(column[i] !== 'p1' || column[i] !== 'p2') {                board[column[i]] = player;                slots[column[i]].classList.add(player);                switchPlayer(player);                break;            }           }        function switchPlayer(currentPlayer) {            if(currentPlayer === 'p1') player = 'p2';            else if(currentPlayer ==='p2') player = 'p1';        }    }}