For this simple game. You have to create an HTML file, a CSS file, and a JAVASCRIPT file. Follow the below line for full code.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Connect Four</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="my.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="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src="my.js" charset="utf-8"></script>
</body>
</html>
CSS
</div>
<div>.board button{
width: 100px;
height: 100px;
background-color: gray;
margin: 1px;
border: 4px solid black;
border-radius: 50%;
}</div>
<div>
JAVASCRIPT & JQUERY
// We need to use jQuery for the following:
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');
// http://stackoverflow.com/questions/6139407/getting-td-by-index-with-jquery
function reportWin(rowNum,colNum) {
console.log("You won starting at this row,col");
console.log(rowNum);
console.log(colNum);
}
// Change the color of a button
function changeColor(rowIndex,colIndex,color) {
return table.eq(rowIndex).find('td').eq(colIndex).find('button').css('background-color',color);
}
// Report Back to current color of a button
function returnColor(rowIndex,colIndex) {
return table.eq(rowIndex).find('td').eq(colIndex).find('button').css('background-color');
}
// Take in column index, returns the bottom row that is still gray
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
}
}
}
// Check to see if 4 inputs are the same color
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('horiz');
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 < 3; 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('diag');
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('diag');
reportWin(row,col);
return true;
}else {
continue;
}
}
}
}
// Game End
function gameEnd(winningPlayer) {
for (var col = 0; col < 7; col++) {
for (var row = 0; row < 7; row++) {
$('h3').fadeOut('fast');
$('h2').fadeOut('fast');
$('h1').text(winningPlayer+" has won! Refresh your browser to play again!").css("fontSize", "50px")
}
}
}
// Start with Player One
var currentPlayer = 1;
var currentName = player1;
var currentColor = player1Color;
// Start with Player One
$('h3').text(player1+": it is your turn, please pick a column to drop your blue chip.");
$('.board button').on('click',function() {
// Recognize what column was chosen
var col = $(this).closest("td").index();
// Get back bottom available row to change
var bottomAvail = checkBottom(col);
// Drop the chip in that column at the bottomAvail Row
changeColor(bottomAvail,col,currentColor);
// Check for a win or a tie.
if (horizontalWinCheck() || verticalWinCheck() || diagonalWinCheck()) {
gameEnd(currentName);
}
// If no win or tie, continue to next player
currentPlayer = currentPlayer * -1 ;
// Re-Check who the current Player is.
if (currentPlayer === 1) {
currentName = player1;
$('h3').text(currentName+": it is your turn, please pick a column to drop your blue chip.");
currentColor = player1Color;
}else {
currentName = player2
$('h3').text(currentName+": it is your turn, please pick a column to drop your red chip.");
currentColor = player2Color;
}
})
// Helper function to help you understand Rows and Columns From A Table
// http://stackoverflow.com/questions/788225/table-row-and-column-number-in-jquery
//
// $('.board button').on('click',function(){
// // This is the Column Number (starts at zero):
// console.log('This is the Column:');
// console.log($(this).closest("td").index());
// // This is the Row Number:
// console.log("This is the Row:");
// console.log($(this).closest("tr").index());
// console.log('\n');
// // This is a way to grab a particular cell (replace):
// // $('table').eq(rowIndex).find('td').eq(colIndex)
// });
// // Change color on click
// $('.board button').on('click',function() {
// if($(this).css('background-color') === 'rgb(51, 51, 51)'){
// $(this).css('background-color','rgb(86, 151, 255)');
// }else if ($(this).css('background-color') === 'rgb(86, 151, 255)'){
// $(this).css('background-color','rgb(237, 45, 73)');
// }else{
// $(this).css('background-color','rgb(51, 51, 51)');
// }
// });
Put these file in one folder and see the magic. For execute the example, you could see this Connect Four Link