Question

如何遍历数组并将它们与多组数字进行比较。我正在尝试为Tic Tac Toe项目编写游戏逻辑。当玩家点击一个正方形时，点击的正方形的数字存储在p1Taken或p2Taken中。我试图循环遍历这些数组并将数字与赢得所需的正方形数字进行比较。只有第一个if语句有效，我认为它不是正方形数的bc，而是因为数组中有3个数字。这是我到目前为止的代码：

const turnTaken = {
    X: [],
    O: []
}

var whosTurn = 'X';

let p1Taken = turnTaken.X; 
let p2Taken = turnTaken.O; 

const gameGrid = document.getElementsByClassName("grid");
const message = document.getElementById("message");

for(i=0, l=gameGrid.length; i < l; i++){ 
    const boardNum = gameGrid[i].getAttribute("value");

    gameGrid[i].addEventListener('click', function(e) { 

        if(whosTurn == 'X') {
            message.innerHTML = "O's Turn";
            player1Turn(e);
        } else {
            message.innerHTML = "X's Turn";
            player2Turn(e);
        }
    });         
}


function player1Turn(e){
    const clickedValue = e.target.getAttribute("value");
    const clicked = e.target;

    const xIcon = document.createElement("IMG");
    const srcX = "img/x-icon.png";
    xIcon.setAttribute("src", srcX);

    clicked.appendChild(xIcon);
    p1Taken.push(clickedValue);
    whosTurn = 'O';  

    player1CheckWin(p1Taken);

}

function player2Turn(e){    
    const clickedValue = e.target.getAttribute("value");
    const clicked = e.target;

    const oIcon = document.createElement("IMG");
    const srcO = "img/o-icon.png";
    oIcon.setAttribute("src", srcO);

    clicked.appendChild(oIcon);
    p2Taken.push(clickedValue);
    whosTurn = 'X';

    player2CheckWin(p2Taken);

}


function player1CheckWin(p1Taken){

    for(var i=0; i < p1Taken.length; i++) {

        if(p1Taken.length > 2) {

            if(p1Taken[i] == 1 || p1Taken[i] == 2 || p1Taken[i] == 3) { 
    console.log("first");
                    message.innerHTML = "X Won!";
            } else if(p1Taken[i] == 4 || p1Taken[i] == 5 || p1Taken[i] == 6) {
                    console.log("second");

                    message.innerHTML = "X Won!";
            } else if(p1Taken[i] == 7 || p1Taken[i] == 8 || p1Taken[i] == 9) {
                    console.log("third");

                    message.innerHTML = "X Won!";
            } else if(p1Taken[i] == 1 || p1Taken[i] == 4 || p1Taken[i] == 7) {
                    message.innerHTML = "X Won!";
            } else if(p1Taken[i] == 2 || p1Taken[i] == 5 || p1Taken[i] == 8) {
                    message.innerHTML = "X Won!";
            } else if(p1Taken[i] == 3 || p1Taken[i] == 6 || p1Taken[i] == 9) {
                    message.innerHTML = "X Won!";
            } else if(p1Taken[i] == 1 || p1Taken[i] == 5 || p1Taken[i] == 9){
                    message.innerHTML = "X Won!";
            } else if(p1Taken[i] == 3 || p1Taken[i] == 5 || p1Taken[i] == 7) {
                message.innerHTML = "X Won!";
            } else {
                break;
            }
        } else {
            break;
        }
    }
}

function player2CheckWin(p2Taken){

    for(var j=0; j < p2Taken.length; j++) {

        if(p2Taken.length > 2) {

            if(p2Taken[j] == 1 || p2Taken[j] == 2 || p2Taken[j] == 3) {
                    message.innerHTML = "O Won!";
            } else if(p2Taken[j] == 4 || p2Taken[j] == 5 || p2Taken[j] == 6) {
                    message.innerHTML = "O Won!";
            } else if(p2Taken[j] == 7 || p2Taken[j] == 8 || p2Taken[j] == 9) {
                    message.innerHTML = "O Won!";
            } else if(p2Taken[j] == 1 || p2Taken[j] == 4 || p2Taken[j] == 7) {
                    message.innerHTML = "O Won!";
            } else if(p2Taken[j] == 2 || p2Taken[j] == 5 || p2Taken[j] == 8) {
                    message.innerHTML = "O Won!";
            } else if(p2Taken[j] == 3 || p2Taken[j] == 6 || p2Taken[j] == 9) {
                    message.innerHTML = "O Won!";
            } else if(p2Taken[j] == 1 || p2Taken[j] == 5 || p2Taken[j] == 9){
                    message.innerHTML = "O Won!";
            } else if(p2Taken[j] == 3 || p2Taken[j] == 5 || p2Taken[j] == 7) {
                message.innerHTML = "O Won!";
            } else {
                break;
            }
        } else {
            break;
        }
    }   
}

Answer 1

我只会选择一个谓词：

p1Taken[i] == 1 && 2 && 3

如果满足以下所有条件，则为true：

p1Taken[i]类似于1（在必要的投射后）
2是true（在必要的投射后）
3是true（在必要的投射后）

所以我知道数字2和3是真实的，因此转换为布尔值将是true。如果您想将p1Taken[i]与3个数字进行比较，则需要进行3次比较：

p1Taken[i] == 1 || p1Taken[i] == 2 || p1Taken[i] == 3

如果数字总是整数，则可以使用范围：

p1Taken[i] >= 1 && p1Taken[i] <= 3

修改

制作简单而不是硬的关键是拥有一个支持您想要执行的操作的外部数据结构。我会想象一个具有代表位置的索引的电路板将同样易于更新，并且很容易检查是否赢了。以下是我对其进行建模的方法：

function getWinner(b) { if (b[4] && ( b[3] == b[4] && b[4] == b[5] || b[0] == b[4] && b[4] == b[8] || b[2] == b[4] && b[4] == b[6] || b[1] == b[4] && b[4] == b[7])) { return b[4]; } if (b[0] && ( b[1] == b[0] && b[0] == b[2] || b[3] == b[0] && b[0] == b[6])) { return b[0]; } if (b[8] && ( b[6] == b[8] && b[8] == b[7] || b[2] == b[8] && b[8] == b[5])) { return b[8]; } return false; } // tests const o = 'o'; const x = 'x'; const n = undefined; const test1 = [ o, o, x, x, o, x, o, n, x ]; const test2 = [ o, x, x, x, o, o, o, n, x ]; const test3 = [ o, x, x, o, o, o, x, n, x ]; console.log(getWinner(test1)); // prints x console.log(getWinner(test2)); // prints false console.log(getWinner(test3)); // prints o

Answer 2

你需要纠正你的比较逻辑

更改此

p1Taken[i] == 1 && 2 && 3

到

p1Taken[i] == 1 && p1Taken[i] == 2 && p1Taken[i] == 3

同样适用于其他人

&&运算符需要比较表达式，在您的情况下，您将第一个表达式设为p1Taken[i] == 1，这是正确的但是第二个＆amp;给出的第三个表达是'2'和' '3'是真正的价值

现在关于你的逻辑部分，上面的代码仍然不会给出正确的结果，因为你期望同一个事件p1Taken[i]同时等于多个值。

所以只需要一个提示，p1Taken将其保留为已拍摄的数组＆n;使用条件为

p1Taken.includes(1) && p1Taken.includes(2) && p1Taken.includes(3)

TicTacToe game

将数字与JavaScript进行比较

2 个答案: