Connect Four: Справка по использованию JQuery в функции

Question

Я новичок в программировании и пытаюсь создать простую игру Html/CSS/Javascript/JQuery Connect Four. Вот what i have so far.

Только проблема в том, что вы не можете сложить маркеры друг на друга! Это соединение четырех игр отстой;)!

Внутри функции dropToken(), я пытаюсь создать цикл с, если заявление, чтобы найти, если пространство Я пытаюсь поставить маркер на белый, или же, поднимитесь один tr с помощью var i счетчика в цикл for.

function dropToken(obj, column) 
{    
    for (var i == 6; i > 0; i--) 
    { 
     if ($('table tr:last-child td:nth-child(' + column + ')').css("background-color") == "white") 
     { 
      $('table tr:last-child td:nth-child(' + column + ')').css("background-color", playerTurn); 
     } 
    } 
    if (playerTurn == "Red") 
    { 
     playerTurn = "Blue" 
     obj.style.backgroundColor = "Blue"; 
    } 
    else 
    { 
     playerTurn = "Red" 
     obj.style.backgroundColor = "Red"; 
    } 
} 

Однако этот код делает программу not work.

Answer 1

Попробуйте

http://jsfiddle.net/f7hpoyfj/1/

Вы должны использовать if (element.css("background-color") == "rgba(0, 0, 0, 0)") для сравнения цвета. Это может быть или не быть зависимым от браузера. Не знаю.

Также, посмотрите, как я создал цикл - вы не использовали i в своей предыдущей функции, которая, по моему мнению, является ошибкой, поскольку вы эффективно сравнивали один и тот же элемент над и снова.

for (var i = 7; i > 1; i--) 
{ 
    var element = $('table tr:nth-child(' + i + ') td:nth-child(' + column + ')'); 
    if (element.css("background-color") == "rgba(0, 0, 0, 0)" || element.css("background-color") == "transparent" || element.css("background-color") == "white") 
    { 
     element.css("background-color", playerTurn); 
     break; 
    } 
} 

Answer 2

Для чего-то более компактное и Jquery как:

$(".topRow td").click(function(){ 
 
    var col = $(this).parent().children().index($(this)); 
 
    
 
    
 
    var activePlayer = $(this).closest("table").data("activeplayer"); 
 
    //Get First available slot 
 
    var cells = $("table tr td:nth-child(" + (col+1) +")"); 
 
    var cell; 
 
    for(var i = cells.length -1; i > -1; i--) 
 
    { 
 
     if($(cells[i]).data("token") == undefined) 
 
     { 
 
      cell = cells[i]; 
 
      break; 
 
     } 
 
    } 
 
    
 
    $(cell).data("token", activePlayer).addClass(activePlayer);  
 
    
 
    
 
    //Toggle Active Player 
 
    activePlayer = activePlayer == "red" ? "blue" : "red"; 
 
    $(this).closest("table").toggleClass("red blue").data("activeplayer", activePlayer); 
 
    
 

 
});

table { 
 
    border-bottom: 4px solid black; 
 
    border-left: 4px solid black; 
 
    border-right: 4px solid black; 
 
} 
 

 
td { 
 
    border-radius: 50%; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 2px solid black; 
 
} 
 

 
table.blue .topRow td:hover, td.blue 
 
{ 
 
background-color:blue;  
 
} 
 

 
table.red .topRow td:hover, td.red 
 
{ 
 
background-color:red;  
 
} 
 

 

 

 

 
.topRow td { 
 
    border: 2px solid white; 
 
    margin-bottom: 10px; 
 
} 
 

 
button { 
 
    width: 400px; 
 
    height: 40px; 
 
    margin-top: 20px; 
 
    margin-left: 10px; 
 
    font-family: Calibri; 
 
    font-weight: bold; 
 
    font-size: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table data-activeplayer="blue" class="blue"> 
 
     <tr class="topRow"> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
    </table> 
 
    <button type="button" onclick="resetBoard()">Empty Tokens</button>

Я оставлю его вам за все ясно. Использование данных может упростить определение условий «выиграть».