title
Tic Tac Toe in p5.js (Coding Challenge 149)

description
This is a beginner-friendly challenge where I attempt to code a basic version of the game Tic-Tac-Toe using JavaScript and the p5.js library. Code: https://thecodingtrain.com/challenges/149-tic-tac-toe 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/5JngATm3c 🎥 Previous video: https://youtu.be/YNyULRrydVI?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Next video: https://youtu.be/vEetoBuHj8g?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH Videos: 🔴 Livestream Archive: https://youtu.be/Y6cMTh2BODY Related Coding Challenges: 🚂 #77 Recursion: https://youtu.be/jPsZwrV9ld0 🚂 #154 Tic Tac Toe AI with Minimax Algorithm: https://youtu.be/trKjYdBASyQ 🚂 #163 Bézier Curves: https://youtu.be/enNfb6p3j_g Timestamps: 0:00 Welcome! 0:54 Start coding 3:50 Drawing X and O 5:00 Let's diagram this! 8:46 Randomly choose the first player at the start of round 10:18 Drawing the grid 10:58 Each player places their symbol on a random spot 15:00 Check for a winner 18:44 Checking for equality of three elements 19:50 More bugs 21:01 Final Working Version! Show the winner 22:34 Thanks for watching! Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: http://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide 🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://discord.gg/hPuGy2g 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 🖋️ Twitter: https://twitter.com/thecodingtrain 📸 Instagram: https://www.instagram.com/the.coding.train/ 🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 p5.js Web Editor: https://editor.p5js.org/ 🔗 Processing: https://processing.org 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #beginners #tictactoe #games #p5js

detail
{'title': 'Tic Tac Toe in p5.js (Coding Challenge 149)', 'heatmap': [{'end': 838.53, 'start': 817.362, 'weight': 1}, {'end': 896.258, 'start': 878.171, 'weight': 0.723}], 'summary': 'Presents a beginner-friendly example of creating a tic-tac-toe game without over-engineering, using javascript and p5.js library to establish the game board, define players, and render the game grid. it also covers the implementation of a tic-tac-toe game algorithm, including the use of the minimax algorithm to create an ai.', 'chapters': [{'end': 38.483, 'segs': [{'end': 38.483, 'src': 'embed', 'start': 1.063, 'weight': 0, 'content': [{'end': 4.686, 'text': 'Hello, and welcome to a coding challenge, Tic-Tac-Toe.', 'start': 1.063, 'duration': 3.623}, {'end': 5.907, 'text': "I'm going to make Tic-Tac-Toe.", 'start': 4.826, 'duration': 1.081}, {'end': 10.57, 'text': "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.", 'start': 6.127, 'duration': 4.443}, {'end': 18.855, 'text': "So I'm going to try to make a very beginner-friendly example of the game Tic-Tac-Toe without any bells and whistles, without a lot of fancy code.", 'start': 10.97, 'duration': 7.885}, {'end': 20.176, 'text': "I'm not going to over-engineer it.", 'start': 18.895, 'duration': 1.281}, {'end': 22.238, 'text': 'I will come back and..', 'start': 20.777, 'duration': 1.461}, {'end': 26.654, 'text': 'I will refactor this later, you know.', 'start': 23.651, 'duration': 3.003}, {'end': 28.395, 'text': 'I will refactor it later,', 'start': 27.094, 'duration': 1.301}, {'end': 37.242, 'text': "because the reason why I'm 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.", 'start': 28.395, 'duration': 8.847}, {'end': 38.483, 'text': "But that's not happening in this video.", 'start': 37.262, 'duration': 1.221}], 'summary': 'Creating beginner-friendly tic-tac-toe game without over-engineering, with plans to refactor and implement ai algorithms later.', 'duration': 37.42, 'max_score': 1.063, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA1063.jpg'}], 'start': 1.063, 'title': 'Creating a tic-tac-toe game', 'summary': 'A brief coding challenge to create a beginner-friendly example of tic-tac-toe game without over-engineering, with a plan to later refactor and implement ai algorithms.', 'chapters': [{'end': 38.483, 'start': 1.063, 'title': 'Tic-tac-toe coding challenge', 'summary': 'A brief coding challenge to create a beginner-friendly example of tic-tac-toe game without over-engineering, with a plan to later refactor and implement ai algorithms.', 'duration': 37.42, 'highlights': ['The chapter involves creating a beginner-friendly example of Tic-Tac-Toe game without over-engineering.', 'The video aims to be very short due to time constraints.', 'The speaker plans to refactor the code later and implement AI algorithms for the game.']}], 'duration': 37.42, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA1063.jpg', 'highlights': ['The chapter involves creating a beginner-friendly example of Tic-Tac-Toe game without over-engineering.', 'The speaker plans to refactor the code later and implement AI algorithms for the game.', 'The video aims to be very short due to time constraints.']}, {'end': 198.06, 'segs': [{'end': 60.674, 'src': 'embed', 'start': 38.503, 'weight': 0, 'content': [{'end': 47.79, 'text': "I'm 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.", 'start': 38.503, 'duration': 9.287}, {'end': 50.552, 'text': 'Follow along if you wish and see what happens.', 'start': 48.371, 'duration': 2.181}, {'end': 52.294, 'text': 'I have not practiced or planned for this at all.', 'start': 50.693, 'duration': 1.601}, {'end': 55.13, 'text': 'All right, I need a board.', 'start': 54.349, 'duration': 0.781}, {'end': 56.491, 'text': 'So I definitely need a board.', 'start': 55.43, 'duration': 1.061}, {'end': 58.732, 'text': "I'm going to say let board.", 'start': 57.571, 'duration': 1.161}, {'end': 60.674, 'text': "And it's going to be an array.", 'start': 58.772, 'duration': 1.902}], 'summary': 'Creating a basic tic-tac-toe game using javascript and p5.js.', 'duration': 22.171, 'max_score': 38.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA38503.jpg'}], 'start': 38.503, 'title': 'Creating tic-tac-toe with javascript', 'summary': 'Details the process of creating a basic tic-tac-toe game using javascript and the p5.js library, including the establishment of the game board, defining players, and rendering the game grid using a nested loop.', 'chapters': [{'end': 198.06, 'start': 38.503, 'title': 'Creating tic-tac-toe with javascript', 'summary': 'Details the process of creating a basic tic-tac-toe game using javascript and the p5.js library, including the establishment of the game board, defining players, and rendering the game grid using a nested loop.', 'duration': 159.557, 'highlights': ['Establishing the game board and defining players The speaker sets up the game board as an array of arrays and defines two players, player one as X and player two as O.', 'Rendering the game grid using a nested loop The speaker uses a nested loop to render the game grid, iterating through each cell in a two-dimensional array structure to display the current state of the tic-tac-toe grid.', 'Utilizing canvas for rendering the board The speaker chooses to render the board using canvas and utilizes the draw loop to fill in the grid, incorporating the width and height of the canvas to position the game elements.']}], 'duration': 159.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA38503.jpg', 'highlights': ['Rendering the game grid using a nested loop The speaker uses a nested loop to render the game grid, iterating through each cell in a two-dimensional array structure to display the current state of the tic-tac-toe grid.', 'Establishing the game board and defining players The speaker sets up the game board as an array of arrays and defines two players, player one as X and player two as O.', 'Utilizing canvas for rendering the board The speaker chooses to render the board using canvas and utilizes the draw loop to fill in the grid, incorporating the width and height of the canvas to position the game elements.']}, {'end': 542.108, 'segs': [{'end': 229.041, 'src': 'embed', 'start': 200.915, 'weight': 1, 'content': [{'end': 205.117, 'text': 'And y equals height times i.', 'start': 200.915, 'duration': 4.202}, {'end': 206.498, 'text': "And let's run this.", 'start': 205.117, 'duration': 1.381}, {'end': 210.6, 'text': "What's going to happen? Do you see anything? Some x's and o's, they're sort of in there.", 'start': 206.578, 'duration': 4.022}, {'end': 218.323, 'text': "And then I'm going to say text size 32 to make it bigger.", 'start': 212, 'duration': 6.323}, {'end': 223.126, 'text': 'Why are they all on top of each other like that? Oh, oh, I forgot j here.', 'start': 218.924, 'duration': 4.202}, {'end': 224.519, 'text': 'There we go.', 'start': 224.039, 'duration': 0.48}, {'end': 227.161, 'text': "Look, there's my tic-tac-toe board.", 'start': 224.559, 'duration': 2.602}, {'end': 229.041, 'text': 'But things are kind of like off.', 'start': 227.721, 'duration': 1.32}], 'summary': "Creating a tic-tac-toe board with some x's and o's, but with sizing and positioning issues.", 'duration': 28.126, 'max_score': 200.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA200915.jpg'}, {'end': 318.3, 'src': 'embed', 'start': 277.218, 'weight': 2, 'content': [{'end': 279.18, 'text': 'Whoa, that looks totally wrong.', 'start': 277.218, 'duration': 1.962}, {'end': 280.582, 'text': 'So first of all, let me say no fill.', 'start': 279.24, 'duration': 1.342}, {'end': 286.705, 'text': 'And the offset should be plus W divided by two.', 'start': 283.323, 'duration': 3.382}, {'end': 288.965, 'text': 'So I need to offset all those spots.', 'start': 286.725, 'duration': 2.24}, {'end': 296.808, 'text': 'Oh, and then this would be, oh, no, no, no, no, no, no, no, no, no, no.', 'start': 292.547, 'duration': 4.261}, {'end': 297.789, 'text': 'Oh my God.', 'start': 297.209, 'duration': 0.58}, {'end': 303.971, 'text': "Help! Let's diagram this.", 'start': 301.15, 'duration': 2.821}, {'end': 308.813, 'text': 'I have a three by three board.', 'start': 307.172, 'duration': 1.641}, {'end': 313.917, 'text': 'Right? This is kind of x equals 0.', 'start': 311.315, 'duration': 2.602}, {'end': 315.438, 'text': 'This is x equals 1.', 'start': 313.917, 'duration': 1.521}, {'end': 316.839, 'text': 'This is x equals 2.', 'start': 315.438, 'duration': 1.401}, {'end': 318.3, 'text': 'This is y equals 0.', 'start': 316.839, 'duration': 1.461}], 'summary': 'Troubleshooting code on a 3x3 board with x and y coordinates.', 'duration': 41.082, 'max_score': 277.218, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA277218.jpg'}, {'end': 507.561, 'src': 'embed', 'start': 482.227, 'weight': 0, 'content': [{'end': 489.855, 'text': "There's my x's, and now the o's, no more ellipse mode, and let's make this w divided by four, or divided by two.", 'start': 482.227, 'duration': 7.628}, {'end': 491.074, 'text': 'There we go.', 'start': 490.694, 'duration': 0.38}, {'end': 493.735, 'text': 'Look So now this is what the tic-tac-toe board looks like.', 'start': 491.114, 'duration': 2.621}, {'end': 495.356, 'text': 'Yeah, I like the way it looks better now.', 'start': 493.975, 'duration': 1.381}, {'end': 496.736, 'text': 'That was painful.', 'start': 495.916, 'duration': 0.82}, {'end': 498.617, 'text': "So now let's set it up as blank.", 'start': 497.157, 'duration': 1.46}, {'end': 502.459, 'text': "Oh, and by the way, I've reversed my x's and y's.", 'start': 499.357, 'duration': 3.102}, {'end': 507.561, 'text': "So this should actually be the x's should be j, and the y's should be i.", 'start': 502.879, 'duration': 4.682}], 'summary': "Adjustments made to the tic-tac-toe board, x's and y's reversed.", 'duration': 25.334, 'max_score': 482.227, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA482227.jpg'}], 'start': 200.915, 'title': 'Creating and drawing tic-tac-toe board', 'summary': "Covers creating a 3x3 tic-tac-toe board with code, addressing alignment issues, drawing x's and circles, adjusting their positions and sizes, and setting the stroke weight to 4. it also introduces the setup of the game board and the assignment of players, initializing 'currentplayer' to 'player1'.", 'chapters': [{'end': 318.3, 'start': 200.915, 'title': 'Creating a tic-tac-toe board with code', 'summary': 'Discusses the process of creating a tic-tac-toe board using code, encountering issues such as alignment and drawing shapes, with a 3x3 board diagram.', 'duration': 117.385, 'highlights': ['The chapter discusses the process of creating a tic-tac-toe board using code.', 'Encountering issues such as alignment and drawing shapes is mentioned.', 'A 3x3 board diagram is utilized to illustrate the problem.']}, {'end': 482.227, 'start': 318.3, 'title': "Drawing x's and circles", 'summary': "Discusses drawing x's and circles, adjusting their positions and sizes, and setting the stroke weight to 4 for the drawing.", 'duration': 163.927, 'highlights': ["The x's are drawn relative to the center using specific calculations, improving the appearance of the drawing.", "The size of the x's is determined by the width divided by 2, and the stroke weight for the drawing is set to 4.", "The circles are drawn using the 'ellipse mode corner' and are later adjusted to improve their appearance."]}, {'end': 542.108, 'start': 482.227, 'title': 'Tic-tac-toe game setup and player assignment', 'summary': "Introduces the setup of a tic-tac-toe game board and the assignment of players, with a variable 'currentplayer' initialized to 'player1' for the game.", 'duration': 59.881, 'highlights': ["The tic-tac-toe board is set up with x's and o's, and the w divided by four or two.", "The x's and y's are reversed, with x's as 'j' and y's as 'i', and the j loop as the outer loop and the i loop as the inner loop.", "A variable called 'currentPlayer' is initialized to 'player1' for the game."]}], 'duration': 341.193, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA200915.jpg', 'highlights': ['The chapter discusses the process of creating a tic-tac-toe board using code.', "The x's are drawn relative to the center using specific calculations, improving the appearance of the drawing.", "The tic-tac-toe board is set up with x's and o's, and the w divided by four or two."]}, {'end': 1198.82, 'segs': [{'end': 794.42, 'src': 'embed', 'start': 680.598, 'weight': 1, 'content': [{'end': 685.399, 'text': "I'm just going to have each player pick a random spot.", 'start': 680.598, 'duration': 4.801}, {'end': 691.76, 'text': "So what I'm going to do is I'm also going to make an array called available.", 'start': 686.959, 'duration': 4.801}, {'end': 698.501, 'text': "So each available spot in the beginning, I'll just say I'm going to make a nested loop.", 'start': 692.4, 'duration': 6.101}, {'end': 704.042, 'text': 'So much for making me super beginner friendly.', 'start': 701.662, 'duration': 2.38}, {'end': 706.243, 'text': "So I'm going to say available.push.", 'start': 704.442, 'duration': 1.801}, {'end': 711.674, 'text': 'an i and a j.', 'start': 708.792, 'duration': 2.882}, {'end': 717.899, 'text': 'So right now, every little pair of index values for that grid is available.', 'start': 711.674, 'duration': 6.225}, {'end': 722.482, 'text': "So each time through draw, let's make a function that's called next turn.", 'start': 718.619, 'duration': 3.863}, {'end': 728.126, 'text': "And we'll say a spot that I'm picking is a random index.", 'start': 722.982, 'duration': 5.144}, {'end': 742.273, 'text': "because I want to remove it, index is a random number that's between 0 and the length of how many things are available.", 'start': 732.247, 'duration': 10.026}, {'end': 752.019, 'text': 'And then the spot is going to take that array available and remove that index value.', 'start': 743.334, 'duration': 8.685}, {'end': 755.301, 'text': 'The splice function will remove it and put it in spot.', 'start': 752.079, 'duration': 3.222}, {'end': 762.385, 'text': "And then I'm going to say board, spot zero, spot one.", 'start': 755.901, 'duration': 6.484}, {'end': 764.006, 'text': "Oh, that's so awkward.", 'start': 762.785, 'duration': 1.221}, {'end': 768.389, 'text': 'But spot is a little array with two values in it, zero and one.', 'start': 764.466, 'duration': 3.923}, {'end': 771.791, 'text': "And so this is not a comma, it's another little bracket.", 'start': 768.929, 'duration': 2.862}, {'end': 773.732, 'text': 'Oh, look how horrible that looks.', 'start': 771.811, 'duration': 1.921}, {'end': 783.713, 'text': "Let's say, let's do, let i equal spot index zero, let j equals spot index one and then I'm in the board.", 'start': 774.333, 'duration': 9.38}, {'end': 788.716, 'text': 'i j j.', 'start': 783.713, 'duration': 5.003}, {'end': 794.42, 'text': "I'm going to say the player, current player.", 'start': 788.716, 'duration': 5.704}], 'summary': 'Creating a game logic to pick random spots and remove them from the available array.', 'duration': 113.822, 'max_score': 680.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA680598.jpg'}, {'end': 847.656, 'src': 'heatmap', 'start': 817.362, 'weight': 1, 'content': [{'end': 821.765, 'text': 'When I splice it out, does it come in an array? Oh, how awful.', 'start': 817.362, 'duration': 4.403}, {'end': 823.807, 'text': 'It comes in an array, so I need to do that.', 'start': 822.066, 'duration': 1.741}, {'end': 824.628, 'text': 'There we go.', 'start': 824.067, 'duration': 0.561}, {'end': 825.949, 'text': 'There we go.', 'start': 824.648, 'duration': 1.301}, {'end': 826.93, 'text': "I'm filling up the board.", 'start': 825.969, 'duration': 0.961}, {'end': 833.066, 'text': "OK, I've done this in such a super awkward way.", 'start': 829.744, 'duration': 3.322}, {'end': 835.688, 'text': 'I might want to rethink this, but it does work.', 'start': 833.086, 'duration': 2.602}, {'end': 838.53, 'text': 'You watching this will make a nicer version of this.', 'start': 836.408, 'duration': 2.122}, {'end': 842.592, 'text': 'OK, but I want to go back and forth between the players.', 'start': 839.911, 'duration': 2.681}, {'end': 847.656, 'text': 'So current player should actually be an index into that array.', 'start': 842.953, 'duration': 4.703}], 'summary': 'Splicing results in array; aiming for a nicer version.', 'duration': 30.294, 'max_score': 817.362, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA817362.jpg'}, {'end': 903.712, 'src': 'heatmap', 'start': 878.171, 'weight': 0.723, 'content': [{'end': 883.273, 'text': 'So it should be O, X, O, X, O, X, O, X, O.', 'start': 878.171, 'duration': 5.102}, {'end': 884.674, 'text': 'Hey, O won that one.', 'start': 883.273, 'duration': 1.401}, {'end': 889.636, 'text': 'All right, so this works with my wacky implementation.', 'start': 886.534, 'duration': 3.102}, {'end': 893.057, 'text': "Now, I don't need mouse press to call next turn.", 'start': 890.316, 'duration': 2.741}, {'end': 896.258, 'text': 'I just want draw to call next turn.', 'start': 894.037, 'duration': 2.221}, {'end': 899.55, 'text': 'So it fills up.', 'start': 898.749, 'duration': 0.801}, {'end': 903.712, 'text': 'But I also want to check for a winner.', 'start': 900.43, 'duration': 3.282}], 'summary': 'Wacky implementation fills grid with o and x, checks for winner.', 'duration': 25.541, 'max_score': 878.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA878171.jpg'}, {'end': 1057.701, 'src': 'embed', 'start': 1014.781, 'weight': 0, 'content': [{'end': 1017.922, 'text': 'So this would be vertical, except it might be the other way around.', 'start': 1014.781, 'duration': 3.141}, {'end': 1022.644, 'text': 'And now I need to check diagonal.', 'start': 1019.923, 'duration': 2.721}, {'end': 1024.565, 'text': "So that's easy.", 'start': 1023.904, 'duration': 0.661}, {'end': 1043.877, 'text': 'I just want to say if board 0, 0 is equal to board 1, 1 is equal to board 2, 2, then the winner is board 0, 0.', 'start': 1024.845, 'duration': 19.032}, {'end': 1054.86, 'text': 'And then I can also check if board 2, 0 is equal to board 1, 1 is equal to board 0, 2.', 'start': 1043.877, 'duration': 10.983}, {'end': 1056.441, 'text': 'That would be the other diagonal.', 'start': 1054.86, 'duration': 1.581}, {'end': 1057.701, 'text': 'Then the winner is board 2, 0.', 'start': 1056.701, 'duration': 1}], 'summary': 'Checking diagonals for winning conditions on a 3x3 board.', 'duration': 42.92, 'max_score': 1014.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA1014781.jpg'}, {'end': 1169.372, 'src': 'embed', 'start': 1123.55, 'weight': 3, 'content': [{'end': 1132.464, 'text': 'No Oh! I did something so nuts.', 'start': 1123.55, 'duration': 8.914}, {'end': 1133.925, 'text': 'Look at this.', 'start': 1133.585, 'duration': 0.34}, {'end': 1138.008, 'text': "I was like, that doesn't work if this equals this equals that.", 'start': 1133.985, 'duration': 4.023}, {'end': 1139.028, 'text': "That doesn't work.", 'start': 1138.328, 'duration': 0.7}, {'end': 1142.731, 'text': 'This is the concept.', 'start': 1141.11, 'duration': 1.621}, {'end': 1152.237, 'text': "I'm going to write a function called equals 3, a, b, c.", 'start': 1145.953, 'duration': 6.284}, {'end': 1153.018, 'text': "And I'm going to return.", 'start': 1152.237, 'duration': 0.781}, {'end': 1162.41, 'text': 'if a equals b, and b equals c, and a equals c.', 'start': 1155.487, 'duration': 6.923}, {'end': 1167.271, 'text': 'So this is really the only way.', 'start': 1162.41, 'duration': 4.861}, {'end': 1169.372, 'text': "I mean, there's other ways, but this will actually check.", 'start': 1167.371, 'duration': 2.001}], 'summary': "Creating a function 'equals3' to check if a, b, and c are equal.", 'duration': 45.822, 'max_score': 1123.55, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA1123550.jpg'}], 'start': 545.151, 'title': 'Tic-tac-toe game implementation', 'summary': 'Discusses implementing a tic-tac-toe game algorithm with players taking turns, computer randomly selecting spots, and a focus on array manipulation and conditional statements.', 'chapters': [{'end': 717.899, 'start': 545.151, 'title': 'Tic-tac-toe game algorithm', 'summary': 'Discusses the implementation of a tic-tac-toe game algorithm in which players take turns to make a move on the game board, with the computer randomly selecting spots, and the availability of empty spots being tracked.', 'duration': 172.748, 'highlights': ['The chapter discusses the implementation of a tic-tac-toe game algorithm. Describes the main topic of the chapter.', 'Players take turns to make a move on the game board. Describes the gameplay process.', "The computer randomly selects spots on the game board. Details the computer's move strategy.", 'The availability of empty spots is tracked using an array called available. Explains the method used to track available spots on the game board.']}, {'end': 1198.82, 'start': 718.619, 'title': 'Tic-tac-toe game implementation', 'summary': 'Explains the implementation of a tic-tac-toe game, including the next turn function, checking for a winner, and handling the game logic, with a focus on array manipulation and conditional statements.', 'duration': 480.201, 'highlights': ['Explaining the next turn function and the use of array manipulation to remove the selected index and switch players, showcasing the implementation of game logic and player rotation. Array manipulation, player rotation', 'Describing the checkWinner function and the process of checking for a winner by evaluating horizontal, vertical, and diagonal combinations, emphasizing the conditional statements and logic for determining the game winner. Checking for game winner, evaluating combinations', 'Implementing the equals3 function to streamline the validation process for checking if three elements are equal, demonstrating the use of custom functions and modular code design. Custom function implementation, modular code design']}], 'duration': 653.669, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA545151.jpg', 'highlights': ['Describing the checkWinner function and the process of checking for a winner by evaluating horizontal, vertical, and diagonal combinations, emphasizing the conditional statements and logic for determining the game winner.', 'Explaining the next turn function and the use of array manipulation to remove the selected index and switch players, showcasing the implementation of game logic and player rotation.', 'The chapter discusses the implementation of a tic-tac-toe game algorithm.', 'Implementing the equals3 function to streamline the validation process for checking if three elements are equal, demonstrating the use of custom functions and modular code design.', 'Players take turns to make a move on the game board.', 'The computer randomly selects spots on the game board.', 'The availability of empty spots is tracked using an array called available.']}, {'end': 1430.006, 'segs': [{'end': 1269.223, 'src': 'embed', 'start': 1235.246, 'weight': 1, 'content': [{'end': 1237.307, 'text': "Take a deep breath and relax while you're coding.", 'start': 1235.246, 'duration': 2.061}, {'end': 1238.468, 'text': 'Return tie.', 'start': 1237.868, 'duration': 0.6}, {'end': 1242.171, 'text': 'Otherwise, return winner.', 'start': 1238.488, 'duration': 3.683}, {'end': 1249.75, 'text': 'Now, oh, they could be equal.', 'start': 1247.168, 'duration': 2.582}, {'end': 1252.291, 'text': "They can't be blank.", 'start': 1250.09, 'duration': 2.201}, {'end': 1254.973, 'text': "They can't all be, then somebody wins.", 'start': 1252.712, 'duration': 2.261}, {'end': 1256.254, 'text': 'They have to be full.', 'start': 1255.213, 'duration': 1.041}, {'end': 1260.637, 'text': 'So OK, and a is not equal to blank.', 'start': 1256.774, 'duration': 3.863}, {'end': 1261.838, 'text': 'There we go.', 'start': 1261.297, 'duration': 0.541}, {'end': 1263.579, 'text': 'x is the winner.', 'start': 1262.718, 'duration': 0.861}, {'end': 1264.359, 'text': "Let's run it again.", 'start': 1263.599, 'duration': 0.76}, {'end': 1266.02, 'text': 'x is the winner.', 'start': 1264.379, 'duration': 1.641}, {'end': 1267.862, 'text': 'o is the winner.', 'start': 1266.04, 'duration': 1.822}, {'end': 1269.223, 'text': 'x is the winner.', 'start': 1268.562, 'duration': 0.661}], 'summary': 'The coding resulted in x winning 3 times and o winning once.', 'duration': 33.977, 'max_score': 1235.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA1235246.jpg'}, {'end': 1427.744, 'src': 'embed', 'start': 1360.748, 'weight': 0, 'content': [{'end': 1362.651, 'text': 'X just keeps winning over and over again.', 'start': 1360.748, 'duration': 1.903}, {'end': 1365.975, 'text': 'I will come back in a future second part to this.', 'start': 1363.612, 'duration': 2.363}, {'end': 1369.019, 'text': "I know I say this for so many coding challenges, and you think I'm never coming back.", 'start': 1366.035, 'duration': 2.984}, {'end': 1370.321, 'text': "It'll be sometime in the next week.", 'start': 1369.039, 'duration': 1.282}, {'end': 1371.422, 'text': 'several years.', 'start': 1370.661, 'duration': 0.761}, {'end': 1382.25, 'text': 'I will come back and fix this up a little bit, as well as implement something called the Minimax algorithm to actually make thoughtful,', 'start': 1371.422, 'duration': 10.828}, {'end': 1385.853, 'text': "smart decisions for how to place your X's and your O's.", 'start': 1382.25, 'duration': 3.603}, {'end': 1390.236, 'text': 'For an AI to learn how to beat this game and to always win tic-tac-toe.', 'start': 1386.073, 'duration': 4.163}, {'end': 1399.103, 'text': 'Ah, and as a challenge to you, the viewer, Take this version of my tic-tac-toe coding challenge and when x or o wins,', 'start': 1390.376, 'duration': 8.727}, {'end': 1402.445, 'text': 'draw a nice little line through it to indicate the winning.', 'start': 1399.103, 'duration': 3.342}, {'end': 1403.666, 'text': "I don't have time for that right now.", 'start': 1402.465, 'duration': 1.201}, {'end': 1404.687, 'text': 'I should really add this to this.', 'start': 1403.686, 'duration': 1.001}, {'end': 1405.908, 'text': 'But please add this to this.', 'start': 1404.947, 'duration': 0.961}, {'end': 1413.594, 'text': 'Go to the Coding Train website, where you will find this challenge on the website itself,', 'start': 1406.248, 'duration': 7.346}, {'end': 1421.04, 'text': 'and a place to add your community contribution as well as a video tutorial about how to add your community contribution is out now as well.', 'start': 1413.594, 'duration': 7.446}, {'end': 1427.744, 'text': 'So I hope to see lots of tic-tac-toe games and computers playing them, people playing them, and have a lot of fun making those.', 'start': 1421.24, 'duration': 6.504}], 'summary': 'X aims to implement minimax algorithm to make ai win tic-tac-toe and encourages community contributions.', 'duration': 66.996, 'max_score': 1360.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA1360748.jpg'}], 'start': 1199.82, 'title': 'Implementing minimax algorithm for tic-tac-toe ai', 'summary': 'Discusses the implementation of the minimax algorithm to create an ai that consistently wins tic-tac-toe and encourages viewer participation, with resources available on the coding train website.', 'chapters': [{'end': 1360.548, 'start': 1199.82, 'title': 'Tic-tac-toe coding challenge', 'summary': "Discusses the process of creating an ai to play tic-tac-toe against itself, highlighting the importance of taking time to code properly and emphasizing the learning process of the ai, with examples of the game's outcomes and the changes made to the code.", 'duration': 160.728, 'highlights': ['The importance of taking time to code properly is emphasized, stressing the need to relax while coding and avoid rushing, in order to ensure better coding outcomes and results.', "Examples of the game's outcomes are provided, including ties and the victories of 'X' and 'O', offering insight into the functionality of the AI and the variations in game results.", 'The process of creating an AI to play tic-tac-toe against itself is discussed, highlighting the learning process of the AI and how it adapts and improves over time.']}, {'end': 1430.006, 'start': 1360.748, 'title': 'Tic-tac-toe coding challenge', 'summary': 'Focuses on implementing the minimax algorithm to create an ai that consistently wins tic-tac-toe and encourages viewers to partake in the challenge by adding a feature to indicate the winning line, with additional instructions and resources available on the coding train website.', 'duration': 69.258, 'highlights': ['The chapter discusses the plan to implement the Minimax algorithm to create a strategic AI for tic-tac-toe, with a promise to return to this in the next week or so.', 'The speaker challenges viewers to enhance the tic-tac-toe coding challenge by adding a feature to display the winning line for x or o, and directs them to the Coding Train website for resources and a video tutorial on community contributions.', 'Encourages viewers to participate in the tic-tac-toe challenge and shares enthusiasm for seeing various implementations and interactions with the game.']}], 'duration': 230.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTWrWM1UsnA/pics/GTWrWM1UsnA1199820.jpg', 'highlights': ['The process of creating an AI to play tic-tac-toe against itself is discussed, highlighting the learning process of the AI and how it adapts and improves over time.', 'The importance of taking time to code properly is emphasized, stressing the need to relax while coding and avoid rushing, in order to ensure better coding outcomes and results.', 'The chapter discusses the plan to implement the Minimax algorithm to create a strategic AI for tic-tac-toe, with a promise to return to this in the next week or so.', 'The speaker challenges viewers to enhance the tic-tac-toe coding challenge by adding a feature to display the winning line for x or o, and directs them to the Coding Train website for resources and a video tutorial on community contributions.', 'Encourages viewers to participate in the tic-tac-toe challenge and shares enthusiasm for seeing various implementations and interactions with the game.', "Examples of the game's outcomes are provided, including ties and the victories of 'X' and 'O', offering insight into the functionality of the AI and the variations in game results."]}], 'highlights': ['The chapter discusses the plan to implement the Minimax algorithm to create a strategic AI for tic-tac-toe, with a promise to return to this in the next week or so.', 'Describing the checkWinner function and the process of checking for a winner by evaluating horizontal, vertical, and diagonal combinations, emphasizing the conditional statements and logic for determining the game winner.', 'The process of creating an AI to play tic-tac-toe against itself is discussed, highlighting the learning process of the AI and how it adapts and improves over time.', 'Rendering the game grid using a nested loop The speaker uses a nested loop to render the game grid, iterating through each cell in a two-dimensional array structure to display the current state of the tic-tac-toe grid.', 'Establishing the game board and defining players The speaker sets up the game board as an array of arrays and defines two players, player one as X and player two as O.', 'The chapter involves creating a beginner-friendly example of Tic-Tac-Toe game without over-engineering.', 'The speaker plans to refactor the code later and implement AI algorithms for the game.', 'The video aims to be very short due to time constraints.', 'The chapter discusses the process of creating a tic-tac-toe board using code.', "The x's are drawn relative to the center using specific calculations, improving the appearance of the drawing.", "The tic-tac-toe board is set up with x's and o's, and the w divided by four or two.", 'Explaining the next turn function and the use of array manipulation to remove the selected index and switch players, showcasing the implementation of game logic and player rotation.', 'Implementing the equals3 function to streamline the validation process for checking if three elements are equal, demonstrating the use of custom functions and modular code design.', 'Players take turns to make a move on the game board.', 'The computer randomly selects spots on the game board.', 'The availability of empty spots is tracked using an array called available.', 'The importance of taking time to code properly is emphasized, stressing the need to relax while coding and avoid rushing, in order to ensure better coding outcomes and results.', 'The speaker challenges viewers to enhance the tic-tac-toe coding challenge by adding a feature to display the winning line for x or o, and directs them to the Coding Train website for resources and a video tutorial on community contributions.', 'Encourages viewers to participate in the tic-tac-toe challenge and shares enthusiasm for seeing various implementations and interactions with the game.', "Examples of the game's outcomes are provided, including ties and the victories of 'X' and 'O', offering insight into the functionality of the AI and the variations in game results."]}