Draw nine squares

A board has two jobs: remember what is in each square and show it to the player. We will keep those jobs separate. The picture comes from numbers in an array; the program never needs to inspect the colour of a square.

Use Sinclair BASIC on a stock 48K ZX Spectrum. The Meet BASIC opening explains the editor and keyword keys. Start a new program and enter this listing. Keyword spacing in the listing is for reading; the ROM supplies spaces around its tokens.

  10 BORDER 0: PAPER 0: INK 7: BRIGHT 1: CLS
  20 DIM b(9)
  30 GO SUB 1000
  40 STOP
1000 CLS
1010 PRINT AT 0,8; INK 5;"THREE IN A ROW"
1030 INK 1: FOR i=0 TO 3: PLOT 56 +i*48,32: DRAW 0,120: NEXT i
1040 FOR i=0 TO 3: PLOT 56,32 +i*40: DRAW 144,0: NEXT i
1050 FOR n=1 TO 9: GO SUB 2000: NEXT n
1100 RETURN
2000 LET row=INT ((n-1)/3): LET col=n-1 -row*3
2010 LET x=80 +col*48: LET y=132 -row*40
2020 PRINT AT 5 +row*5,10 +col*6; INK 7;" "
2030 IF b(n)=0 THEN PRINT AT 5 +row*5,10 +col*6; INK 7;n: RETURN

RUN it. You should see a large board numbered 1–9, then a STOP report beneath it. STOP deliberately leaves the picture available for inspection.

Nine values, one board

DIM b(9) creates nine numeric places, b(1) through b(9), initially zero. Zero means empty. Later, 1 will mean X and 2 will mean O. The array stores ownership, not the printed square number.

GO SUB 1000 visits the drawing routine. Its RETURN resumes after the call, at line 40. The main program stops there rather than falling through into the drawing routine again. Colons separate statements on the same BASIC line.

Line 10 selects a black border and paper, white ink and bright colours, then clears the screen. PRINT AT uses character rows and columns, counted from zero at the top left. PLOT uses pixel coordinates, with y increasing upwards; DRAW gives a displacement from the last plotted point.

The two FOR loops draw four vertical and four horizontal lines. Each square is 48 pixels wide and 40 high. NEXT i advances the loop to its next value. Drawing a quiet blue grid leaves the marks room to stand out.

From a number to a position

For square n, INT ((n - 1) / 3) gives its row: 0, 1 or 2. INT rounds down. Subtracting three times that row from n−1 gives its column. Line 2010 also prepares the pixel centre for the marks we will draw next.

The number itself is printed at row 5 + row * 5, column 10 + col * 6. These are character positions. The routine first prints a space there, then prints n because b(n) is zero. RETURN goes back to the numbering loop.

If the board stops drawing part-way through, check each NEXT and RETURN. If numbers form a diagonal, check the two separate row and column expressions.