检查当前玩家是否在 JavaScript 中赢得井字游戏答案

【问题标题】：Checking the if current player has won the game of Tic Tac Toe in JavaScript检查当前玩家是否在 JavaScript 中赢得井字游戏
【发布时间】：2018-08-24 18:01:02
【问题描述】：

我正在使用 html CSS 和 JavaScript 制作一个简单的井字游戏。没有实现计算机 AL 播放器。只有两个玩家轮流。我的 checkWinner 功能不起作用，我不知道如何确定获胜者。有人建议我创建一个二维数组来存储我在名为 winCombos 的变量中所做的获胜组合。我正在遍历所有这些，并在单元格数组的不同位置与 currentPlayer 进行比较，但它不起作用。可能我做错了。有人能帮帮我吗。谢谢

var player1 = "X";
var player2 = "O";
var cells = Array.from(document.querySelectorAll(".cell"));
var currentPlayer = player1;
var winner = "";
var winCombos = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];

function checkWinner(arr, curPlayer){
    arr.forEach(function(subArr){
      var counter = 0;
      subArr.forEach(function(elem){
        if(cells[elem] === curPlayer){
          counter++;
          if(counter == 2 ){
            winner = curPlayer;
            alert(winner);
          }
        }
      });
    });
}

function move(e){
  if(e.target.className === "cell" && e.target.textContent === ""){
    e.target.textContent = currentPlayer;
    checkWinner(winCombos, currentPlayer);
    currentPlayer = (currentPlayer === player1)?player2:player1;
  }
  
}

document.querySelector(".board").addEventListener("click", move);

.container{
  width: 400px;
  height: 480px;
  background: tomato;
  margin: 50px auto;
  text-align: center;
  padding: 10px;
}

.board{
  width: 90%;
  margin: 20px auto;
}

.board .cell{
  width: 118px;
  height: 100px;
  float: left;
  text-align: center;
  line-height: 80px;
  font-size: 80px;
  font-weight: bold;
  border: 1px solid #fff;
  color: #fff;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="container">
    
   <div class="board">
     <div class="cell"></div>
     <div class="cell"></div>
     <div class="cell"></div>
     <div class="cell"></div>
     <div class="cell"></div>
     <div class="cell"></div>
     <div class="cell"></div>
     <div class="cell"></div>
     <div class="cell"></div>
   </div>
  </div>
</body>
</html>

【问题讨论】：

标签： javascript html css web tic-tac-toe

【解决方案1】：

两件事：使用innerHTML 获取div 的内容，而不是包含整个div 的字符串。还要检查是否真的连续有 3 个，而不仅仅是 2 个。（或者您可以将 counter++; 移到检查后，并留下 counter == 2）

if(cells[elem].innerHTML === curPlayer){
  counter++;
  if(counter == 3 ){
    winner = curPlayer;
    alert(winner);
  }
}

var player1 = "X";
var player2 = "O";
var cells = Array.from(document.querySelectorAll(".cell"));
var currentPlayer = player1;
var winner = "";
var winCombos = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];

function checkWinner(arr, curPlayer){
    arr.forEach(function(subArr){
      var counter = 0;
      subArr.forEach(function(elem){
        if(cells[elem].innerHTML === curPlayer){
          counter++;
          if(counter == 3 ){
            winner = curPlayer;
            alert(winner);
          }
        }
      });
    });
}

function move(e){
  if(e.target.className === "cell" && e.target.textContent === ""){
    e.target.textContent = currentPlayer;
    checkWinner(winCombos, currentPlayer);
    currentPlayer = (currentPlayer === player1)?player2:player1;
  }
  
}

document.querySelector(".board").addEventListener("click", move);

.container{
  width: 400px;
  height: 480px;
  background: tomato;
  margin: 50px auto;
  text-align: center;
  padding: 10px;
}

.board{
  width: 90%;
  margin: 20px auto;
}

.board .cell{
  width: 118px;
  height: 100px;
  float: left;
  text-align: center;
  line-height: 80px;
  font-size: 80px;
  font-weight: bold;
  border: 1px solid #fff;
  color: #fff;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="container">
    
   <div class="board">
     <div class="cell"></div>
     <div class="cell"></div>
     <div class="cell"></div>
     <div class="cell"></div>
     <div class="cell"></div>
     <div class="cell"></div>
     <div class="cell"></div>
     <div class="cell"></div>
     <div class="cell"></div>
   </div>
  </div>
</body>
</html>

【讨论】：

非常感谢您的快速回复。它真的很有帮助。有一件事，当我连续第三次点击时，“X”或“O”出现在警报之后。你能解释一下发生了什么吗？
我不确定，我认为这是关于 chrome 排队重绘和控制台日志。也许它将大多数事情排入队列，但将警报视为中断？可能值得再问一个问题
好的，感谢您的帮助。