我创建了一个井字棋游戏，当您按下增加棋盘尺寸按钮时，它会动态增加棋盘尺寸，但它不会验证对 Angular 线胜利...我不知道从这里该去哪里...
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);
...
我不确定这是唯一的问题，但如果您检查答案中的元素，您会发现 tds 的 ID 错误。例如，第 1 行的 td 为 r4col1，与第 2、3 和 4 行相同。 我将索引添加为 addCols 上的参数，并将其传递给 addTd，因此现在至少 HTML 是正确的。
关于Javascript Tic Tac Toe 游戏不会验证对 Angular 获胜者，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36292716/