一排排地检测5

Question

我正在做一场连续的五趾抽搐游戏。我有一个网格，当你点击一个正方形时，它会在点的特定颜色中记录行、列的“坐标”。目前，我不知道如何使用“坐标”来检测任意一种颜色中的五种颜色，并打印出一条消息。

注意:如果一行中的5对先前代码的复制和粘贴变得单调乏味，那么一行中的3也适用于我，我只需将其修改为一行中的5。另外，当查看下面的代码片段时，请使用全屏模式。

我到目前为止的代码是：

​

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

我写了一个函数来检查最后一步是否赢得了比赛。它基本上在每个方向(和向后)循环方格，并在一行中查找5(一条线的所需长度)。

​

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

​

它还没有完全测试，所以让我知道，如果你遇到任何问题，或你是否需要澄清这是如何工作的。