Name: 編碼挑戰＃149：井字型腳趾 (Coding Challenge #149: Tic Tac Toe)
Uploaded: 2021-01-14T10:18:06.000Z
Duration: 24 min 1 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。

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.

字幕列表影片播放

編碼挑戰＃149：井字型腳趾 (Coding Challenge #149: Tic Tac Toe)

awkward

pretend

practice

spot