我如何在井字游戲中將我的欄位值輸入到陣列中以設定勝利-有解無憂

我正在制作一個簡單的井字游戲，以練習模塊模式和工廠模式。我已經在欄位上實作了事件偵聽器來標記 x 和 o。但我需要 x 和 o 也進入棋盤陣列，以便與獲勝組合陣列進行比較。

我需要最終能夠找到勝利者。

//player factory function
const createPlayer = (name,marker) => {
    return {name,marker}
}

//gameboard object
const gameBoard = (() => {
   //create board array
    let board = []
    for (i=0; i<9; i  ) {
        board.push("")
    }


    //add event listeners on each field that will mark field and change player's turn state
    const fields = document.querySelectorAll(".field") 
    const nextTurn = document.querySelector(".message")

   
    let turn = 0
    
    fields.forEach((field) => {
        field.addEventListener('click',handleClick,{once:true})

        function handleClick() {
            
                if(turn %= 2) {
                    field.innerHTML = "O"
                    field.classList.toggle("marker")
                    nextTurn.innerHTML= "Player X's turn"}
                    
                    else {
                    field.innerHTML = "X"
                    field.classList.toggle("marker")
                    nextTurn.innerHTML= "Player O's turn"}
                    
                    turn   
    

        }
        
    })

    //restart game
    const restart = document.getElementById("restart-button")

    restart.addEventListener("click",clicke)

    function clicke() {
        const fields = document.querySelectorAll(".field").innerHTML=""
    }

    
        

    return {
        board, 
    }
})()

// game object
const game = (() => {

    //declare players
    const playerOne = createPlayer("player x", "x")
    const playerTwo = createPlayer("player o", "o")

    //starting point
    let activePlayer = playerOne
    let winnerDeclared = false
    let remainingSpots = 9

    //selectors
    let playerName = document.querySelector('.message') //alert next turn

    //winning conditons
    const winningConditons = [
        [0,1,2]
        [3,4,5]
        [6,7,8]
        [0,3,8]
        [1,4,7]
        [2,5,8]
        [0,4,8]
        [2,4,6]
    ];

    //check for winner
    function checkWinner() {

    }

    function declareTie(){
        playerName.innerHTML = "Its a tie!"
    }

    
}
)()

.gameboard{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 5px;
}
.field{
    width: 150px;
    height: 150px;
    background-color:  #ededee;
    
}

  <div class="container">
        <div class="header">
            <div class="header-text">
                Tic-Tac-Toe
            </div>
        </div>
        <div class="body-container">
            <div class="message">Player X's turn</div>
            <div class="gameboard">
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
            </div>
            <div class="center">
                <button id="restart-button">Restart</button>
            </div>
   
        </div>
    </div>

uj5u.com熱心網友回復：

我添加了一個功能checkPlayerMeetsConditions()來檢查玩家是否滿足條件。

const checkPlayerMeetsConditions = (boardNodes, targetPlayer) => {
  const currResult = [];
  //winning conditons
  const winningConditons = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];

  boardNodes.forEach(({
    innerHTML: val
  }, i) => {
    if (val === targetPlayer) {
      currResult.push(i);
    }
  });


  let isWinner = false;

  winningConditons.forEach((condition) => {
    const isMatched = condition.reduce((isMatched, currVal, i) => currResult[i] !== currVal ? false : isMatched, true); //Assuming the data are sorted

    if (isMatched) {
      isWinner = true;
      return;
    }
  });

  return isWinner;
}

此外，我已將您的功能填寫checkWinner()為：

//check for winner
const checkWinner = () => {

  const fields = document.querySelectorAll(".field");
  
  const isOWinner = checkPlayerMeetsConditions(fields, "O");
  const isXWinner = checkPlayerMeetsConditions(fields, "X");

  if (isOWinner && isXWinner) { // when tie
    document.querySelector(".winning-message").innerHTML = "Game Tie";
  } else if (isOWinner) {
    document.querySelector(".winning-message").innerHTML = "O is Winner";
  } else if (isXWinner) {
    document.querySelector(".winning-message").innerHTML = "X is Winner";
  }

}

這是完整的作業代碼：

//player factory function
const createPlayer = (name, marker) => {
  return {
    name,
    marker
  }
}

const checkPlayerMeetsConditions = (boardNodes, targetPlayer) => {
  const currResult = [];
  //winning conditons
  const winningConditons = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];

  boardNodes.forEach(({
    innerHTML: val
  }, i) => {
    if (val === targetPlayer) {
      currResult.push(i);
    }
  });


  let isWinner = false;

  winningConditons.forEach((condition) => {
    const isMatched = condition.reduce((isMatched, currVal, i) => currResult[i] !== currVal ? false : isMatched, true); //Assuming arrays are sorted

    if (isMatched) {
      isWinner = true;
      return;
    }
  });

  return isWinner;
}

//check for winner
const checkWinner = () => {

  const fields = document.querySelectorAll(".field");
  
  const isOWinner = checkPlayerMeetsConditions(fields, "O");
  const isXWinner = checkPlayerMeetsConditions(fields, "X");
  
  console.log(isOWinner, isXWinner);

  if (isOWinner && isXWinner) { // when tie
    document.querySelector(".winning-message").innerHTML = "Game Tie";
  } else if (isOWinner) {
    document.querySelector(".winning-message").innerHTML = "O is Winner";
  } else if (isXWinner) {
    document.querySelector(".winning-message").innerHTML = "X is Winner";
  }

}

//gameboard object
const gameBoard = (() => {
  //create board array
  let board = []
  for (i = 0; i < 9; i  ) {
    board.push("")
  }


  //add event listeners on each field that will mark field and change player's turn state
  const fields = document.querySelectorAll(".field")
  const nextTurn = document.querySelector(".message")


  let turn = 0



  fields.forEach((field) => {
    field.addEventListener('click', handleClick, {
      once: true
    })

    function handleClick() {

      if (turn %= 2) {
        field.innerHTML = "O"
        field.classList.toggle("marker")
        nextTurn.innerHTML = "Player X's turn"
      } else {
        field.innerHTML = "X"
        field.classList.toggle("marker")
        nextTurn.innerHTML = "Player O's turn"
      }

      turn  

      checkWinner(); //check the winner


    }

  })

  //restart game
  const restart = document.getElementById("restart-button")

  restart.addEventListener("click", clicke)

  function clicke() {
    const fields = document.querySelectorAll(".field").innerHTML = ""; // This is not correct
  }


  return {
    board,
  }
})()

// game object
const game = (() => {

  //declare players
  const playerOne = createPlayer("player x", "x")
  const playerTwo = createPlayer("player o", "o")

  //starting point
  let activePlayer = playerOne
  let winnerDeclared = false
  let remainingSpots = 9

  //selectors
  let playerName = document.querySelector('.message') //alert next turn

  function declareTie() {
    playerName.innerHTML = "Its a tie!"
  }


})()

.gameboard{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 5px;
}
.field{
    width: 150px;
    height: 150px;
    background-color:  #ededee;
    
}

  <div class="container">
    <div class="header">
      <div class="header-text">
        Tic-Tac-Toe
      </div>
    </div>
    <div class="body-container">
      <div class="message">Player X's turn</div>
      <div class="winning-message"></div>
      <div class="gameboard">
        <div class="field"></div>
        <div class="field"></div>
        <div class="field"></div>
        <div class="field"></div>
        <div class="field"></div>
        <div class="field"></div>
        <div class="field"></div>
        <div class="field"></div>
        <div class="field"></div>
      </div>
      <div class="center">
        <button id="restart-button">Restart</button>
      </div>

    </div>
  </div>

希望有幫助，加油！

uj5u.com熱心網友回復：

請參閱附件中的評論 - 它應該指導您

//player factory function
const createPlayer = (name,marker) => {
    return {name,marker}
}

//gameboard object
const gameBoard = (() => {
   //create board array
    let board = []
    for (i=0; i<9; i  ) {
        board.push("")
    }


    //add event listeners on each field that will mark field and change player's turn state
    const fields = document.querySelectorAll(".field") 
    const nextTurn = document.querySelector(".message")

   
    let turn = 0
    
    fields.forEach((field) => {
        field.addEventListener('click',handleClick,{once:true})

        function handleClick() {
            
                if(turn %= 2) {
                    field.innerHTML = "O"
                    field.classList.toggle("marker")
                    nextTurn.innerHTML= "Player X's turn"
                }
                else {
                    field.innerHTML = "X"
                    field.classList.toggle("marker")
                    nextTurn.innerHTML= "Player O's turn"
                }
                game.checkWinner(); // <- check winner after every move
                turn  ;
    

        }
        
    })

    //restart game
    const restart = document.getElementById("restart-button")

    restart.addEventListener("click",clicke)

    function clicke() {
        console.log('you had a mistake here - you need to iterate the fields', document.querySelectorAll(".field"));
        const fields = document.querySelectorAll(".field").forEach(field => 
            {
                field.innerHTML="";
                // you also need to add the event listeners again where needed - field.addEventListener('click', ...)
            }
        );
    }

    
        

    return {
        board, 
    }
})()

// game object
const game = (() => {

    //declare players
    const playerOne = createPlayer("player x", "x")
    const playerTwo = createPlayer("player o", "o")

    //starting point
    let activePlayer = playerOne
    let winnerDeclared = false
    let remainingSpots = 9

    //selectors
    let playerName = document.querySelector('.message') //alert next turn

    //winning conditons
    const winningConditons = [
        [0,1,2], // <- you forgot the commas here!
        [3,4,5],
        [6,7,8],
        [0,3,8],
        [1,4,7],
        [2,5,8],
        [0,4,8],
        [2,4,6]
    ];

    //check for winner
    function checkWinner() {
        console.log('do stuff here');
    }

    function declareTie(){
        playerName.innerHTML = "Its a tie!"
    }

    return { // <- you need to "export" a function to be able to use it
        checkWinner
    }
}
)()

.gameboard{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 5px;
}
.field{
    width: 150px;
    height: 150px;
    background-color:  #ededee;
    
}

  <div class="container">
        <div class="header">
            <div class="header-text">
                Tic-Tac-Toe
            </div>
        </div>
        <div class="body-container">
            <div class="message">Player X's turn</div>
            <div class="gameboard">
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
                <div class="field"></div>
            </div>
            <div class="center">
                <button id="restart-button">Restart</button>
            </div>
   
        </div>
    </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/527444.html

標籤：javascriptdom

上一篇：僅單擊影像時如何觸發事件偵聽器？

下一篇：即使值發生變化，如何使網格保持固定大小？