javascript - 如何使用 for 循环来检查井字游戏中的获胜者

Question

我正在尝试构建一个 javascript tic tac toe 游戏，我现在需要检查是否有获胜者。而不是编写冗余代码，我相信我已经开始这样做了。如何使用 for 循环检查获胜者，而无需编写冗余代码？

<div id="board">
  <div class="row">
    <div data-n=1 class="sq sq-1"></div>
    <div data-n=2 class="sq sq-2"></div>
    <div data-n=3 class="sq sq-3"></div>
  </div>
  <div class="row">
    <div data-n=4 class="sq sq-4"></div>
    <div data-n=5 class="sq sq-5"></div>
    <div data-n=6 class="sq sq-6"></div>
  </div>
  <div class="row">
    <div data-n=7 class="sq sq-7"></div>
    <div data-n=8 class="sq sq-8"></div>
    <div data-n=9 class="sq sq-9"></div>
  </div>
</div>




//using counter to alternate player
var counter = 0;
var currentPlayer;

$('.sq').on('click', function() {
  if (!this.innerHTML) {
    if (counter % 2 === 0) {
      this.innerHTML = '0';
      currentPlayer = '0';
    } else {
      this.innerHTML = 'X';
      currentPlayer = 'X';
    }  
  counter++;
 } 

  //check if there is a winner here
  if ($('.sq-1').html() == currentPlayer && 
      $('.sq-2').html() == currentPlayer &&
      $('.sq-3').html() == currentPlayer) {
      console.log(currentPlayer + ' wins');
   };
});

JS fiddle :https://jsfiddle.net/payam10/6qzu7L4f/4/

Answer 1

井字棋中只有 8 种获胜方式，所以我可能会做一些简单的事情，例如:

<div id="board">
  <div class="row">
    <div class="sq sq-1 win-1 win-4 win-7"></div>
    <div class="sq sq-2 win-1 win-5"></div>
    <div class="sq sq-3 win-1 win-6 win-8"></div>
  </div>
  <div class="row">
    <div class="sq sq-4 win-2 win-4"></div>
    <div class="sq sq-5 win-2 win-5 win-7 win-8"></div>
    <div class="sq sq-6 win-2 win-6"></div>
  </div>
  <div class="row">
    <div class="sq sq-7 win-3 win-4 win-8"></div>
    <div class="sq sq-8 win-3 win-5"></div>
    <div class="sq sq-9 win-3 win-6 win-7"></div>
  </div>
</div>

使用类:

$('.sq').on('click', function() {
  var currentPlayer = "player-x";
  if (!$(this).hasClass("player-x")
    && !$(this).hasClass("player-o") {
    $(this).addClass(currentPlayer);
    if (currentPlayer == "player-x")
      currentPlayer = "player-o";
    else
      currentPlayer = "player-x";
  }
} 

然后是一个简单的循环:

for var(var winIndex = 1; winIndex < 9; winIndex++){
  var selector = ".win-" + winIndex.toString();
  var x = $(select + ".player-x");
  var y = $(select + ".player-o");
  if (x.length == 3)
    // player x won
  if (y.length == 3)
    // player o won

  $('.board').addClass('winner-' + winIndex.toString());
}

也许添加一些 CSS 来自动化 X 和 O。

.sq.player-x::{
  content: "X"
}
.sq.player-o::{
  content: "O"
}

当有人用 CSS 获胜时，我会很高兴。

#board.winner-1 .win-1{
  background-color: yellow;
}