时间戳

首页 > 解决方案 > 如何让玩家轮流参与 JavaScript (tic-tac-toe) 项目

javascript - 如何让玩家轮流参与 JavaScript (tic-tac-toe) 项目

问题描述

我正试图让两个玩家轮流参与我的井字游戏项目。在我的playerContols函数中，我尝试将每个玩家放在一个“当前玩家”外壳变量中，该变量将根据一个玩家是否已经离开而切换，但它只是卡在玩家 2 上，并且只用 O 标记每个单元格。我不完全确定它有什么问题

我的代码

const playgame = (() => {
  const playerOne = {
    Name: 'playerOne',
    Marking: 'X'
  };
  const playerTwo = {
    Name: 'PlayerTwo',
    Marking: 'O'
  };

  function playerControls(e) {
    let currentPlayer;
    currentPlayer = playerOne;
    e.target.textContent = currentPlayer.Marking;
    if (currentPlayer === playerOne) {
      currentPlayer = playerTwo;
      e.target.textContent = currentPlayer.Marking;
    } else {
      currentPlayer = playerOne;
      e.target.textContent = currentPlayer.Marking;
    }
  }

  return {
    playerControls
  }
})();
const gameBoard = (() => {
  const makeBoard = (rows, cols) => {
    const theBoard = document.getElementById("GameBoard");
    theBoard.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
    theBoard.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
    for (i = 0; i < (rows * cols); i++) {
      let gameDivs = document.createElement("div");
      gameDivs.addEventListener("click", playgame.playerControls)
      theBoard.appendChild(gameDivs).classList.add("newdivgrid");
    }
  };
  makeBoard(3, 3);
})();
#GameBoard {
  width: 600px;
  height: 350px;
  border: 1px solid darkblue;
  margin-left: 27%;
  text-align: center;
  font-size: 500%;
  font-family: cursive, sans-serif;
  display: grid;
}

.newdivgrid {
  border: 1px solid black;
  grid-row-gap: 50px;
}

.newdivgrid:hover {
  background-color: aqua;
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tic-Tac-Toe game</title>
  <link rel="stylesheet" href="Tic-Tac-Toe.css">
</head>
<h1>Tic-Tac-Toe Project</h1>

<div id="PlayerSelectionContainer">
  <h2>Select Players</h2>
  <div class="Player1">
    <h3>Player 1</h3>
    <div class="playerSelectionButtons" data-player="playerOne">
      <button data-player="human">Human</button>
      <button data-player="computer">Computer</button>
    </div>
  </div>
  <div class="Player2">
    <h3>Player 2</h3>
    <div class="playerSelectionButtons" data-player="playerTwo">
      <button data-human-player="human">Human</button>
      <button data-computer-player="computer">Computer</button>
    </div>
  </div>
</div>
<div id="GameBoard">

</div>



<div id="resultContainer">

  <h3>Results</h3>

  <div class="player1Results">
    <h3>Player 1 Results</h3>
    <textarea placeholder="0" disabled></textarea>
  </div>
  <div class="Player2Results">
    <h3>Player 2 Results</h3>
    <textarea placeholder="0" disabled></textarea>
  </div>
</div>

<body>
  <script src="Tic-Tac-Toe.js"></script>
</body>

</html>

标签： javascripthtmlcss

解决方案

问题是您的currentPlayer变量声明和初始化需要位于函数之外，playerControls否则您只是playerOne每次都将其重置。

let currentPlayer;
currentPlayer = playerOne;
    
function playerControls(e){...}

这是正在执行的修复：

const playgame = (()=> {
        const playerOne = {
        Name: 'playerOne',
        Marking: 'X'
    };
    const playerTwo = {
        Name: 'PlayerTwo',
        Marking: 'O'
    };
    
    let currentPlayer;
    currentPlayer = playerOne;
    
    function playerControls(e){
    e.target.textContent = currentPlayer.Marking;
    if(currentPlayer === playerOne)
    {
        currentPlayer = playerTwo;
        e.target.textContent = currentPlayer.Marking;
    }else{
        currentPlayer = playerOne;
        e.target.textContent = currentPlayer.Marking;
    }
    }
    
    
    return{playerControls}
})();
const gameBoard = (() => {
const makeBoard = (rows, cols) => {
    const theBoard = document.getElementById("GameBoard");
    theBoard.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
    theBoard.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
    for (i=0; i<(rows * cols); i++){
    let gameDivs = document.createElement("div");
    gameDivs.addEventListener("click", playgame.playerControls)
    theBoard.appendChild(gameDivs).classList.add("newdivgrid");
    }
};
makeBoard(3,3);
})();
#GameBoard{
    width: 600px;
    height: 350px;
    border: 1px solid darkblue;
    margin-left: 27%; 
    text-align: center;
    font-size: 500%;
    font-family: cursive, sans-serif;
    display: grid;
    
}


.newdivgrid{
    border: 1px solid black;
    grid-row-gap: 50px;
    
}

.newdivgrid:hover{
    background-color: aqua;
}
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic-Tac-Toe game</title>
    <link rel="stylesheet" href="Tic-Tac-Toe.css">
</head>
<h1>Tic-Tac-Toe Project</h1>

<div id="PlayerSelectionContainer">
<h2>Select Players</h2>
<div class="Player1">
    <h3>Player 1</h3>
<div class="playerSelectionButtons" data-player="playerOne">
    <button data-player="human">Human</button>
    <button data-player="computer">Computer</button>
</div>
</div>
<div class="Player2">
    <h3>Player 2</h3>
<div class="playerSelectionButtons" data-player="playerTwo">
    <button data-human-player="human">Human</button>
    <button data-computer-player="computer">Computer</button>
</div>
</div>
    </div>
<div id="GameBoard">

</div>
    


<div id="resultContainer">

<h3>Results</h3>

<div class="player1Results">
    <h3>Player 1 Results</h3>
    <textarea placeholder="0" disabled ></textarea>
</div>
<div class="Player2Results">
    <h3>Player 2 Results</h3>
    <textarea placeholder="0" disabled ></textarea>
</div>
</div>

<body>
    <script src="Tic-Tac-Toe.js"></script>
</body>
</html>

推荐阅读