Geek Answers Handbook

Connect Four: Help Using jQuery in a function

I am new to programming and try to make a simple game Html / CSS / Javascript / JQuery Connect Four. Here is what I still have.

Only problem is that you cannot stack tokens on top of each other! This mix of four games sucks; )

Inside the dropToken() function, I am trying to create a for loop with an if statement to determine if the space in which I am trying to put the token is white, or go to one tr using var i in the for loop.

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

However, this code makes the program inoperative.

+5
source share
2 answers

try it

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

For color comparison you need to use if (element.css("background-color") == "rgba(0, 0, 0, 0)") . It may or may not be browser dependent. Not sure.

Also, look how I created the loop - you did not use i in your previous function, which, in my opinion, is a mistake, since you effectively compared the same element over and over again.

 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; } }
+5
source

For something more compact and jQuery like:

 $(".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>

I will leave it for you to understand everything. The use of data may simplify the definition of “win” conditions.

0
source

More articles:


All Articles