I’ve created the below Connect Four game using JavaScript/jQuery but the code isn’t stopping when a player chooses 4 spaces diagonally. It doesn’t show the congratulations message and it doesn’t stop the players from playing further. There are no error messages in the console log, so I don’t see why its not working as it should.
$(document).ready(function() {
var player1Name = "";
var player2Name = "";
var turn = "";
var grid = [
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0]
];
var hasWinner = 0;
var moveCount = 0;
var i = 0;
var x = 0;
var y = 0;
function boardMsg(x) { // Display message function.
return $("#message_area").text(x);
}
function setTurn() { // Randomly select a player to go first.
var r = Math.floor((Math.random() * 2) + 1);
hasWinner = 0;
if (r == 1) {
turn = player1Name;
boardMsg("It's " + player1Name + "'s turn.");
} else {
turn = player2Name;
boardMsg("It's " + player2Name + "'s turn.");
}
}
function init() { // Initialise the grid.
turn = "";
grid = [
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0]
];
boardMsg("");
$(".col").map(function() {
$(this).removeClass("player1 player2");
}).get();
hasWinner = 0;
moveCount = 0;
}
$("#playButton").click(function() { // Start a new game.
if (hasWinner == 1) {
init();
}
player1Name = $("#player-1-inp").val();
player2Name = $("#player-2-inp").val();
if (player1Name == "" || player2Name == "") {
$("<div>Please enter player names.</div>").dialog({
title: "ALERT!"
});
return;
}
setTurn();
});
$(".col").click(function() { // Process mouse clicks for both players.
player1Name = $("#player-1-inp").val();
player2Name = $("#player-2-inp").val();
if (player1Name == "" || player2Name == "") {
$("<div>Please enter player names.</div>").dialog({
title: "ALERT!"
});
return;
}
var row = $(this).parent().index();
var col = $(this).index();
if (grid[row][col] !== 0) {
$("<div>This position has already been filled.</div>").dialog({
title: "ALERT!"
});
return;
}
if (hasWinner == 1) {
$("<div>To start another game, click Play again.</div>").dialog({
title: "CONGRATULATIONS!"
});
return;
}
if (turn == player1Name) {
moveCount++;
$(this).addClass("player1");
grid[row][col] = 1;
var ifWon = winnerCheck(1, player1Name);
if (!ifWon) {
if (moveCount >= 49) {
boardMsg("Match Drawn!");
moveCount = 0;
hasWinner = 1;
$("<div>To start a new game, click the Play button.</div>").dialog({
title: "MATCH DRAWN!"
});
return;
} else {
turn = player2Name;
boardMsg("It's " + player2Name + "'s turn.");
}
return;
} else {
return;
}
} else if (turn == player2Name) {
moveCount++;
$(this).addClass("player2");
grid[row][col] = 2;
var ifWon = winnerCheck(2, player2Name);
if (!ifWon) {
if (moveCount >= 49) {
boardMsg("Match Drawn!");
moveCount = 0;
hasWinner = 1;
$("<div>To start a new game, click the Play button.</div>").dialog({
title: "MATCH DRAWN!"
});
return;
} else {
turn = player1Name;
boardMsg("It's " + player1Name + "'s turn.");
}
return;
} else {
return;
}
}
});
function winnerCheck(n, playerName) { // Check for winner.
for (i = 0; i < 7; i++) { // check for winner by row.
if (
(grid[i][0] == n && grid[i][1] == n && grid[i][2] == n && grid[i][3] == n) ||
(grid[i][1] == n && grid[i][2] == n && grid[i][3] == n && grid[i][4] == n) ||
(grid[i][2] == n && grid[i][3] == n && grid[i][4] == n && grid[i][5] == n) ||
(grid[i][3] == n && grid[i][4] == n && grid[i][5] == n && grid[i][6] == n)) {
boardMsg("Congratulations " + playerName + " you have won!");
hasWinner = 1;
moveCount = 0;
$("<div>To start a new game, click the Play button.</div>").dialog({
title: "CONGRATULATIONS!"
});
return true;
}
}
for (i = 0; i < 7; i++) { // check for winner by column.
if (
(grid[0][i] == n && grid[1][i] == n && grid[2][i] == n && grid[3][i] == n) ||
(grid[1][i] == n && grid[2][i] == n && grid[3][i] == n && grid[4][i] == n) ||
(grid[2][i] == n && grid[3][i] == n && grid[4][i] == n && grid[5][i] == n) ||
(grid[3][i] == n && grid[4][i] == n && grid[5][i] == n && grid[6][i] == n)) {
boardMsg("Congratulations " + playerName + " you have won!");
hasWinner = 1;
moveCount = 0;
$("<div>To start a new game, click the Play button.</div>").dialog({
title: "CONGRATULATIONS!"
});
return true;
}
}
// diagonal winner forwards
if (x < 4 && y < 4) {
if (grid[x][y] == n && grid[x + 1][y + 1] == n && grid[x + 2][y + 2] == n && grid[x + 3][y + 3] == n) {
boardMsg("Congratulations " + playerName + " you have won!");
hasWinner = 1;
moveCount = 0;
$("<div>To start a new game, click the Play button.</div>").dialog({
title: "CONGRATULATIONS!"
});
return true;
}
}
if (x < 5 && x > 0 && y < 5 && y > 0) {
if (grid[x][y] == n && grid[x + 1][y + 1] == n && grid[x + 2][y + 2] == n && grid[x - 1][y - 1] == n) {
boardMsg("Congratulations " + playerName + " you have won!");
hasWinner = 1;
moveCount = 0;
$("<div>To start a new game, click the Play button.</div>").dialog({
title: "CONGRATULATIONS!"
});
return true;
}
}
if (x < 6 && x > 1 && y < 6 && y > 1) {
if (grid[x][y] == n && grid[x + 1][y + 1] == n && grid[x - 1][y - 1] == n && grid[x - 2][y - 2] == n) {
boardMsg("Congratulations " + playerName + " you have won!");
hasWinner = 1;
moveCount = 0;
$("<div>To start a new game, click the Play button.</div>").dialog({
title: "CONGRATULATIONS!"
});
return true;
}
}
if (x > 2 && y > 2) {
if (grid[x][y] == n && grid[x - 1][y - 1] == n && grid[x - 2][y - 2] == n && grid[x - 3][y - 3] == n) {
boardMsg("Congratulations " + playerName + " you have won!");
hasWinner = 1;
moveCount = 0;
$("<div>To start a new game, click the Play button.</div>").dialog({
title: "CONGRATULATIONS!"
});
return true;
}
}
// diagonal winner backwards
if (x < 4 && y > 2) {
if (grid[x][y] == n && grid[x + 1][y - 1] == n && grid[x + 2][y - 2] == n && grid[x + 3][y - 3] == n) {
boardMsg("Congratulations " + playerName + " you have won!");
hasWinner = 1;
moveCount = 0;
$("<div>To start a new game, click the Play button.</div>").dialog({
title: "CONGRATULATIONS!"
});
return true;
}
}
if (x > 0 && x < 6 && y < 5 && y > 0) {
if (grid[x][y] == n && grid[x + 1][y - 1] == n && grid[x + 2][y - 2] == n && grid[x - 1][y + 1] == n) {
boardMsg("Congratulations " + playerName + " you have won!");
hasWinner = 1;
moveCount = 0;
$("<div>To start a new game, click the Play button.</div>").dialog({
title: "CONGRATULATIONS!"
});
return true;
}
}
if (x > 1 && x < 5 && y < 4 && y > 1) {
if (grid[x][y] == n && grid[x + 1][y - 1] == n && grid[x - 2][y + 2] == n && grid[x - 1][y + 1] == n) {
boardMsg("Congratulations " + playerName + " you have won!");
hasWinner = 1;
moveCount = 0;
$("<div>To start a new game, click the Play button.</div>").dialog({
title: "CONGRATULATIONS!"
});
return true;
}
}
if (x > 2 && y < 4) {
if (grid[x][y] == n && grid[x - 3][y + 3] == n && grid[x - 2][y + 2] == n && grid[x - 1][y + 1] == n) {
boardMsg("Congratulations " + playerName + " you have won!");
hasWinner = 1;
moveCount = 0;
$("<div>To start a new game, click the Play button.</div>").dialog({
title: "CONGRATULATIONS!"
});
return true;
}
}
return false;
}
});<h1> Connect Four </h1>
<div id="game_board">
<div class="row">
<div class="col" id="0"> </div>
<div class="col" id="1"> </div>
<div class="col" id="2"> </div>
<div class="col" id="3"> </div>
<div class="col" id="4"> </div>
<div class="col" id="5"> </div>
<div class="col" id="6"> </div>
</div>
<div class="row">
<div class="col" id="7"> </div>
<div class="col" id="8"> </div>
<div class="col" id="9"> </div>
<div class="col" id="10"> </div>
<div class="col" id="11"> </div>
<div class="col" id="12"> </div>
<div class="col" id="13"> </div>
</div>
<div class="row">
<div class="col" id="14"> </div>
<div class="col" id="15"> </div>
<div class="col" id="16"> </div>
<div class="col" id="17"> </div>
<div class="col" id="18"> </div>
<div class="col" id="19"> </div>
<div class="col" id="20"> </div>
</div>
<div class="row">
<div class="col" id="21"> </div>
<div class="col" id="22"> </div>
<div class="col" id="23"> </div>
<div class="col" id="24"> </div>
<div class="col" id="25"> </div>
<div class="col" id="26"> </div>
<div class="col" id="27"> </div>
</div>
<div class="row">
<div class="col" id="28"> </div>
<div class="col" id="29"> </div>
<div class="col" id="30"> </div>
<div class="col" id="31"> </div>
<div class="col" id="32"> </div>
<div class="col" id="33"> </div>
<div class="col" id="34"> </div>
</div>
<div class="row">
<div class="col" id="35"> </div>
<div class="col" id="36"> </div>
<div class="col" id="37"> </div>
<div class="col" id="38"> </div>
<div class="col" id="39"> </div>
<div class="col" id="40"> </div>
<div class="col" id="41"> </div>
</div>
<div class="row">
<div class="col" id="42"> </div>
<div class="col" id="43"> </div>
<div class="col" id="44"> </div>
<div class="col" id="45"> </div>
<div class="col" id="46"> </div>
<div class="col" id="47"> </div>
<div class="col" id="48"> </div>
</div>
</div>
<div id="panel">
<input type="text" id="player-1-inp" placeholder="Player 1 Name">
<input type="text" id="player-2-inp" placeholder="Player 2 Name">
<button id="playButton">PLAY</button>
<div id="message_area">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>Would someone be able to help me and let me know what’s wrong with my code please?