Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Game #60

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Game #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
76d3911
added connect 4 game
kashish-219 Oct 16, 2023
56d0761
changes done
kashish-219 Oct 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions JavaScriptLogicGames/connect four game /connect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.board button
{
width: 100px;
height: 100px;
background-color: gray;
margin: 5px;
border-radius: 50%;
border: 4px solid black;
}
121 changes: 121 additions & 0 deletions JavaScriptLogicGames/connect four game /connect.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Connect Four</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="connect.css">
</head>
<body>
<div class="container" align="center">
<h1>Welcome to Connect Four</h1>
<h2>Connect 4 chips to win!</h2>
<h3>Let's Start</h3>

<table class="board">
<tr>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
</tr>
<tr>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
</tr>
<tr>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
</tr>
<tr>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
</tr>
<tr>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
</tr>

<tr>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
<td><button type="button"</button>
</td>
</tr>

</table>
</div>
<script src="jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="connect.js">
</script>
</body>
</html>
151 changes: 151 additions & 0 deletions JavaScriptLogicGames/connect four game /connect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
var player1 = prompt("Player One : Enter Your Name , you will be Blue");
var player1Color = 'rgb(86, 151 , 255)';

var player2 = prompt("Player Two : Enter Your Name , you will be Red");
var player2Color = 'rgb(237, 45, 73)';

var game_on = true;
var table = $('table tr');

function reportWin(rowNum,colNum)
{
console.log("You won starting at this row,col");
console.log(rowNum);
console.log(colNum);
}

function changeColor(rowIndex,colIndex,color)
{
return table.eq(rowIndex).find('td').eq(colIndex).find('button').css('background-color',color);
}

function returnColor(rowIndex,colIndex)
{
return table.eq(rowIndex).find('td').eq(colIndex).find('button').css('background-color');
}

function checkBottom(colIndex)
{
var colorReport = returnColor(5,colIndex);
for(var row = 5; row > -1; row--)
{
colorReport=returnColor(row,colIndex);
if(colorReport === 'rgb(128, 128, 128)')
{
return row;
}
}
}

function colorMatchCheck(one,two,three,four)
{
return (one===two && one ===three && one===four && one !== 'rgb(128, 128, 128)' && one !== undefined)
}

//check for horizontal wins
function horizontalWinCheck()
{
for(var row = 0; row < 6; row++)
{
for(var col = 0; col<4; col++)
{
if(colorMatchCheck(returnColor(row,col),returnColor(row,col+1),returnColor(row,col+2),returnColor(row,col+3)))
{
console.log('horizontal');
reportWin(row,col);
return true;
}
else
{
continue;
}
}
}
}

//check for Vertical wins
function verticalWinCheck()
{
for(var col = 0; col < 7; col++)
{
for(var row = 0; row<4; row++)
{
if(colorMatchCheck(returnColor(row,col),returnColor(row+1,col),returnColor(row+2,col),returnColor(row+3,col)))
{
console.log('vertical');
reportWin(row,col);
return true;
}

else
{
continue;
}
}
}
}


//check for diagonal wins
function diagonalWinCheck()
{
for(var col = 0; col < 5; col++)
{
for(var row = 0; row < 7; row++)
{
if(colorMatchCheck(returnColor(row,col),returnColor(row+1,col+1),returnColor(row+2,col+2),returnColor(row+3,col+3)))
{
console.log('diagonal');
reportWin(row,col);
return true;
}
else if(colorMatchCheck(returnColor(row,col),returnColor(row-1,col+1),returnColor(row-2,col+2),returnColor(row-3,col+3)))
{
console.log('diagonal');
reportWin(row,col);
return true;
}
else
{
continue;
}
}
}
}

var currentPlayer = 1;
var currentName = player1;
var currentColor = player1Color;

$('h3').text(player1 + " it is your turn ,pick a column to drop in !");

$('.board button').on('click',function()
{
var col = $(this).closest('td').index();

var bottomAvail = checkBottom(col);

changeColor(bottomAvail,col,currentColor);

if(horizontalWinCheck() || verticalWinCheck() || diagonalWinCheck())
{
$('h1').text(currentName + " You have Won!");

$('h3').fadeOut('fast');
$('h2').fadeOut('fast');
}

currentPlayer = currentPlayer * -1;

if(currentPlayer === 1)
{
currentName = player1;
$('h3').text(currentName + " it is your turn.");
currentColor=player1Color;
}
else {
currentName=player2;
$('h3').text(currentName+ " it is your turn.");
currentColor=player2Color;
}
});
2 changes: 2 additions & 0 deletions JavaScriptLogicGames/connect four game /jquery-3.6.4.min.js
View file
Open in desktop

Large diffs are not rendered by default.