Tic-Tac-Toe Tutorial

[SMcNeill]

The start of a simple little Tic-Tac-Toe Tutorial.  Folks have been writing little games for this in QB64, so I thought I'd take a moment to help showcase the logic of the game.

Text is resizable and auto-formats, with the up and down arrow keys.
Right arrows move forward a page/lesson.
Left arrows move back, so you can compare, if needed, to see what happened.
Escape, of course, let's you quit at any time.

Code: QB64: [Select]

1. $COLOR:32
2.  
3. DIM SHARED ViewScreen AS LONG, Font AS LONG
4.  
5. ViewScreen = _NEWIMAGE(640, 480, 32)
6. SCREEN ViewScreen
7. $RESIZE:ON
8. fontsize = 20
9. Font = _LOADFONT("courbd.ttf", fontsize, "monospace")
10. _FONT Font
11.  
12. DO
13.     Resizer
14.     Lessons num
15.     k = _KEYHIT
16.     SELECT CASE k
17.         CASE 27 'escape
18.             SYSTEM
19.         CASE 19200 'previous
20.             IF num > 0 THEN num = num - 1
21.         CASE 18432 'up font
22.             IF fontsize < 128 THEN
23.                 fontsize = fontsize + 2
24.                 temp = _LOADFONT("courbd.ttf", fontsize, "monospace")
25.                 _FONT temp
26.                 _FREEFONT Font
27.                 Font = temp
28.             END IF
29.         CASE 20480 'down font
30.             IF fontsize > 6 THEN
31.                 fontsize = fontsize - 2
32.                 temp = _LOADFONT("courbd.ttf", fontsize, "monospace")
33.                 _FONT temp
34.                 _FREEFONT Font
35.                 Font = temp
36.             END IF
37.         CASE 19712 'next
38.             IF num < 123 THEN num = num + 1
39.     END SELECT
40.     _LIMIT 30
41.     _DISPLAY
42. LOOP
43.  
44.  
45.  
46. SUB Lessons (num)
47.     STATIC DoOnce
48.     SELECT CASE num
49.         CASE 0 'just print
50.             CLS
51.             WordWrap "Hello World."
52.             WordWrap "This is Steve's Tuturial on Tic-Tac-Toe!"
53.             PRINT
54.             WordWrap "Press <RIGHT ARROW> to move forward in the lessons."
55.         CASE 1
56.             CLS
57.             WordWrap "How many places can one start at in Tic-Tac-Toe?  Let's look at the board below to find out!"
58.             DrawBoard ""
59.         CASE 2
60.             CLS
61.             WordWrap "First, there's the top-right corner, which makes one spot, and we'll count as we go from there."
62.             WordWrap "Current count = 1"
63.             DrawBoard "X"
64.         CASE 3
65.             CLS
66.             WordWrap "First, there's the top-right corner, which makes one spot, and we'll count as we go from there."
67.             WordWrap "Current count = 2"
68.             DrawBoard ".X"
69.         CASE 4
70.             CLS
71.             WordWrap "First, there's the top-right corner, which makes one spot, and we'll count as we go from there."
72.             WordWrap "Current count = 3"
73.             DrawBoard "..X"
74.         CASE 5
75.             CLS
76.             WordWrap "First, there's the top-right corner, which makes one spot, and we'll count as we go from there."
77.             WordWrap "Current count = 4"
78.             DrawBoard "...X"
79.         CASE 6
80.             CLS
81.             WordWrap "First, there's the top-right corner, which makes one spot, and we'll count as we go from there."
82.             WordWrap "Current count = 5"
83.             DrawBoard "....X"
84.         CASE 7
85.             CLS
86.             WordWrap "First, there's the top-right corner, which makes one spot, and we'll count as we go from there."
87.             WordWrap "Current count = 6"
88.             DrawBoard ".....X"
89.         CASE 8
90.             CLS
91.             WordWrap "First, there's the top-right corner, which makes one spot, and we'll count as we go from there."
92.             WordWrap "Current count = 7"
93.             DrawBoard "......X"
94.         CASE 9
95.             CLS
96.             WordWrap "First, there's the top-right corner, which makes one spot, and we'll count as we go from there."
97.             WordWrap "Current count = 8"
98.             DrawBoard ".......X"
99.         CASE 10
100.             CLS
101.             WordWrap "First, there's the top-right corner, which makes one spot, and we'll count as we go from there."
102.             WordWrap "Current count = 9"
103.             DrawBoard "........X"
104.         CASE 11
105.             CLS
106.             WordWrap "There's only 9 spots on a Tic-Tac-Toe board, so our first move has to be in one of those nine spaces!"
107.             PRINT
108.             WordWrap "BUT..."
109.             PRINT
110.             WordWrap "Tic-Tac-Toe is a game of SYMMETRY.  There's really only THREE positions to consider in the game."
111.         CASE 12
112.             CLS
113.             WordWrap "The outer corners."
114.             DrawBoard "X.X...X.X"
115.         CASE 13
116.             CLS
117.             WordWrap "The middle edges."
118.             DrawBoard ".X.X.X.X."
119.         CASE 14
120.             CLS
121.             WordWrap "And the center of it all -- the center!"
122.             DrawBoard "....X...."
123.         CASE 15
124.             CLS
125.             WordWrap "So, to start this tuturial out, let's start with X in one of the OUTER CORNERS."
126.             DrawBoard "X"
127.         CASE 16
128.             CLS
129.             WordWrap "Now, O has 8 different places they can move. Let's look at all those possible moves, and I'll show you what X's next move should be."
130.             WordWrap "First, O goes right beside X...  X then goes to their opposite free corner."
131.             DrawBoard "XO....X.."
132.         CASE 17
133.             CLS
134.             WordWrap "This is a losing position for O, as here would be the next 2 moves played out:"
135.             WordWrap "O blocks the win, X takes the middle..."
136.             DrawBoard "XO.OX.X.."
137.         CASE 18
138.             CLS
139.             WordWrap "So what if O would have went to the far corner instead?"
140.             WordWrap "X then goes to their diagional free corner."
141.             DrawBoard "X.O.....X"
142.         CASE 19
143.             CLS
144.             WordWrap "O is now forced to block in the center, and X then blocks O."
145.             WordWrap "Guess who just lost?"
146.             DrawBoard "X.O.O.X.X"
147.         CASE 20
148.             CLS
149.             WordWrap "So, let's just continue on around the edges from there.  What happens when O is placed in the right middle edge?  Remember what I said about SYMMETRY before?"
150.             WordWrap "Doesn't this set up look just like what we saw previously with O in the top middle?"
151.             DrawBoard "X....OX.."
152.         CASE 21
153.             CLS
154.             WordWrap "Yep.  Same predictible results.  O loses."
155.             DrawBoard "X..OXOX.."
156.         CASE 22
157.             CLS
158.             WordWrap "And if O were to move down to the next open position, it's another outer corner."
159.             WordWrap "X, once again, just takes the opposite corner for the win."
160.             DrawBoard "X.....X.O"
161.         CASE 23
162.             CLS
163.             WordWrap "Next space on the rotation would be the bottom middle... Which is just like the other two middles we've seen so far..."
164.             WordWrap "Can you see why O loses here?"
165.             DrawBoard "X.X....O."
166.         CASE 24
167.             CLS
168.             WordWrap "And around we go, with another corner, which plays like the other corners for O.."
169.             DrawBoard "X.X...O.."
170.         CASE 25
171.             CLS
172.             WordWrap "And the last move around the edge is right below X, in the left middle... Which results in... The same as before!"
173.             DrawBoard "X.XO....."
174.         CASE 26
175.             CLS
176.             WordWrap "So, as we've seen, if X starts on an outer edge, if the next move by O is on an outside tile, then X wins!"
177.             WordWrap "The whole game is decided by the first move!"
178.             WordWrap "O's *ONLY* possible move is into the middle, which will force a draw unless someone is honestly just REALLY stupid!"
179.             DrawBoard "X...O...."
180.         CASE 27
181.             CLS
182.             WordWrap "So in conclusion here: IF X starts with any OUTSIDE CORNER, the *ONLY* place O can go -- without losing -- is to the center."
183.             WordWrap "*ALL* other moves lets X manulate the board for a guaranteed win."
184.             DrawBoard "X...O...."
185.         CASE 28
186.             CLS
187.             WordWrap "And, since the game is SYMMETRICAL, as we've seen so far, the *EXACT* same pattern plays out if X starts in *ANY* of the OUTER CORNERS."
188.             WordWrap "IF X takes an OUTER CORNER, the *ONLY* move O can make is to take the center, or lose."
189.         CASE 29
190.             CLS
191.             WordWrap "Which then leads to the question: What if X takes the center on their first move?"
192.             DrawBoard "....X...."
193.         CASE 30
194.             CLS
195.             WordWrap "O basically only has two choices here: OUTER EDGE or MIDDLE EDGE.  Let's look at them both, starting with O taking a MIDDLE EDGE..."
196.             WordWrap "O takes a middle, X takes an outer beside it."
197.             DrawBoard ".OX.X...."
198.         CASE 31
199.             CLS
200.             WordWrap "O has to block, and now X can take the other corner.  Guess who just won?"
201.             DrawBoard ".OX.X.O.X"
202.         CASE 32
203.             CLS
204.             WordWrap "So if X takes the center, and O takes a middle, then X wins!  First move determines the game once again."
205.             WordWrap "IF O doesn't want to lose, all they can do is take an OUTER CORNER when X takes the center."
206.             DrawBoard "O...X...."
207.         CASE 33
208.             CLS
209.             WordWrap "So that means the only possible place left to talk about is if X starts in a MIDDLE EDGE position."
210.             DrawBoard ".X......."
211.         CASE 34
212.             CLS
213.             WordWrap "And honestly, there's not to much to say about this position, except *DON'T*."
214.             WordWrap "There's *NO* move that O can make which guarantees X a win if they start off with an OUTER MIDDLE tile."
215.             WordWrap "Unless someone just plays terribly on purpose, these games will end in a draw."
216.             WordWrap "ONLY start there if you're playing with an elementry grade child."
217.         CASE 35
218.             CLS
219.             WordWrap "So, to basically sum up:"
220.             WordWrap "Tic-Tac-Toe is basically a game that is won in the first move."
221.             WordWrap "X's two possible moves are OUTER EDGE and CENTER."
222.             WordWrap "O's counters are CENTER and OUTER EDGE."
223.             WordWrap "Remember those two things, and you have become almost unbeatable at Tic-Tac-Toe.  (Unless just pure exhaustion or disinterest causes you to make a mismove after that...)"
224.         CASE 36
225.             CLS
226.             WordWrap "AND THAT'S ALL THERE IS TO TIC-TAC-TOE!"
227.         CASE 37
228.             CLS
229.             COLOR &HFFFF0000, 0
230.             WordWrap "X's two possible starting moves are OUTER EDGE and CENTER."
231.             WordWrap "O's counters are CENTER and OUTER EDGE."
232.         CASE 38
233.             SYSTEM
234.     END SELECT
235. END SUB
236.  
237.  
238. SUB DrawBoard (text$)
239.     STATIC board, boardfont
240.     yStart = CSRLIN * _FONTHEIGHT(Font)
241.     d = _DEST: s = _SOURCE
242.     IF board = 0 THEN
243.         board = _NEWIMAGE(600, 600, 32)
244.         boardfont = _LOADFONT("courbd.ttf", 196, "monospace")
245.     END IF
246.     _DEST board: _SOURCE board
247.     CLS
248.     LINE (190, 0)-STEP(20, 600), Yellow, BF
249.     LINE (390, 0)-STEP(20, 600), Yellow, BF
250.     LINE (0, 190)-STEP(600, 20), Yellow, BF
251.     LINE (0, 390)-STEP(600, 20), Yellow, BF
252.     _FONT boardfont
253.     FOR i = 0 TO 8
254.         temp$ = MID$(text$, i + 1, 1)
255.         SELECT CASE temp$
256.             CASE "X", "x"
257.                 COLOR Red, 0
258.                 _PRINTSTRING ((i MOD 3) * 200 + 40, (i \ 3) * 200 + 10), "X"
259.             CASE "O", "o", "0"
260.                 COLOR Green, 0
261.                 _PRINTSTRING ((i MOD 3) * 200 + 40, (i \ 3) * 200 + 10), "O"
262.         END SELECT
263.     NEXT
264.     _DEST d: _SOURCE s
265.     _PUTIMAGE (0, yStart)-(_WIDTH, _HEIGHT), board
266. END SUB
267.  
268.  
269. SUB WordWrap (text AS STRING)
270.     DIM BreakPoint AS STRING
271.     BreakPoint = ",./- ;:!" 'I consider all these to be valid breakpoints.  If you want something else, change them.
272.     w = _WIDTH
273.     pw = _PRINTWIDTH(text)
274.     x = POS(0): y = CSRLIN
275.     IF _PIXELSIZE <> 0 THEN x = x * _FONTWIDTH
276.     firstlinewidth = w - x + 1
277.     IF pw <= firstlinewidth THEN
278.         PRINT text
279.     ELSE
280.         'first find the natural length of the line
281.         FOR i = 1 TO LEN(text)
282.             p = _PRINTWIDTH(LEFT$(text, i))
283.             IF p > firstlinewidth THEN EXIT FOR
284.         NEXT
285.         lineend = i - 1
286.         t$ = RTRIM$(LEFT$(text, lineend)) 'at most, our line can't be any longer than what fits the screen.
287.         FOR i = lineend TO 1 STEP -1
288.             IF INSTR(BreakPoint, MID$(text, i, 1)) THEN lineend = i: EXIT FOR
289.         NEXT
290.         PRINT LEFT$(text, lineend)
291.         WordWrap LTRIM$(MID$(text, lineend + 1))
292.     END IF
293. END SUB
294.  
295. SUB Speak (text$)
296.     text$ = CHR$(34) + "(pause), " + text$ + CHR$(34)
297.     OPEN "temp.ps1" FOR OUTPUT AS #1
298.     PRINT #1, "Add-Type -AssemblyName System.Speech; "
299.     PRINT #1, "$voice = New-Object System.Speech.Synthesis.SpeechSynthesizer; "
300.     PRINT #1, "$voice.SelectVoice(" + CHR$(34) + "Microsoft Zira Desktop" + CHR$(34) + "); "
301.     PRINT #1, "$voice.Speak(" + text$ + "); "
302.     CLOSE #1
303.     SHELL _HIDE "powershell ./temp.ps1"
304. END SUB
305.  
306. SUB Resizer
307.     IF _RESIZE THEN
308.         _DELAY .5
309.         x = _RESIZEWIDTH
310.         y = _RESIZEHEIGHT
311.         temp = _NEWIMAGE(x, y, 32)
312.         SCREEN temp
313.         _FREEIMAGE ViewScreen
314.         ViewScreen = temp
315.         _FONT Font
316.     END IF
317. END SUB

Try it out and let me know how it looks.  ;)


Side note:  Screen is also fully resizable, and auto-formats itself to adjust to the size you make it.

[STxAxTIC]

If this is teaching material, I strongly strongly suggest targeting a medium more readable. HTML with code blocks? A Word doc you save to PDF? Anything but a monolith BAS file. Just my humble opinion.

Okay, let's run it...

Looks great. But way too linear. Coders refer to things like reference books - flip to the section you want, glance, and move on. But this is a slideshow.

Suggestion:

Finish making the graphics, screenshot each one, and then make this a real document. Even a PPT presentation so it can read EXACTLY the same. Keep the BAS code as an optional reference.

[SMcNeill]

If this is teaching material, I strongly strongly suggest targeting a medium more readable. HTML with code blocks? A Word doc you save to PDF? Anything but a monolith BAS file. Just my humble opinion.

Okay, let's run it...

Looks great. But way too linear. Coders refer to things like reference books - flip to the section you want, glance, and move on. But this is a slideshow.

Suggestion:

Finish making the graphics, screenshot each one, and then make this a real document. Even a PPT presentation so it can read EXACTLY the same. Keep the BAS code as an optional reference.

Bah!  Who wants to write a boring old PDF?  Tic-Tac-Toe is a fairly boring subject to start with.  If I didn't have fun jazzing it up with some bells and whistles (such as the resizing routines and word wrap), I'd fall asleep working on it.

And this isn't really anything a person needs as a reference tool.  Run it from start to finish, take in the simple lesson, and you're done with it forever.  The rule of Tic-Tac-Toe is just like the rule for spelling: I before E, except after C.  See it.  Learn it.  Be done with it.  You don't need to go back and look it up again in the future.  ;P

[STxAxTIC]

Understood, just looking out for your legacy, that's all. :-)

Plus Tutorial.pdf is a lot less suspicious than Tutorial.exe.

The code in itself it a tutorial, that's a pretty tight way to draw the 3x3 grid!

[SMcNeill]

Understood, just looking out for your legacy, that's all. :-)

Plus Tutorial.pdf is a lot less suspicious than Tutorial.exe.

The code in itself it a tutorial, that's a pretty tight way to draw the 3x3 grid!

If you notice, there’s also a routine for text-to-speech in there.  I’d considered having it read the lesson aloud for you, but hit a snag.  My speakers are connected via bluetooth, so powershell seems to take a half second before it actually starts speaking.

I type Speak “Hello World”, my speakers say, “World.”

So, for personal use, I tack on a “(pause), “ to all speech.  The hello world becomes Speak “(pause), Hello World”, which ends up actually saying, “Hello World.”

Since I didn’t know if this initial lag holds true for all users, I left the speech calls out.  I figured nothing would be any more annoying than having it read “pause” at the start of every call.

Feel free to test it out and let me know how/if it works for you (as long as you’re on a windows machine).

[SierraKen]

Thanks Steve, I never knew this. Although playing my game a bunch of times lead me to believe these kinds of things, although I never contemplated them in my mind completely. Mostly, I just made Tic-Tac-Toe back in 2019 for fun, nothing else. All my life I've known it wasn't a challenging game really. So the last couple days I just made it look better mostly.

[bplus]

Oh ha! well I'll be...

[SMcNeill]

Oh ha! well I'll be...

And that’s basically my example turned into a video, except he didn’t cover the way to win if you start in the center. ;)

Coding an *unbeatable* Tic-Tac-Toe engine is actually only a few simple lines.  As I said before, it’s not a game which you WIN at — it’s a game where the next guy screws up and makes a mistake.


The best Tic-Tac-Toe game is the following, where both win:

X goes top left.

X..
...
...

O goes to the right.
XO.
...
...

X goes to the right.
XOX
...
...

Continue around:
XOX
..O
...

XOX
..O
..X

XOX
..O
.OX

XOX
..O
XOX

XOX
O.O
XOX

XOX
OXO
XOX

Game is over, and now you can draw a giant X for X’s win, and a giant O for O’s win just by connecting their tiles.  ;D

[bplus]

Man I have to go back and fix my AI program! Learned something new...

[SMcNeill]

And who knew so many people would be interested in such a simple little program!  O_O!

[SierraKen]

Awww, a computer that wins every time is no fun ;D

[SMcNeill]

I’ll have to modify this a little bit tomorrow.  I wrote wrong when I said there was NO way for X to win from an outer middle tile...

The rule of Tic-Tac-Toe is “CORNER and CENTER”.  Control those to win.  Control those to block.  The only way you can win by starting in the middle edge, is if your opponent ignores those rules as well.

=X=
===
===

=X=
O==
===

=X=
OX=
===

=X=
OX=
=O=

=XX
OX=
=O=

It still involves the same basic rule — corner + center — but the only way you’ll ever win with this set-up is basically if the other guy just lets you.

The rule to win is Corner and Center.  The rule to block is Center and Edge.  If both players are ignoring that, who knows what might happen!

XX=
OO=
X=O

[NOVARSEG]

.