Javascript Tic Tac Toe Spiel wird nicht für diagonale Gewinner validieren

Ich habe ein Tic Tac Toe-Spiel erstellt, das Board-Größe dynamisch erhöht, wenn Sie die Taste erhöhen Schaltfläche drücken, aber es wird nicht für diagonale Gewinne validieren ... i bin nicht sicher, wohin man von hier gehen ...Javascript Tic Tac Toe Spiel wird nicht für diagonale Gewinner validieren

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>

Quelle

2016-03-29 n.d.to

Es mir nicht klar ist, wie die Logik für einen Gewinner Überprüfung * überhaupt *, geschweige denn diagonal arbeitet . Möglicherweise müssen Sie dies in einem Debugger durchgehen und verstehen, was vor sich geht. – David

Putting es auf https://jsfiddle.net/ würde auch helfen – iagowp

@ n.d.to Was genau wollten Sie mit 'if erreichen (row_value ===" X "&& row_value === row) {'? – jehna1

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

Ich bin nicht sicher, dass dies das einzige Problem war, aber wenn Sie Element auf Ihrer Antwort inspizierten, würden Sie sehen, dass die tds die falsche ID hatten. Zum Beispiel wäre ein td in Zeile 1 r4col1, genauso wie Zeile 2, 3 und 4. Ich habe als Argument auf addCols den Index hinzugefügt und an addTd übergeben, so dass jetzt zumindest der HTML-Code korrekt ist.

Quelle

2016-03-29 19:23:55 iagowp

Ich habe Ihre checkWinnerTable Funktion umgeschrieben, da ich nicht wirklich herausfinden konnte, wie Sie das Problem lösen wollten.

Hier ist der 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; 
}

Und hier ist ein Arbeits JSFiddle:

https://jsfiddle.net/prtk7nca/

Quelle

2016-03-29 19:32:20 jehna1

Javascript Tic Tac Toe Spiel wird nicht für diagonale Gewinner validieren

Antwort

Verwandte Themen