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
- A player would like to see the board, including positions of all tokens
- A player would like to know who's turn it is
- A player would like to know if someone wins
- A player would like to easily select a square to place their token
- A player would like to be able to restart part way through playing
- A player would like to be able to keep score
- A player would like to be able to play an AI opponent
- A player would like to be able to choose the difficulty level of the AI opponent
- A player would like to be able to play a human opponent
- A player would like to be able to play someone on the same device
- A player would like to be able to play someone on a remote device
- An observer would like to be able to observe an ongoing game
- A player would like to know the score over several games
- A player would like the game to be visually appealing
- A player would like the game to make use of media capabilities of the device it's played on
- 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.- A player must be able to see the board
- A player would like to easily select a square to place their token
- A player would like to be able to play a human opponent
- A player would like to be able to play someone on the same device
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>