Simple Connect Four Game Code
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
.board button{ width: 100px; height: 100px; background-color: gray; margin: 1px; border: 4px solid black; border-radius: 50%; }
JAVASCRIPT
// 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
Reply