Let's Make Us A Game II: Tic-Tac-Toe

Back in 2010, I ran a short Let's Make Us A Game! series in which we actually designed and implemented a simple text adventure using Inform.  I'd like to do that again, but this time I'm using the Moai framework and Lua scripting to build something a little more visual.  (There are lots of good engines out there, but Moai and Lua have the distinct advantage of being free for our purposes.  Lua is always free, Moai has some restrictions for commercial use but the "sandbox" level is free to play around with.)  If you want to play along, you can pick up the Moai SDK by registering at www.getmoai.com.

I'm going to be learning as we go, so I expect to document quite a few missteps and considerable rework during this process.  To keep the project's scope reasonable, I'm reaching deep into personal nostalgia to remember the very first interactive computer game I ever played.  It was a Tic-Tac-Toe system at a science museum -- the player would hit one of the squares on the grid, and the computer would respond with a move of its own.  It was simple, but still fascinating at the time -- the idea that a machine could "think" and play intelligently was mind-blowing for a little boy in the mid-1970s.

As an homage to Lance Micklus' classic TRS-80 checkers program, The Mean Checkers Machine, I'm going to call our experimental Moai/Lua game Tic-Tac-Toe Bastard.

Here's what I have so far -- I've decided on a 320 x 240 screen layout; this is very tiny by modern standards, but Moai will let us scale it to the display, and keeping the resolution low keeps the pixel art easier to handle.  Sketching it by hand on graph paper, I've mapped out a rough idea of the display:

As you can see, there aren't a lot of controls here.  There's a difficulty slider, allowing us to adjust the CPU's "intelligence" level, a QUIT button to exit the game, and a RESTART button to start a new match.  The player will simply click on a square in the 3 x 3 grid to place a smiley face, while the CPU will place death's heads in response.  A scoreboard at the left will chalk up Player and CPU wins during this session, with RESTART wiping out the accumulated scores and resetting the grid.

I'm devoting the largest chunk of screen real estate to the 3 x 3 game grid.  Because we're not really constrained by old-fashioned tiles and sprites, I'm making the grid 160 x 160 pixels -- this gives us 9 53 x 53 pixel blocks which include their own outlines, plus an outline border on the right and bottom edges.  (At least that's how I think this is going to work, prior to actually building anything.)

Here's a rough to-do list for getting this very simple game up and running:

-- Design and create game data structures (scores, play grid)
-- Script the basic game loop
-- Implement and test tic-tac-toe CPU algorithm
-- Implement the user interface and wire it into the game logic
-- Implement and test victory detection
-- Draw graphical elements in .PNG format
-- Design and produce sound effects

We'll be tackling each of these steps, though not necessarily in sequence -- I may jump around a bit depending on what I feel like doing in each installment.

Off we go!