Let's Play Tic Tac Toe!
Ever hear of Noughts and Crosses? I'm sure you've heard of Tic Tac Toe? One and the same. The former is the original name for the game, which may have first appeared in Great Britain during the middle ages. Anyway, it's a popular game, easy to play, and a useful model to help develop the skill of describing simple steps to write simple programs.
A quick search for "tic tac toe" in Google reveals the extent to which the game has been examined and exploited as a programming learning tool. Even the venerable Charles Babbage, and his master programmer, Lady Ada Byron (daughter of Lord Byron), built a tic tac toe playing machine. Don't worry, we're not going to approach programming Tic Tac Toe using computational mathematics. We'll keep it simple and make it easy.
You're going to start by building the playing grid in HTML. Once you have your grid, I encourage you to play the game several times. Let the game events, sequence, and outcomes sink into your mind. Then, try to articulate the game using simple, declarative statements.
Exercise #3
A. Construct an HTML document, with a linked style sheet, to display a tic-tac-toe grid, resembling the example shown on the right. Use the div element to form the cells of the grid. Use the width, height, and border attributes to control the cell size and lines. Name your HTML file "tictactoe.html" and your style sheet "tictactoe.css".
Create a new folder within your home directory and label it "tictactoe". Upload your HTML document and CSS style sheet to your "tictactoe" folder. Test your work.
B. Get some blank sheets of paper and play Tic Tac Toe. Or go to Google, search for playable versions online, and play one. Play as many rounds as you need to satisfy the next task.
C. Write or type a list of steps required to play Tic Tac Toe. Be specific. keep it simple. Single steps. Think about and answer (a) who goes first, (b) how do you identify a move: what cell, which shape, (c) how do you display a move, (d) how do you display a win, (e) how do you evaluate a legal move, (f) how do you evaluate a draw... and so on. Think about how you will program a simple Tic Tac Toe game in PHP, and think about how you would capture the user's input and display the results.
Come to class prepared to engage in a group design session on how we will build a simple game of Tic Tac Toe!