Question

我已经创建了一个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>

Answer 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);
...

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

Answer 2

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

以下是代码：

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;
}

这是一个有效的JSFiddle：

https://jsfiddle.net/prtk7nca/

Javascript Tic Tac Toe游戏赢得了对角线冠军的验证

2 个答案: