Name: Coding Challenge #149: Tic Tac Toe
Uploaded: 2020-03-27T19:36:10.000Z
Duration: 24 min 1 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Hello, and welcome to a coding challenge--

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,

(SINGING) Oh, you will refactor this later.

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.

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

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

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

I have not practiced or planned for this at all.

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

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

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,

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

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

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

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

So the idea is that this two-dimensional array

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

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.

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

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

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.

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.

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?

If spot equals player 1, then draw an ellipse at x, y 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.

Subtitles ListPlay Video

Coding Challenge #149: Tic Tac Toe

awkward

pretend

practice

spot