Javascript Tic Tac Toe游戏不会验证对角线赢家

I've created a tic tac toe game that dynamically increases board size when you press the increase board size button but it won't validate for diagonal wins...i'm not sure where to go from here...

我已经创建了一个tic tac toe游戏,当您按下增加的板尺寸按钮时会动态增加板尺寸,但它不会验证对角线的胜利......我不知道从这里开始...

javascript

$(document).ready(function() {
  var turn = 1;
  var number = 3;

  function addRow(i) {
    var table = document.getElementById('table');
    var newRow = table.insertRow();
    newRow.id = "row" + i;
    addCols(newRow);
  }

  function addCols(row) {
    for (var i = 1; i <= number; i++){
      addTd(i,number,row);
    }
  }

  function addTd(columnnumber,rownumber,row) {
    var newCol = document.createElement('td');
    newCol.id = "r" + rownumber + "col" + columnnumber;
    row.appendChild(newCol);
  }
  //creating one click event for each td
  $('td').one('click', function() {
    if (turn % 2 === 0) {
      $(this).html('O');
    } else {
    $(this).html('X');
  }
    turn++;
    checkWinnerTable();
  });

  $('button.in').on('click', function() {
    destroyBoard();
    number++;

    for (var i = 1; i <= number; i++){
      addRow(i);
    }

    function destroyBoard(){
      $('tr').remove();
    }

  });

  function checkWinnerTable() {
    //loop to check # of rows
    for (var i = 1; i <= number; i++){
      var row = document.getElementById('row' + i);
      //loop to check # of cols
      for (var j = 1; j <= number; j++) {
         var col = document.getElementById('r' + i + 'col' + j);
        checkValue(row);
      }
    }
  }
    function checkValue(row){
      var row_value = row.value;
      if (row_value === "X" && row_value === row) {
        alert("X wins");
      }
      else if (row_value === "O" && row_value === row){
         alert("O wins")
      }
    }
});

HTML

<!DOCTYPE html>
<html lang="en">
<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src = "tictactoe.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
  <link rel = "stylesheet" type="text/css" href="tictactoe.css">

  <meta charset="UTF-8">
  <title>Tic tac toe</title>

</head>
<body>
  <h1> Tic - Tac - Toe </h1>
  <div class = "board-size-in">
    <button class = "in" type="button"> Click to increase board size </button>
  </div>
  <!-- <div class = "board-size-de">
  <button class = "de" type="button"> Click to decrease board size </button>
</div> -->
  <div class = "message">
  </div>
  <table id ="table" style="width:100%">
    <tr id= "row1">
      <td id= "r1col1"></td>
      <td id= "r1col2"></td>
      <td id= "r1col3"></td>
    </tr>

    <tr id="row2">
      <td id= "r2col1"></td>
      <td id= "r2col2"></td>
      <td id= "r2col3"></td>
    </tr>

    <tr id= "row3">
      <td id= "r3col1"></td>
      <td id= "r3col2"></td>
      <td id= "r3col3"></td>
    </tr>

  </table>

</body>
</html>

2 个解决方案

#1

function addRow(i) {
  var table = document.getElementById('table');
  var newRow = table.insertRow();
  newRow.id = "row" + i;
  addCols(newRow, i);
}

function addCols(row, rowindex) {
  for (var i = 1; i <= number; i++){
    addTd(i,number,row, rowindex);
  }
}

function addTd(columnnumber,rownumber,row, rowindex) {
  var newCol = document.createElement('td');
  newCol.id = "r" + rowindex + "col" + columnnumber;
  row.appendChild(newCol);
...

I'm not sure this was the only issue, but if you inspected element on your answer, you'd see the tds had the wrong id. For example a td on row 1 would be r4col1, same as row 2, 3 and 4. I added as as argument on addCols the index, and passed it to addTd so now at least the HTML is correct.

我不确定这是唯一的问题,但是如果你在答案中检查了元素,你会发现tds有错误的ID。例如,第1行的td将是r4col1,与第2,3和4行相同。我在addCols上添加了作为参数的索引,并将其传递给addTd,所以现在至少HTML是正确的。

#2

I rewrote your checkWinnerTable function, since I could not really figure out how you were trying to solve the issue.

我重写了你的checkWinnerTable函数,因为我无法弄清楚你是如何试图解决这个问题的。

Here's the code:

这是代码:

function checkWinnerTable() {
  var col;
  var cross;
  var row;
  var matches;
  var toMatch;

  // Check vertical
  for (col = 1; col <= number; col++) {
    matches = 1;
    toMatch = getValue(1, col);
    if (toMatch == "") continue;
    for (var row = 2; row <= number; row++) {
      if (getValue(row, col) == toMatch) matches++;
    }
    if (matches == number) {
      win(toMatch);
    }
  }

  // Check horizontal
  for (row = 1; row <= number; row++) {
    matches = 1;
    toMatch = getValue(row, 1);
    if (toMatch == "") continue;
    for (col = 2; col <= number; col++) {
      if (getValue(row, col) == toMatch) matches++;
    }
    if (matches == number) {
      win(toMatch);
    }
  }

  // Check cross
  cross = 1;
  matches = 1;
  toMatch = getValue(cross, cross);
  if (toMatch != "") {
    for (cross = 2; cross <= number; cross++) {
      if (getValue(cross, cross) == toMatch) matches++;
    }
    if (matches == number) {
      win(toMatch);
    }
  }

  // Check cross to other way
  cross = 1;
  matches = 1;
  toMatch = getValue(cross, number+1-cross);
  if (toMatch != "") {
    for (cross = 2; cross <= number; cross++) {
      if (getValue(cross, number+1-cross) == toMatch) matches++;
    }
    if (matches == number) {
      win(toMatch);
    }
  }
}

function win(which) {
  alert("Congrats! " + which + " won!");
}

function getValue(row, col) {
  return document.getElementById("r"+row+"col"+col).innerHTML;
}

And here's a working JSFiddle:

这是一个有效的JSFiddle:

https://jsfiddle.net/prtk7nca/

#1

function addRow(i) {
  var table = document.getElementById('table');
  var newRow = table.insertRow();
  newRow.id = "row" + i;
  addCols(newRow, i);
}

function addCols(row, rowindex) {
  for (var i = 1; i <= number; i++){
    addTd(i,number,row, rowindex);
  }
}

function addTd(columnnumber,rownumber,row, rowindex) {
  var newCol = document.createElement('td');
  newCol.id = "r" + rowindex + "col" + columnnumber;
  row.appendChild(newCol);
...

#2