HTML ⛶ <H1>CONNECT4 Challenge</H1> <div id="colorTurn">Yellow Turn</div> <div id="grid"> <div class="row"> <div class="cell" id="cell00" onclick="selectColumn(0)"></div> <div class="cell" id="cell01" onclick="selectColumn(1)"></div> <div class="cell" id="cell02" onclick="selectColumn(2)"></div> <div class="cell" id="cell03" onclick="selectColumn(3)"></div> <div class="cell" id="cell04" onclick="selectColumn(4)"></div> <div class="cell" id="cell05" onclick="selectColumn(5)"></div> <div class="cell" id="cell06" onclick="selectColumn(6)"></div> </div> <div class="row"> <div class="cell" id="cell10" onclick="selectColumn(0)"></div> <div class="cell" id="cell11" onclick="selectColumn(1)"></div> <div class="cell" id="cell12" onclick="selectColumn(2)"></div> <div class="cell" id="cell13" onclick="selectColumn(3)"></div> <div class="cell" id="cell14" onclick="selectColumn(4)"></div> <div class="cell" id="cell15" onclick="selectColumn(5)"></div> <div class="cell" id="cell16" onclick="selectColumn(6)"></div> </div> <div class="row"> <div class="cell" id="cell20" onclick="selectColumn(0)"></div> <div class="cell" id="cell21" onclick="selectColumn(1)"></div> <div class="cell" id="cell22" onclick="selectColumn(2)"></div> <div class="cell" id="cell23" onclick="selectColumn(3)"></div> <div class="cell" id="cell24" onclick="selectColumn(4)"></div> <div class="cell" id="cell25" onclick="selectColumn(5)"></div> <div class="cell" id="cell26" onclick="selectColumn(6)"></div> </div> <div class="row"> <div class="cell" id="cell30" onclick="selectColumn(0)"></div> <div class="cell" id="cell31" onclick="selectColumn(1)"></div> <div class="cell" id="cell32" onclick="selectColumn(2)"></div> <div class="cell" id="cell33" onclick="selectColumn(3)"></div> <div class="cell" id="cell34" onclick="selectColumn(4)"></div> <div class="cell" id="cell35" onclick="selectColumn(5)"></div> <div class="cell" id="cell36" onclick="selectColumn(6)"></div> </div> <div class="row"> <div class="cell" id="cell40" onclick="selectColumn(0)"></div> <div class="cell" id="cell41" onclick="selectColumn(1)"></div> <div class="cell" id="cell42" onclick="selectColumn(2)"></div> <div class="cell" id="cell43" onclick="selectColumn(3)"></div> <div class="cell" id="cell44" onclick="selectColumn(4)"></div> <div class="cell" id="cell45" onclick="selectColumn(5)"></div> <div class="cell" id="cell46" onclick="selectColumn(6)"></div> </div> <div class="row"> <div class="cell" id="cell50" onclick="selectColumn(0)"></div> <div class="cell" id="cell51" onclick="selectColumn(1)"></div> <div class="cell" id="cell52" onclick="selectColumn(2)"></div> <div class="cell" id="cell53" onclick="selectColumn(3)"></div> <div class="cell" id="cell54" onclick="selectColumn(4)"></div> <div class="cell" id="cell55" onclick="selectColumn(5)"></div> <div class="cell" id="cell56" onclick="selectColumn(6)"></div> </div> </div> <input id="resetButton" type="button" value="Reset" onclick="refreshGrid()" /></br></br> <centter><a href="http://www.101Computing.net/connect4-challenge/" target="_blank">View Blog Post on 101Computing.net</a></center>
CSS 🛠⛶ BODY { font-family: 'Open Sans', sans-serif; color: #0044AA; text-align: center; } H1 { font-size: 24px; } #colorTurn { font-size: 18px; } #grid { margin: 20px auto; display: table; width: 415px; height: 360px; padding: 10px; background: #0077EE; border: 1px solid #0044AA; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); border-spacing: 5px 5px; } .row { display: table-row; } .cell { display: table-cell; background-color: #FFFFFF; width: 50px; height: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin: 2px; }
JavaScript ⛶ //www.101Computing.net/connect4-challenge/ var player=1; //1 for Yellow, 2 for Red 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] ]; //A function used to add a token (when possible) based on the slected column function selectColumn(col) { //This function is incomplete. //The following code should check if the column is not already full and if it is ask the user to chose another column. //It should also place the token on top of any existing token in the selected column //It should then check if after placing the token the game continues or if the player has aligned 4 tokens. //Finally it should check if the grid is full (Game ends on a draw!) if (player==1) { grid[5][col]=1; player=2; document.getElementById("colorTurn").innerHTML="Red Turn"; } else { grid[5][col]=2; player=1; document.getElementById("colorTurn").innerHTML="Yellow Turn"; } refreshGrid(); } //A function used to refresh the connect4 grid on screen function refreshGrid() { for (var row = 0; row < 6; row++) { for (var col = 0; col < 7; col++) { if (grid[row][col]==0) { document.getElementById("cell"+row+col).style.backgroundColor="#FFFFFF"; } else if (grid[row][col]==1) { //1 for yellow document.getElementById("cell"+row+col).style.backgroundColor="#FFFF00"; } else if (grid[row][col]==2) { //1 for yellow document.getElementById("cell"+row+col).style.backgroundColor="#FF0000"; } } } } function resetGrid() { //Reset all values to 0 in the grid array //ADD CODE HERE }