Javascript:如何检查Tic脚趾游戏中所有盒子/单元格的获胜状态？

Question

我试图让Tic Tac Toe作为一个javascript学习项目，我目前正在测试第1名选手的第一行获胜状态，但由于某种原因，每次单击第3框时，不管第1和第2框是否被单击，它都会显示获胜消息。显然，这不是抽搐脚趾的工作方式，因为你需要3排，而不是1或2。

我使用两个数组来测试获胜状态。一个数组表示已被播放机单击的框，一个数组包含第一行的获胜组合。我的目标是使用if语句进行测试，以查看播放机已经单击的框是否与数组中的框与获胜组合匹配。

我尝试过使用.every方法

for(let i=0;i X_Checked.includes((fRowBoxes，fRowBoxes1，fRowBoxes2))；if(fRowBoxes.every(fRowWin) === true){ msg.innerHTML =<h1> ${player1} Wins! </h1>；}

.textContent

if((fRowBoxes && fRowBoxes1 && fRowBoxes2).textContent ==“x "){ msg.innerHTML =<h1> ${player1} Wins! </h1>；}

和.includes方法

函数checkScore(){ if (X_Checked.includes(fRowBoxes & fRowBoxes1 & fRowBoxes2)){/*Only检查fRowBoxes 2*/ msg.innerHTML =<h1> ${player1} Wins! </h1>；}

不过，似乎没有什么工作，或它导致同样的结果，任何建议或建议都将受到高度赞赏。

    let player1 = `<div class="symbol x"> x </div>`;
    let player2 = `<div class="symbol o"> o </div>`;
    let turn = player1;
    
    
    let gridBoxes = document.querySelector('.grid').children;
    
    let boxes = [];/*Stores all boxes in 3x3 grid*/

    for(let i = 0; i < gridBoxes.length; i++){
      boxes.push(gridBoxes[i]);
    }
    
    const msg = document.querySelector('div.msg ');
    
    
    let fRowBoxes = [boxes[0],boxes[1],boxes[2]];/*Array with first row boxes*/
    let sRowBoxes = [boxes[3],boxes[4],boxes[5]];
    let tRowBoxes = [boxes[6],boxes[7],boxes[8]];
    
    let fColBoxes = [boxes[0],boxes[3],boxes[6]];
    let sColBoxes = [boxes[1],boxes[4],boxes[7]];
    let tColBoxes = [boxes[2],boxes[5],boxes[8]];
    
    let dBoxes1 =[boxes[0],boxes[4],boxes[8]];
    let dBoxes2 = [boxes[2],boxes[4],boxes[6]];
    
    
    let X_Checked = [];/*Stores boxes clicked by player 1*/
    let O_Checked = [];
    
    msg.display ='block';

函数checkScore(){ if (X_Checked.includes(fRowBoxes & fRowBoxes1 & fRowBoxes2)){/*Only检查fRowBoxes 2*/ msg.innerHTML =<h1> ${player1} Wins! </h1>；}

    const tictactoe = (function(){/*START*/
    
      msg.innerHTML = `<h1>Player 1 (X)</h1>`;
    
        for(let i = 0; i<boxes.length; i++){
          
        boxes[i].addEventListener('click',() =>{
    
          if(boxes[i].value){
            boxes[i].click(false);
          }
          
          else if(boxes[i].textContent === ""){
              boxes[i].innerHTML = turn;
              checkPlayer();

     /**------------------------------------------- */
    
          if (turn === player1){
            O_Checked.push(boxes[i]);
            console.log(O_Checked);
            checkScore();/*Checks for a winner*/
        }
            else if (turn === player2){
                X_Checked.push(boxes[i]);
                console.log( X_Checked);
                 checkScore();
              
              }
      }     
    });}
    }());/*END*/
    
    
    let checkPlayer = (function(){
    
      if(turn === player1){
          turn = player2;
      msg.innerHTML = `<h1>Player 2 (O)</h1>`;
      } 
    
      else if(turn === player2){
          turn = player1;
          msg.innerHTML = `<h1>Player 1 (X)</h1>`;
      }
    
    });

​

let player1 = `<div class="symbol x"> x </div>`;
let player2 = `<div class="symbol o"> o </div>`;
let turn = player1;


let gridBoxes = document.querySelector('.grid').children;

let boxes = [];
for(let i = 0; i < gridBoxes.length; i++){
  boxes.push(gridBoxes[i]);
}

const msg = document.querySelector('div.msg ');


let fRowBoxes = [boxes[0],boxes[1],boxes[2]];
let sRowBoxes = [boxes[3],boxes[4],boxes[5]];
let tRowBoxes = [boxes[6],boxes[7],boxes[8]];

let fColBoxes = [boxes[0],boxes[3],boxes[6]];
let sColBoxes = [boxes[1],boxes[4],boxes[7]];
let tColBoxes = [boxes[2],boxes[5],boxes[8]];

let dBoxes1 =[boxes[0],boxes[4],boxes[8]];
let dBoxes2 = [boxes[2],boxes[4],boxes[6]];

let X_Checked = [];
let O_Checked = [];

msg.display ='block';

function checkScore(){
if (X_Checked.includes(fRowBoxes[0] && fRowBoxes[1] && fRowBoxes[2])){
    msg.innerHTML =`<h1> ${player1} Wins! </h1>`;
}


}
  const tictactoe = (function(){/*START*/

  msg.innerHTML = `<h1>Player 1 (X)</h1>`;

    for(let i = 0; i<boxes.length; i++){
      
    boxes[i].addEventListener('click',() =>{

      if(boxes[i].value){
        boxes[i].click(false);
      }
      
      else if(boxes[i].textContent === ""){
          boxes[i].innerHTML = turn;
          checkPlayer();
 /**------------------------------------------- */

      if (turn === player1){
        O_Checked.push(boxes[i]);
        console.log(O_Checked);
        checkScore();
    }
        else if (turn === player2){
            X_Checked.push(boxes[i]);
            console.log( X_Checked);
             checkScore();
          
          }
  }     
});}
}());/*END*/


let checkPlayer = (function(){

  if(turn === player1){
      turn = player2;
  msg.innerHTML = `<h1>Player 2 (O)</h1>`;
  } 

  else if(turn === player2){
      turn = player1;
      msg.innerHTML = `<h1>Player 1 (X)</h1>`;
  }

});

*{box-sizing:border-box;}

body{
    margin:0;
    padding:0;
    font-family:arial;
}
.container{
    display:flex;
    height:100vh;
    width:100%;
    position:relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: tomato;
    /* background-image:linear-gradient(to right, tomato, black, rgb(225, 225, 225)); */
}
.box:hover{
background-color:rgb(230,230,230);
transition: .4s ease-in-out;
}

.box,.grid{

    cursor:pointer;
}

.box{
display:flex;
flex-direction:column;
justify-content: center;
align-items:center;
background-color:black;

}

.symbol{
font-size:4em;
font-style:bold;
font-family:arial;
text-transform:uppercase;
text-shadow:0px 0px 5px rgb(100,100,100);
}

.x{
color:tomato;
}
.o{
 color:white;
}


.grid{
    display: grid;
    width: 350px;
    grid-gap:10px;
    border-radius:10px;
   border:solid 10px white;
    background-color:white;
    grid-template-rows: repeat(3,100px);
    grid-template-columns: repeat(3,1fr);
    box-shadow: 0px 1px 8px rgb(50, 50, 50);
}

/* .grid:nth-child(even) */


.msg{
    color:white;
    position:absolute;
    text-shadow: 0px 1px 3px rgb(50, 50, 50);
    top:15px;
    font-size:2em;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv ="author" content="Carl Dawkins">
    <meta name ="description" content="A Tic Tac Toe Game">
    <link type="text/css" href="../css/style.css" rel="stylesheet">
    <title>TicTacToe</title>
</head>
<body>
<div class="container">
    <div class="msg"> </div>
    <div class="grid">
        <div id="box-1" class="box" ></div>
        <div id="box-2" class="box" ></div>
        <div id="box-3" class="box" ></div>
        <div id="box-4" class="box" ></div>
        <div id="box-5" class="box" ></div>
        <div id="box-6" class="box" ></div>
        <div id="box-7" class="box" ></div>
        <div id="box-8" class="box" ></div>
        <div id="box-9" class="box" ></div>
    </div>
</div>

<script src="../js/script.js"></script>
</body>


</html>

​

Answer 1

您正在存储要数组的元素，并尝试比较元素。

我认为比较值(o或x)或id (方框-1.)是更好的

X_Checked.every(e => e.innerText.trim() == 'x')