HTML ⛶ <H1>OTHELLO Challenge</H1> <div id="colorTurn">White Turn</div> <div id="grid"> <div class="row"> <div class="cell" id="cell00" onclick="selectCell(0,0);"><div class="disc"></div></div> <div class="cell" id="cell01" onclick="selectCell(0,1);"><div class="disc"></div></div> <div class="cell" id="cell02" onclick="selectCell(0,2);"><div class="disc"></div></div> <div class="cell" id="cell03" onclick="selectCell(0,3);"><div class="disc"></div></div> <div class="cell" id="cell04" onclick="selectCell(0,4);"><div class="disc"></div></div> <div class="cell" id="cell05" onclick="selectCell(0,5);"><div class="disc"></div></div> <div class="cell" id="cell06" onclick="selectCell(0,6);"><div class="disc"></div></div> <div class="cell" id="cell07" onclick="selectCell(0,7);"><div class="disc"></div></div> </div> <div class="row"> <div class="cell" id="cell10" onclick="selectCell(1,0);"><div class="disc"></div></div> <div class="cell" id="cell11" onclick="selectCell(1,1);"><div class="disc"></div></div> <div class="cell" id="cell12" onclick="selectCell(1,2);"><div class="disc"></div></div> <div class="cell" id="cell13" onclick="selectCell(1,3);"><div class="disc"></div></div> <div class="cell" id="cell14" onclick="selectCell(1,4);"><div class="disc"></div></div> <div class="cell" id="cell15" onclick="selectCell(1,5);"><div class="disc"></div></div> <div class="cell" id="cell16" onclick="selectCell(1,6);"><div class="disc"></div></div> <div class="cell" id="cell17" onclick="selectCell(1,7);"><div class="disc"></div></div> </div> <div class="row"> <div class="cell" id="cell20" onclick="selectCell(2,0);"><div class="disc"></div></div> <div class="cell" id="cell21" onclick="selectCell(2,1);"><div class="disc"></div></div> <div class="cell" id="cell22" onclick="selectCell(2,2);"><div class="disc"></div></div> <div class="cell" id="cell23" onclick="selectCell(2,3);"><div class="disc"></div></div> <div class="cell" id="cell24" onclick="selectCell(2,4);"><div class="disc"></div></div> <div class="cell" id="cell25" onclick="selectCell(2,5);"><div class="disc"></div></div> <div class="cell" id="cell26" onclick="selectCell(2,6);"><div class="disc"></div></div> <div class="cell" id="cell27" onclick="selectCell(2,7);"><div class="disc"></div></div> </div> <div class="row"> <div class="cell" id="cell30" onclick="selectCell(3,0);"><div class="disc"></div></div> <div class="cell" id="cell31" onclick="selectCell(3,1);"><div class="disc"></div></div> <div class="cell" id="cell32" onclick="selectCell(3,2);"><div class="disc"></div></div> <div class="cell" id="cell33" onclick="selectCell(3,3);"><div class="disc"></div></div> <div class="cell" id="cell34" onclick="selectCell(3,4);"><div class="disc"></div></div> <div class="cell" id="cell35" onclick="selectCell(3,5);"><div class="disc"></div></div> <div class="cell" id="cell36" onclick="selectCell(3,6);"><div class="disc"></div></div> <div class="cell" id="cell37" onclick="selectCell(3,7);"><div class="disc"></div></div> </div> <div class="row"> <div class="cell" id="cell40" onclick="selectCell(4,0);"><div class="disc"></div></div> <div class="cell" id="cell41" onclick="selectCell(4,1);"><div class="disc"></div></div> <div class="cell" id="cell42" onclick="selectCell(4,2);"><div class="disc"></div></div> <div class="cell" id="cell43" onclick="selectCell(4,3);"><div class="disc"></div></div> <div class="cell" id="cell44" onclick="selectCell(4,4);"><div class="disc"></div></div> <div class="cell" id="cell45" onclick="selectCell(4,5);"><div class="disc"></div></div> <div class="cell" id="cell46" onclick="selectCell(4,6);"><div class="disc"></div></div> <div class="cell" id="cell47" onclick="selectCell(4,7);"><div class="disc"></div></div> </div> <div class="row"> <div class="cell" id="cell50" onclick="selectCell(5,0);"><div class="disc"></div></div> <div class="cell" id="cell51" onclick="selectCell(5,1);"><div class="disc"></div></div> <div class="cell" id="cell52" onclick="selectCell(5,2);"><div class="disc"></div></div> <div class="cell" id="cell53" onclick="selectCell(5,3);"><div class="disc"></div></div> <div class="cell" id="cell54" onclick="selectCell(5,4);"><div class="disc"></div></div> <div class="cell" id="cell55" onclick="selectCell(5,5);"><div class="disc"></div></div> <div class="cell" id="cell56" onclick="selectCell(5,6);"><div class="disc"></div></div> <div class="cell" id="cell57" onclick="selectCell(5,7);"><div class="disc"></div></div> </div> <div class="row"> <div class="cell" id="cell60" onclick="selectCell(6,0);"><div class="disc"></div></div> <div class="cell" id="cell61" onclick="selectCell(6,1);"><div class="disc"></div></div> <div class="cell" id="cell62" onclick="selectCell(6,2);"><div class="disc"></div></div> <div class="cell" id="cell63" onclick="selectCell(6,3);"><div class="disc"></div></div> <div class="cell" id="cell64" onclick="selectCell(6,4);"><div class="disc"></div></div> <div class="cell" id="cell65" onclick="selectCell(6,5);"><div class="disc"></div></div> <div class="cell" id="cell66" onclick="selectCell(6,6);"><div class="disc"></div></div> <div class="cell" id="cell67" onclick="selectCell(6,7);"><div class="disc"></div></div> </div> <div class="row"> <div class="cell" id="cell70" onclick="selectCell(7,0);"><div class="disc"></div></div> <div class="cell" id="cell71" onclick="selectCell(7,1);"><div class="disc"></div></div> <div class="cell" id="cell72" onclick="selectCell(7,2);"><div class="disc"></div></div> <div class="cell" id="cell73" onclick="selectCell(7,3);"><div class="disc"></div></div> <div class="cell" id="cell74" onclick="selectCell(7,4);"><div class="disc"></div></div> <div class="cell" id="cell75" onclick="selectCell(7,5);"><div class="disc"></div></div> <div class="cell" id="cell76" onclick="selectCell(7,6);"><div class="disc"></div></div> <div class="cell" id="cell77" onclick="selectCell(7,7);"><div class="disc"></div></div> </div> </div> <input id="resetButton" type="button" value="Reset" onclick="refreshGrid()" /></br></br> <centter><a href="http://www.101Computing.net/othello-game/" target="_blank">View Blog Post on 101Computing.net</a></center>
CSS 🛠⛶ BODY { font-family: 'Open Sans', sans-serif; color: #FFFFFF; background-color:#000000; text-align: center; } H1 { font-size: 24px; } #colorTurn { font-size: 18px; } #grid { margin: 20px auto; display: table; width: 410px; height: 410px; padding: 0px; border-collapse: collapse; background: #129104; border: 1px solid #0a5e01; 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; width: 40px; height: 40px; border: 1px solid #000000; padding: 4px; } .disc { width: 36px; height: 36px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin: 2px; }
JavaScript ⛶ //www.101Computing.net/othello-game/ var player=1; //1 for White, 2 for Black 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, 1, 2, 0, 0, 0], [0, 0, 0, 2, 1, 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] ]; function selectCell(row,col) { //A function used to add a disc //This function is incomplete //It should check that the player is allowed to place their disc on the selected cell. if ((player==1) && (grid[row][col]==0)) { grid[row][col]=1; player=2; document.getElementById("colorTurn").innerHTML="Black Turn"; } else if ((player==2) && (grid[row][col]==0)) { grid[row][col]=2; player=1; document.getElementById("colorTurn").innerHTML="White Turn"; } //Complete the code here to flip existing disc following the rules of the game //Then calculate and display the score by counting the number of white discs and the number of black discs (Note: You can do this in the refreshGrid() function) refreshGrid(); } //A function used to refresh the Othello grid on screen function refreshGrid() { for (var row = 0; row < 8; row++) { for (var col = 0; col < 8; col++) { if (grid[row][col]==0) { document.getElementById("cell"+row+col).childNodes[0].style.backgroundColor="#129104"; } else if (grid[row][col]==1) { //1 for white document.getElementById("cell"+row+col).childNodes[0].style.backgroundColor="#FFFFFF"; } else if (grid[row][col]==2) { //2 for black document.getElementById("cell"+row+col).childNodes[0].style.backgroundColor="#000000"; } } } } function resetGrid() { //Reset all values to 0 in the grid array //ADD CODE HERE } refreshGrid()