Javascript Tic Tac Toe游戏获胜't验证对角线赢家

Javascript Tic Tac Toe game won't validate for diagonal winner

本文关键字：验证 对角线 赢家 Tac Tic Toe 游戏 获胜 Javascript      更新时间：2023-09-26

我创建了一个井字游戏，当你按下增加棋盘尺寸按钮时，它会动态增加棋盘尺寸，但它不会验证对角线胜利。。。我不知道从这里到哪里去。。。

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>

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

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

我重写了您的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/

相关文章：