6.170 Software Studio | Spring 2012
Assignment 3: Othello/Reversi Board Game
Due: 1:00pm, Monday March 12, 2012

Purpose

This assignment will:

Background

Othello (also known as Reversi) is a popular board game between two players. Wikipedia has a great article covering the history, rules, and strategy of the game. Many implementations of Othello can be found online. You should play around to familiarize yourself with the game. In this assignment, you will be building an implementation of Othello that runs as a web application, entirely within the browser.

Your task

Your task is to write an Othello game using HTML, CSS, and JavaScript that can be played either by two players, or by a single player competing with the computer. The game will be loaded as a web page (perhaps with links to other pages), and will run entirely in the browser. That is, it will not rely on any backend storage or computation, so once downloaded it can be run without a network connection.

The design of the application's behavior and user interface is up to you. At the very least, your program should:

  1. Support both human vs. human and human vs. computer gameplay;
  2. Allow human players to undo and redo their moves, and to abort or restart the game at any time;
  3. Indicate somehow whether a move is legal before a human player attempts to perform it;
  4. Adhere to the the standard rules of Othello;
  5. Provide a graphical user interface that displays the board and allows human players to select moves using the mouse.

In addition, the implementation of your application should meet these criteria:

  1. The generated HTML and CSS must pass the W3C validators (see the course Stellar site for links).
  2. There should be no frames in your HTML, nor any browser-specific features that do not degrade smoothly. You are free to use HTML5 features that are widely supported; compatibility with Internet Explorer is not required.
  3. There should be a clean separation between HTML and CSS: all layout and appearance properties should be specified in CSS in separate style files, and you should not use any non-semantic markup in the HTML.
  4. The presentation and model should be cleanly separated.

The last criterion merits some explanation. This means that the code that determines how the board is displayed and how user interface actions are interpreted should be separated from the code that holds the representation of the board, the rules of the game, the evaluation of moves, and so on. In particular (but this may not be sufficient), the presentation code, which will be written in HTML and CSS, should be free to as great an extent as possible from any details of how the game is played. The model code, which will be written in JavaScript, should not include any explicit references to HTML elements or CSS declarations. In many applications, this separation is achieved by connecting the HTML and the JavaScript with element identifiers. Each HTML element is given a string identifier; this identifier is then be used in the JavaScript to find the element and act on it. Aside from requiring a lot of string lookups, this approach is not very elegant, since it involves sharing assumptions about a (sometimes large) collection of names. You should not do this, but should instead arrange for the HTML elements to be connected to computations programmatically.

Note that there is no requirement that the computer player achieve a given level of play. The focus of this assignment is on modularity and programming, and not on algorithm design. Nonetheless, you will probably enjoy building the game more if you can make the computer player reasonably proficient.

Deliverables

Your solution to this assignment should include the standard components, as listed in the project checklist (and whose purpose is explained here).

Infrastructure

Follow the assignment guidelines for handing in your work. In addition, put your example generated website in your www folder as described above.

Hints

Clarifications

None yet.