Hello, and welcome to a coding challenge--

Tic-Tac-Toe.

I'm going to make Tic-Tac-Toe.

I'm hoping, when you look at how long this video is,

it's very short, because I don't have a lot of time right now.

So I'm going to try and make a very beginner-friendly example

of the game Tic-Tac-Toe without any bells and whistles,

without a lot of fancy code.

I'm not going to overengineer it.

I will come back and--

[MUSIC PLAYING]

(SINGING) Oh, you will refactor this later.

You know I will--

I will refactor later, because the reason why I am making this

is I eventually want to show you some different algorithms

for an AI or at least a bot to play the game Tic-Tac-Toe.

But that's not happening in this video.

We're going to make the most basic, simple, friendly version

of Tic-Tac-Toe right here, using JavaScript, the p5.js library,

and the p5 web editor.

Follow along, if you wish, and see what happens.

I have not practiced or planned for this at all.

All right, I need a board.

So I definitely need a board.

I'm going to say, let board-- and it's going to be an array.

And maybe, it'll be an array of arrays.

And let's use strings.

This is probably a terrible idea.

So this will be the top row.

This will be the middle row.

Tic-Tac-Toe is 3-by-3-by-3.

And then I need two players.

So player one is an X. And player 2 is an 0.

So now, I need to render the board.

Let's put some stuff in it.

Let's just pretend it has some stuff.

So I want to render the board.

I could use this with dom-- there's

so many ways I could do this.

I'm just going to do this with Canvas and in the Draw Loop.

So I'm going to say, for let i equals 0, i is less than 3,

i plus plus.

For let j equals 0, j is less than 3, j plus, plus.

So this is pretty tricky.

If you're a beginner programmer, this is a nested loop.

And I've basically made this a grid.

So every spot in this grid-- and let me actually fill it out

just so we see something here.

I'm going to pretend this has just been played.

So the idea is that this two-dimensional array

structure--

this list of lists--

is storing all the information for what

the current state of each cell in the Tic-Tac-Toe grid is.

At the beginning, they're all blank.

And then, as the players play, X's and O's get filled in.

So now I'm going to nest a loop through--

check every column, check every row, and render something.

So I could just use the Text function.

I could say, let spot equal the board index i index j.

And then I could say, text that spot at x, y.

So where is x and y?

So I need a width.

I'm going to fill the whole canvas.

So width equals the width of the canvas divided by 3.

And height equals the height of the canvas divided by 3.

It would make sense for me to have players in an array.

And maybe I could have 3.

It doesn't have to be a hardcoded number,

because I could make, like, a 5-by-5 tic-tac-toe board.

But I'm doing this in the simplest way possible.

So x equals width times i.

And y equals height times i.

And let's run this.

What's going to happen?

Do you see anything?-- some X's and O's?

They're sort of in there.

And then I'm going to say, text size 32, to make it bigger.

Why are they all on top of each other like that?

Oh!

Oh!

I forgot j here.

There we go.

Look!

There's my tic-tac-toe board.

But things are kind of off.

Oh, because of the way--

you know what?

I should just draw it as a circle.

Let's do this.

If spot equals player 1, then draw an ellipse at x, y width,

width.

And then otherwise, if spot equals player 2,

then draw a line from x, y to x plus w, x plus h,

and another line from x plus w y to x, y plus h.

So that's me drawing an x.

Whoa!

That looks totally wrong.

So first, let me say, no fill.

And the offset should be plus w divided by 2.

So we need to offset all of those spot.

[TRILLS TONGUE]

Ugh!

Oh, and then this would be--

oh, no, no, no, no.

No, no, no, no.

Oh, my god!

Help!

Let's diagram this.

I have a 3-by-3 board.

This is x equals 0.

This is x equals 1.

This is x equals 2.

This is y equals 0.

This is y equals 1.

This is y equals 2.

So an x should be drawn from here--

from x, y, x, y to x plus h, y plus h.

So the x I did correctly.

Let's go back to here and comment out the ellipse.

And let's make the board all full of X's.

Let's just make the top row all full of X's.

Oh, my goodness.

[BUZZING NOISE]

Everybody, I just lost, like, two or--

like, 45 minutes-- not really that long--

by accident, because I had an x here.

This needs to be y.

OK, so now we can see the X's.

I could see the X's.

Let's draw the grid.

We could see the X's.

Oh, those are really giant X's.

Now, let's put the circles back in.

You can see, there's-- ah!

The circles need to be--

I need to say, ellipse mode corner.

There we go.

Oh, boy!

So the X's are all kind of connected

in a way that looks weird.

So actually, wouldn't it make sense

to not draw everything relative to the corners,

but to draw everything relative to the centers?

And I could have just used text-to-line and gone back

with the letters.

But I want to draw it.

I want to draw it.

So I'm going to draw everything relative to the center.

You'll see.

This is going to improve it.

Boy, this is really going super well so far.

So what I'm going to do is say, each X

is it's index into its column and row times the width

plus width divided by 2 plus height divided by 2.

That offsets everything by 1/2.

And then I'm actually going to say, the size--

I'll call this the X size.

I'm going to have this equal to w divided 2--

half of that.

And then I'm going to say, x minus x size, y minus x size

to x plus x size, --let's just call

this xr, kind of like the X's radius.

And then this one will be plus xr to y minus xr

and then to x minus xr to y plus xr.

And then, width divided by 4--

there we go!

There's my X's.

And let's make the stroke weight 4.

There's my X's.

And now the O's--

no more ellipse mode.

And let's make this w divided by 4 or divided by 2.

There we go!

Look!

So this is what the tic-tac-toe board looks like.

Yeah!