Tic-Tac-Toe

Overview

I want to make a simple tictactoe (noughts and crosses) game, for 1 or 2 players with either 2 players on the same device, or 2 players remotely playing each other. The following article takes that simple aim and breaks the process down as if it were a more complicated project just so that the process is made more apparent.

The first thing to do is find out what the customer wants, this shouldn't involve the actual solution but rather a list of the issues the customer wishes to have resolved.

List priorities

The best way that I find to get stuff done 1 is to list priorities, by doing this it means you can see an overview of what you want to achieve and anything that's not as important as you thought it was falls to the bottom. With an app as simple as this there won't be a large list of tasks so in order to demonstrate what I mean I've mildly embelished the requirements a bit.

Priotities

Behaviour

  1. A player would like to see the board, including positions of all tokens
  2. A player would like to know who's turn it is
  3. A player would like to know if someone wins
  4. A player would like to easily select a square to place their token
  5. A player would like to be able to restart part way through playing
  6. A player would like to be able to keep score
  7. A player would like to be able to play an AI opponent
  8. A player would like to be able to choose the difficulty level of the AI opponent
  9. A player would like to be able to play a human opponent
  10. A player would like to be able to play someone on the same device
  11. A player would like to be able to play someone on a remote device
  12. An observer would like to be able to observe an ongoing game
  13. A player would like to know the score over several games
  14. A player would like the game to be visually appealing
  15. A player would like the game to make use of media capabilities of the device it's played on
  16. A player would like to be able to constrol the look and feel of the game

Requirements

Putting these into some sort of order I have.
  1. A player must be able to see the board
  2. A player would like to easily select a square to place their token
  3. A player would like to be able to play a human opponent
  4. A player would like to be able to play someone on the same device
With this list I think it captures the essence of the game and gives us something to actually see, rather than jump ahead to making a remote client and AI opponents I've also kept it simple.

Show something

The main aim of the starting process is to get something a user can see, so with that in mind I created the simplest board I could think of, much the same as when at school any scrap of paper could be a tic-tac-toe board I've used a grid of 9 spaces that you can put letters onto.

<div id="board"> <div onclick="placetoken(this, 0)"></div> <div onclick="placetoken(this, 1)"></div> <div onclick="placetoken(this, 2)"></div> <div onclick="placetoken(this, 3)"></div> <div onclick="placetoken(this, 4)"></div> <div onclick="placetoken(this, 5)"></div> <div onclick="placetoken(this, 6)"></div> <div onclick="placetoken(this, 7)"></div> <div onclick="placetoken(this, 8)"></div> </div>