Othello Game

Othello (a.k.a. Reversi) is a strategy board game for two players, played on an 8×8 board. There are sixty-four identical game pieces called discs which are white on one side and black on the other. Players take turns placing discs on the board with their assigned color facing up. During a play, any discs of the opponent’s color that are in a straight line and bounded by the disc just placed and another disk of the current player’s color are turned over to the current player’s color.

The object of the game is to have the majority of disks turned to display your color when the last playable empty square is filled.

Read more about the rules of the Othello game: https://en.wikipedia.org/wiki/Reversi.

Othello Challenge

In this challenge you will use HTML, CSS, and JavaScript to complete this game of Othello for two players.

You will first need to reverse-engineer the code provided. The code so far is used to:

• Display the 8×8 grid using HTML and CSS.
• Add a disc on the grid when the user clicks on a cell of the grid using the selectCell()
  function in JavaScript.
• Refresh the grid on the screen using the refreshGrid() function in JavaScript.

The code provided uses a variable called grid, use to store a two-dimensional array (8×8) of integer values. Within this array, a 0 represents an empty place, a 1 represents a white disc and a 2 represents a black disc.

Your Task

Your task consists of:

• Amend the selectCell() function in JavaScript in order to:
  • Check if user is allowed to place a disc on the selected cell.
  • Reverse any discs of the opponent’s color that are in a straight line and bounded by the disc just placed and another disk of the current player’s color.
  • Count the number of white and black discs and display the score on the page.
  • Check if the grid is full.
• Add code to the resetGrid() JavaScript function to start a new game with an empty grid.

HTML, CSS and JavaScript Code

See the Pen OthelloChallenge by 101 Computing (@101Computing) on CodePen.