Detecting 5 in einer Reihe

Question

Ich mache ein Spiel von Tic Tac Toe 5 in einer Reihe. Ich habe das Raster, in dem, wenn Sie auf ein Quadrat klicken, es eine "Koordinate" von [Reihe, Spalte] in der bestimmten Farbe des Punktes aufzeichnet. Ich bin momentan nicht sicher, wie man die "Koordinaten" benutzt, um eine fünf in einer Reihe jeder Farbe zu ermitteln und nur eine Nachricht auszudrucken.

Hinweis: Wenn 5 in einer Zeile mühsam mit dem Kopieren und Einfügen von vorherigen Code oder so wird, wird eine 3 in einer Reihe auch für mich arbeiten, und ich werde es nur in eine 5 in einer Zeile ändern. Verwenden Sie auch den Vollbildmodus, wenn Sie das unten stehende Code-Snippet anzeigen.

Code I bisher haben:

var white=true; 
 
function generateGrid(rows, cols) { 
 
    var grid = "<table>"; 
 
    for (row = 1; row <= rows; row++) { 
 
     grid += "<tr>"; 
 
     for (col = 1; col <= cols; col++) {  
 
      grid += "<td></td>"; 
 
     } 
 
     grid += "</tr>"; 
 
    } 
 
    return grid; 
 
} 
 

 
$("#tableContainer").append(generateGrid(10, 10)); 
 

 
$("td").click(function() { 
 
    $(this).css('cursor','default'); 
 
    var index = $("td").index(this); 
 
    var row = Math.floor((index)/10) + 1; 
 
    var col = (index % 10) + 1; 
 
    var $td = $(this); 
 
    if ($td.data('clicked')) 
 
     return; 
 
     if (white===true){ 
 
      var whi=[row,col]; 
 
      console.log("white coord is "+whi); 
 
     } else { 
 
      var bla=[row,col]; 
 
      console.log("black coord is "+bla); 
 
     } 
 

 
    $td.data('clicked', true); 
 

 
    $td.css('background-color', white ? 'white' : 'black'); 
 
    white = !white; 
 
});

html{ 
 
    background-color:#7189ea; 
 
} 
 
td { 
 
    border: 1px solid; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius:100%; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
}

<link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<div id="tableContainer"></div>

Answer 1

ich eine Funktion geschrieben habe, der überprüft, ob der letzte Schritt das Spiel gewinnt. Es loopt grundsätzlich die Quadrate in jede Richtung (und rückwärts) und sucht nach 5 in einer Reihe (die erforderliche Länge einer Linie).

var board = new Array(); 
 
var boardSize = 5; 
 
var requiredLineLength = 5; 
 
for (var r = 0; r < boardSize; r++) { 
 
    board[r] = new Array(); 
 
    for (var c = 0; c < boardSize; c++) { 
 
     board[r][c] = 0; 
 
    } 
 
} 
 

 
var lineDirections = [ 
 
    [0, 1], //horizontal 
 
    [1, 0], //vertical 
 
    [1, -1], //diagonal 1 
 
    [1, 1] //diagonal 2 
 
]; 
 

 
//example usage: 
 
board[0][0] = 1; 
 
board[1][0] = 1; 
 
board[2][0] = 1; 
 
board[3][0] = 1; 
 
board[4][0] = 1; 
 

 
console.log(checkWin(1, [0, 0])); 
 

 
// an empty square is marked with 0 
 
// the players are marked with 1 and 2 
 
// pl is the id of the player: either 1 or 2 
 
// lastMove is an array of size 2, with the coordinates of the last move played, for example: [3, 1] 
 
function checkWin(pl, lastMove) { 
 
    var boolWon = false; 
 
    for (var i = 0; i < lineDirections.length && !boolWon; i++) { 
 
     var shift = lineDirections[i]; 
 
     var currentSquare = [lastMove[0] + shift[0], lastMove[1] + shift[1]]; 
 
     var lineLength = 1; 
 

 
     while (lineLength < requiredLineLength && legalSquare(currentSquare) && board[currentSquare[0]][currentSquare[1]] === pl) { 
 
      lineLength++; 
 
      currentSquare[0] += shift[0]; 
 
      currentSquare[1] += shift[1]; 
 
     } 
 

 
     currentSquare = [lastMove[0] - shift[0], lastMove[1] - shift[1]]; 
 
     while (lineLength < requiredLineLength && legalSquare(currentSquare) && board[currentSquare[0]][currentSquare[1]] === pl) { 
 
      lineLength++; 
 
      currentSquare[0] -= shift[0]; 
 
      currentSquare[1] -= shift[1]; 
 
     } 
 
     if (lineLength >= requiredLineLength) 
 
      boolWon = true; 
 
    } 
 
    return boolWon; 
 
} 
 

 
function legalSquare(square) { 
 
    return square[0] < boardSize && square[1] < boardSize && square[0] >= 0 && square[1] >= 0; 
 
}

Es ist nicht voll, so mir getestet Lasst uns wissen, wenn Sie Probleme beim oder wenn Sie weitere Erläuterungen darüber, wie das funktioniert.