Javascript - Tic Tac Toe - 如何循环获胜条件？

Question

我正在编写一个功能正常的 Tic Tac Toe 程序，我已经差不多完成了。 除了我的胜利条件太长而且丑陋。 看起来像这样。

function checkWin(){
  if(board[0].textContent === "X" &&
    board[1].textContent === "X" &&
    board[2].textContent === "X"
  ) { alert("Win")}
  else if (
    board[3].textContent === "X" &&
    board[4].textContent === "X" &&
    board[5].textContent === "X"
  ) { alert("Win")}
   else if (
    board[6].textContent === "X" &&
    board[7].textContent === "X" &&
    board[8].textContent === "X"
  ) { alert("Win")}

}

我只写了几个获胜条件，因为如果我写了整个东西，它会更长。 我想知道如何编写一个较短的版本。 我正在考虑做一个数组并循环遍历它，但我不知道如何做。 会是这样的。

var winConditions = [[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8 ], [0,4,8], [6,4,2]]

但是我如何使用 checkWin 遍历 winConditions 并使其等于 X 和 O？

Answer 1

做循环和求和。 当然，这可以优化：

var winConditions = [ /* what you defined */ ];

function winTest(board, side) {
  for(var i = 0; i < winConditions.length; i++) { 
    var sum = 0;
    var w = winConditions[i];

    for(var b = 0; b < w.length; b++) {
      if(board[w[b]].textcontent === side) {
        sum++
      }
    }

    if(sum === 3) {
      return true;
    }
  }
  return false;
}

// then, call it :
var result = winTest(board, 'X');

Answer 2

使用ES6

 function checkWin(player){ // player = 'X' or 'O' const horizontal = [0,3,6].map(i=>{return[i,i+1,i+2]}); const vertical = [0,1,2].map(i=>{return[i,i+3,i+6]}); const diagonal = [[0,4,8],[2,4,6]]; var allwins = [].concat(horizontal).concat(vertical).concat(diagonal); let res = allwins.some(indices => { return board[indices[0]] == player && board[indices[1]] == player && board[indices[2]] == player}) return res; } // OOO // XXO // XXO var board=["X","X","O","X","X","O","O","O","O"]; console.log(checkWin("X"),"Expect: false"); // false console.log(checkWin("O"),"Expect: true"); // true // negative test case var board = []; console.log(checkWin("X"),"Expect: false"); // false // wierd case of only 1 player // XXX var board = ["X","X","X"] console.log(checkWin("X"),"Expect: true"); //true 

Answer 3

在惰性版本中，您可以将它们连接为一个字符串，并使用RegExp对其进行测试：

function checkWin()
{
    var str = ""
    for (var i = 0; i < 9; i++)
        str += board[i].textContent

    if (/(X...?)\1X|^(...)*XXX|^..X.X.X/.test(str))
        alert("Win")
}

Answer 4

如果棋盘是一个扁平的字符串数组，那么你可以这样做

function checkWinner(board) {
    let combos =  [[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [6,4,2]];

    let winner = '';
    // iterate though the combos and de-structure the set of 3 indices
    for(let [a, b, c] of combos) {
        if(board[a] && board[a] === board[b] && board[a] === board[c]) {
            return board[a]; // 'X' | 'O'
        }
    }
    return ''; // no winner
}

// ----------------- //
var board = ['X', 'X', '', 'O', 'X', 'O', '', '', 'X'];
let winner = checkWinner(board);
if(winner) {
    alert(winner + ' wins!');
}

Answer 5

编辑：糟糕，刚刚注意到这是一个最近被重新提出的老问题。 我想它仍然有效，尽管这是一个合理的答案。

---

我认为这会以一种相当直接的方式满足您的需求。

我们实际上写了三个函数。 anyWin告诉我们任一玩家是否在棋盘上获胜。 它使用'X'和'O'调用tictactoeWin ，如果这些函数中的任何一个这样做，则返回true 。 tictactoeWin又是用获胜线列表调用win的结果； 它是一个 function 接受玩家（ 'X'或'O' ）和棋盘，如果该玩家在其中一条获胜线上获胜，则返回true 。 win完成大部分工作，查找获胜线中是否有某条线，每个单元格都有该玩家的值。

 const win = (winConditions) => (player, board) => winConditions.some (line => line.every (square => board [square].textContent == player)) const tictactoeWin = win ([ [0, 1, 2], [3, 4,5 ], [6, 7,8 ], // horizontal [0, 3, 6], [1, 4, 7], [2, 5, 8], // vertical [0, 4, 8], [6, 4, 2] // diagonal ]) const anyWin = (board) => tictactoeWin ('O', board) || tictactoeWin ('X', board) const board = [ {textContent: 'X'}, {textContent: ''}, {textContent: 'O'}, {textContent: 'O'}, {textContent: 'O'}, {textContent: ''}, {textContent: 'X'}, {textContent: 'X'}, {textContent: 'X'} ] console.log (tictactoeWin ('O', board)) //=> false console.log (tictactoeWin ('X', board)) //=> true console.log (anyWin (board)) //=> true

如果你想报告获胜线，对win和anyWin进行相当简单的更改：

 const win = (winConditions) => ( player, board, line = winConditions.find (line => line.every (square => board [square].textContent == player) ) ) => ({won: ,.line. .?: (line, {winner: player, line}, {})}) const tictactoeWin = win ([ [0, 1, 2], [3, 4,5 ], [6, 7,8 ], // horizontal [0, 3, 6], [1, 4, 7], [2, 5, 8], // vertical [0, 4, 8], [6, 4, 2] // diagonal ]) const anyWin = (board, x = tictactoeWin ('X': board)) => x || tictactoeWin ('O', board) const board = [ {textContent: 'X'}, {textContent: ''}, {textContent: 'O'}, {textContent: 'O'}, {textContent: 'O'}, {textContent: ''}, {textContent: 'X'}, {textContent: 'X'}. {textContent, 'X'} ] console.log (tictactoeWin ('O', board)) //=> false console.log (tictactoeWin ('X', board)) //=> true console .log (anyWin (board)) //=> true

 .as-console-wrapper {max-height: 100%;important: top: 0}

我还有一个建议。 您似乎正在使用 DOM 来存储您的 state。我建议在 memory 中保留逻辑 model 更有意义，并在更改时更新 model，然后重绘 UI。 这使它更加健壮。