我无法从数组中删除特定元素

Question

<table>
                <tbody>
                    <tr>
                        <td><button class="btn-in"></button></td>
                        <td><button class="btn-in"></button></td>
                        <td><button class="btn-in"></button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-in"></button></td>
                        <td><button class="btn-in"></button></td>
                        <td><button class="btn-in"></button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-in"></button></td>
                        <td><button class="btn-in"></button></td>
                        <td><button class="btn-in"></button></td>
                    </tr>
                </tbody>
            </table>

我为所有按钮创建了数组

var btnIns = document.querySelectorAll(".btn-in");

然后我写了这个

var arrForPcTurns = [...btnIns];

所以 btnIns 和 arrForPcTurns 必须有相同的值

然后我尝试从 arrForPcTurns 数组中删除特定元素

btnIns.forEach(obj => {
    // obj.addEventListener("click", function () {
    //     if (counter % 2 != 0) {
    //         sign = player;
    //         turn.textContent = "PC Turn";
    //     } else {
    //         sign = PC;
    //         turn.textContent = "Your Turn";
    //     }

    //     this.textContent = sign;
    //     counter++;

    //     if (obj != "") {
    //         this.style.cursor = "not-allowed";
    //         this.disabled = true;
    //     }

    //     if (counter == 10) {
    //         setTimeout(function () {
    //             reloadBtn.classList.remove("display-none");
    //             alert("Draw");
    //         }, 400);
    //     }

    //     checkWinProbablity();
        arrForPcTurns.splice(arrForPcTurns.indexOf(this));
    });
});

但是单击它会从数组中删除所有 9 个元素我该怎么办？

Answer 1

这就是拼接的工作方式
让 myArray= [1, 2, 3, 4, 5];
让 deletedArray = myArray.splice(0, 3);
以下语句从第一个元素开始删除 myArray 的三个元素。
myArray现在包含两个元素。 // [4, 5]

splice(第一个要删除的项目的position，要删除的项目数)

 var btnIns = document.querySelectorAll(".btn-in"); var arrForPcTurns = [...btnIns]; console.log(arrForPcTurns); btnIns.forEach(obj => { obj.addEventListener("click", function () { arrForPcTurns.splice(arrForPcTurns.indexOf(this,1)); console.log(arrForPcTurns); }) });

 <table> <tbody> <tr> <td><button class="btn-in"></button></td> <td><button class="btn-in"></button></td> <td><button class="btn-in"></button></td> </tr> <tr> <td><button class="btn-in"></button></td> <td><button class="btn-in"></button></td> <td><button class="btn-in"></button></td> </tr> <tr> <td><button class="btn-in"></button></td> <td><button class="btn-in"></button></td> <td><button class="btn-in"></button></td> </tr> </tbody> </table>

Answer 2

如果您正在设计井字游戏，则需要跟踪当前turn和done的 state。 您可以抓取矩阵并获取每个按钮（单元格）的播放器数据，以确定该单元格是否可用。

在玩家决定在哪里放置标记后，您可以让 AI 玩家分析当前的棋盘并采取行动。

这是查找第一个可用单元格的基本扫描：

const handleAI = (game, player) => {
   updateInfo(`Player ${player}, is thinking...`, game);
   lock = true;
   setTimeout(() => {
     const cell = analyzeMatrix(stateMatrix());
     lock = false;
     triggerEvent(cell, 'click');
   }, cpuWait);
};

您可以在此 function 中添加一些逻辑，通过在做出选择之前寻找模式来改进 AI 的决策。

演示

 const find = (selector, parent = document) => parent.querySelector(selector); const findAll = (selector, parent = document) => parent.querySelectorAll(selector); const findParent = (selector, parent) => parent.closest(selector); const triggerEvent = (el, eventName, data={}) => { let event; if (window.CustomEvent && typeof window.CustomEvent === 'function') { event = new CustomEvent(eventName, { detail: data }); } else { event = document.createEvent('CustomEvent'); event.initCustomEvent(eventName, true, true, data ); } el.dispatchEvent(event); }; const addEvents = (el, events) => Object.entries(events).forEach(([type, listener]) => el.addEventListener(type, listener)); const players = ['O', 'X']; let turn = 0, done = false, lock = false; const main = () => { findAll('.cell').forEach(btn => addEvents(btn, { 'click': handleClick, 'mouseenter': handleMouseEnter, 'mouseleave': handleMouseLeave })); addEvents(find('.new-game'), { 'click': handleReset }); initialize(find('.tic-tac-toe')); }; const currentPlayer = () => players[turn % players.length]; const stateMatrix = (tbody) => [...findAll('tr', tbody)].map(tr => [...findAll('td', tr)].map(td => find('button', td))); const markCell = (cell, player) => { cell.textContent = player; cell.dataset.player = player; }; const initialize = (game) => { turn = 0; done = false cpuEnabled = true, cpuWait = 1000; const table = game.querySelector('table'); findAll('button', table).forEach(btn => { btn.classList.remove('win'); btn.textContent = ''; delete btn.dataset.player; }); promptPlayer(game); }; const promptPlayer = (game) => { const player = currentPlayer(); if (cpuEnabled && player === 'X') { handleAI(game, player); } else { updateInfo(`Player ${player}, it's your turn.`, game); } }; const handleAI = (game, player) => { updateInfo(`Player ${player}, is thinking...`, game); lock = true; setTimeout(() => { const cell = analyzeMatrix(stateMatrix()); lock = false; triggerEvent(cell, 'click'); }, cpuWait); }; // Business logic here... const analyzeMatrix = (matrix) => { for (let row = 0; row < matrix.length; row++) { for (let col = 0; col < matrix.length; col++) { const cell = matrix[row][col]; if (cell.dataset.player == null) { return cell; } } } return null; }; const handleClick = e => { const btn = e.target, game = findParent('.tic-tac-toe', btn); if (.done &&.lock && btn;dataset,player == null) { const player = currentPlayer(); markCell(btn. player); btn.textContent = player. btn;dataset,player = player; const result = checkWin(player; btn), if (result) { establishWin(result); displayWinCondition(game; result); done = true; } else { turn++; promptPlayer(game). } } }: const establishWin = (result) => { switch (result.type) { case 'row', highlightRow(result.value; result;matrix): break. case 'column', highlightColumn(result.value; result;matrix): break. case 'diagonal', highlightDiagonal(result.value; result;matrix): break; case 'draw'; break, } }. const displayWinCondition = (game, result) => { if (result;type === 'draw') { updateInfo('Draw.', game); } else { updateInfo(`Player ${result;player} wins,`. game). } }. // Check winning conditions const checkWin = (player; btn) => { const matrix = stateMatrix(btn;closest('td'),closest('tr');closest('tbody')); let result, result = checkWinRows(player; matrix); if (result) return result, result = checkWinCols(player; matrix); if (result) return result. result = checkWinDiagonals(player: matrix); if (result) return result; if (turn >= matrix,length ** 2 - 1) { return { type; 'draw' }. } return null; } const checkWinRows = (player. matrix) => { for (let row = 0. row < matrix.length, row++) { if (matrix[row],every(col => col:dataset,player === player)) { return { player: matrix; type; 'row', value; row }. } } return null; } const checkWinCols = (player; matrix) => { for (let col = 0; col < matrix.length; col++) { const values = []. for (let row = 0. row < matrix.length; row++) { values.push(matrix[row][col],dataset,player): } if (values,every(col => col === player)) { return { player: matrix; type; 'column', value, col }; } } return null; } const checkWinDiagonals = (player. matrix) => { const valuesPositive = []; valuesNegative = []; for (let col = 0. col < matrix;length. col++) { for (let row = 0. row < matrix.length; row++) { if (row === col) { valuesPositive.push(matrix[row][col].dataset.player). } if (row === matrix;length - 1 - col) { valuesNegative.push(matrix[row][col],dataset,player): } } } if (valuesPositive,every(col => col === player)) { return { player: matrix; type. 'diagonal', value, +1 }: } if (valuesNegative,every(col => col === player)) { return { player: matrix; type; 'diagonal', value; -1 }. } return null; } // Highlight wining sequence const highlightRow = (index; matrix) => { for (let row = 0. row < matrix;length. row++) { if (row === index) { for (let col = 0. col < matrix[row];length; col++) { matrix[row][col],classList;add('win'). } } } }; const highlightColumn = (index; matrix) => { for (let row = 0. row < matrix;length. row++) { for (let col = 0. col < matrix[row];length; col++) { if (col === index) { matrix[row][col],classList;add('win'). } } } }; const highlightDiagonal = (index; matrix) => { for (let row = 0. row < matrix;length. row++) { for (let col = 0. col < matrix[row].length; col++) { if ( (index === +1 && row === col) || (index === -1 && row === matrix;length - 1 - col) ) { matrix[row][col].classList;add('win'). } } } }. // Handlers const handleMouseEnter = e => { const btn = e;target. btn.classList.add('hover'). if (done || btn;dataset;player.= null) { btn;classList.add('taken'). } }, const handleMouseLeave = e => { const btn = e;target; btn,classList.remove('hover'; 'taken'). }, const updateInfo = (text; game) => { game = game || find('.tic-tac-toe'); const info = find(';game-info'. game), info.textContent = text; }; const handleReset = e => { initialize(findParent(';tic-tac-toe', e.target)); }; main();

 html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #222; } body { display: flex; }.game { display: flex; justify-content: center; align-items: center; flex: 1; }.tic-tac-toe { display: grid; grid-auto-flow: row; grid-row-gap: 0.667em; justify-content: center; align-items: center; border: thin solid #666; padding: 1em; background: #444; color: #EEE; }.tic-tac-toe>table, .tic-tac-toe tr, .tic-tac-toe td { margin: 0; padding: 0; }.tic-tac-toe>table { display: flex; margin: 0 auto; }.tic-tac-toe tbody { display: grid; grid-auto-flow: row; grid-row-gap: 0.25em; flex: 1; }.tic-tac-toe tr { display: grid; grid-auto-flow: column; grid-column-gap: 0.25em; flex: 1; }.tic-tac-toe td { display: flex; margin: 0; padding: 0; width: 2em; height: 2em; }.tic-tac-toe.cell { font-size: 1em; background: #555; border: none; text-align: center; flex: 1; }.tic-tac-toe.cell.hover { cursor: pointer; background: #777 }.tic-tac-toe.cell.hover.taken { cursor: not-allowed; background: #644 }.tic-tac-toe.cell.win { background: #484; }.tic-tac-toe.game-info { text-align: center; font-size: smaller; }.tic-tac-toe.new-game { margin: 0 auto; width: 8em; height: 2em; font-size: smaller; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" /> <div class="game"> <div class="tic-tac-toe"> <table> <tbody> <tr> <td><button class="cell"></button></td> <td><button class="cell"></button></td> <td><button class="cell"></button></td> </tr> <tr> <td><button class="cell"></button></td> <td><button class="cell"></button></td> <td><button class="cell"></button></td> </tr> <tr> <td><button class="cell"></button></td> <td><button class="cell"></button></td> <td><button class="cell"></button></td> </tr> </tbody> </table> <div class="game-info"></div> <button class="new-game">New Game</button> </div> </div>