title
Coding Challenge #94: 2048 - Part 1
description
In this multi-part coding challenge, I code the sliding puzzle game 2048 in JavaScript using canvas and p5.js. Code: https://thecodingtrain.com/challenges/94-2048
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/aeIk9JZ-U
Other Parts of this Challenge:
đē 2048 - Part 2: https://youtu.be/8f8P1i0W26E
đē 2048 - Part 3: https://youtu.be/3iYvT8TBIro
đē 2048 - Part 4: https://youtu.be/vtMKeEGpMI4
đĨ Previous video: https://youtu.be/uWzPe_S-RVE?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Next video: https://youtu.be/5cNnf_7e92Q?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
đž 2048: https://gabrielecirulli.github.io/2048/
đ 2048 on Wikipedia: https://en.wikipedia.org/wiki/2048_(video_game)
Videos:
đ´ Coding Train Live 122 https://youtu.be/ze_o4YvZ6-s?t=5648s
Related Coding Challenges:
đ #142 Rubik's Cube: https://youtu.be/9PGfL4t-uqE
đ #149 Tic Tac Toe: https://youtu.be/GTWrWM1UsnA
đ #165 Slide Puzzle: https://youtu.be/uQZLzhrzEs4
Timestamps:
0:00 Introducing today's topic: 2048 sliding puzzle game
2:50 How does the game work?
5:16 Let's Code!
6:10 Write an addNumber function
8:12 Use the ternary operator to pick either a 2 or 4
9:54 Draw the board
14:38 Write a slide function
18:10 Add a keyPressed function to slide the numbers
19:13 Write a combine function
25:23 Write an operate function
31:29 Check to see if a number has moved
33:09 Write a function to compare two different matrices
34:50 Conclusion and next steps
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://thecodingtrain.com/discord
đ 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
#2048 #slidingpuzzlegame #javascript #p5js
detail
{'title': 'Coding Challenge #94: 2048 - Part 1', 'heatmap': [{'end': 340.954, 'start': 314.357, 'weight': 0.806}, {'end': 573.604, 'start': 526.408, 'weight': 0.884}], 'summary': "Explores creating a version of the '2048' game using object-oriented programming, addressing challenges and seeking feedback for enhancements, explaining game basics, creating game grid, using javascript operators and console data visualization, developing game functions, and debugging and refining game mechanics.", 'chapters': [{'end': 170.826, 'segs': [{'end': 52.539, 'src': 'embed', 'start': 25.106, 'weight': 0, 'content': [{'end': 33.231, 'text': 'If you are not, this game is a sliding block puzzle created by the developer Gabrielle Cerulli written in a weekend.', 'start': 25.106, 'duration': 8.125}, {'end': 35.213, 'text': 'It became extraordinarily popular.', 'start': 33.271, 'duration': 1.942}, {'end': 36.814, 'text': 'It is now actually open source.', 'start': 35.233, 'duration': 1.581}, {'end': 44.717, 'text': "You can go and check out the code that is written excellent way, I'm sure, much better than whatever code that I'm going to write in this video.", 'start': 36.834, 'duration': 7.883}, {'end': 52.539, 'text': 'This, of course, is a game that is very similar to Threes and another game, 1024.', 'start': 45.037, 'duration': 7.502}], 'summary': 'Sliding block puzzle game by gabrielle cerulli gained popularity and is now open source.', 'duration': 27.433, 'max_score': 25.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf025106.jpg'}, {'end': 91.48, 'src': 'embed', 'start': 68.045, 'weight': 1, 'content': [{'end': 75.31, 'text': "which I've already completed you can see how ugly mine is compared to this one is that object-oriented programming would really help me.", 'start': 68.045, 'duration': 7.265}, {'end': 80.313, 'text': "Because one of the main things that's missing right now ooh, look at this not from here, because look at this beautiful.", 'start': 75.51, 'duration': 4.803}, {'end': 83.495, 'text': "look at all these beautiful animations is I don't have any animations.", 'start': 80.313, 'duration': 3.182}, {'end': 85.537, 'text': 'But I have the functionality of the game.', 'start': 83.796, 'duration': 1.741}, {'end': 88.439, 'text': 'I even have some little things in here.', 'start': 85.857, 'duration': 2.582}, {'end': 91.48, 'text': "that you could learn from perhaps, I don't know.", 'start': 89.119, 'duration': 2.361}], 'summary': 'Object-oriented programming can enhance functionality and add animations to the game.', 'duration': 23.435, 'max_score': 68.045, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf068045.jpg'}, {'end': 155.714, 'src': 'embed', 'start': 125.795, 'weight': 2, 'content': [{'end': 131.82, 'text': 'you could make your own version of this game or your own twist on this game, and you could submit it at thecodingtrain.com.', 'start': 125.795, 'duration': 6.025}, {'end': 132.821, 'text': 'instructions are there?', 'start': 131.82, 'duration': 1.001}, {'end': 134.742, 'text': "link in this video's description for how to do that?", 'start': 132.821, 'duration': 1.921}, {'end': 141.117, 'text': "So, part one is pretty long, parts two and three are kind of short, and part four, We don't speak.", 'start': 134.802, 'duration': 6.315}, {'end': 142.439, 'text': "We don't speak about the part four.", 'start': 141.157, 'duration': 1.282}, {'end': 144.241, 'text': "We don't speak about the part four.", 'start': 142.779, 'duration': 1.462}, {'end': 145.582, 'text': 'So enjoy.', 'start': 144.301, 'duration': 1.281}, {'end': 148.286, 'text': 'I hope to see you sometime again in the future.', 'start': 145.602, 'duration': 2.684}, {'end': 155.714, 'text': "I'm going to go take a trip on the coding train in the corner and wonder what I'm doing with my life train.", 'start': 148.566, 'duration': 7.148}], 'summary': 'Create your own game version and submit at thecodingtrain.com. enjoy the process and potential future collaboration.', 'duration': 29.919, 'max_score': 125.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf0125795.jpg'}], 'start': 2.097, 'title': 'Coding 2048 game', 'summary': "Delves into creating a version of '2048' game, addressing challenges, use of object-oriented programming, and seeking feedback for enhancements.", 'chapters': [{'end': 170.826, 'start': 2.097, 'title': 'Coding challenge: 2048 game', 'summary': "Discusses the process of attempting to create a version of the popular game '2048', highlighting the challenges faced, the use of object-oriented programming, and the invitation for feedback and submissions for improved versions of the game.", 'duration': 168.729, 'highlights': ["The game '2048' is a sliding block puzzle created by Gabrielle Cerulli, which became extraordinarily popular and is now open source.", 'The speaker attempted to make their own version of the game, highlighting the need for object-oriented programming and the challenges faced during the process.', 'The coding challenge is currently in four parts, with the potential addition of a fifth part for animation software, and viewers are encouraged to provide feedback and submit their own versions of the game at thecodingtrain.com.']}], 'duration': 168.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf02097.jpg', 'highlights': ["The game '2048' is a sliding block puzzle created by Gabrielle Cerulli, now open source.", 'The speaker attempted to make their own version, emphasizing the need for object-oriented programming and the challenges faced.', 'The coding challenge is currently in four parts, with potential addition of a fifth part for animation software, and viewers are encouraged to provide feedback and submit their own versions at thecodingtrain.com.']}, {'end': 524.446, 'segs': [{'end': 199.474, 'src': 'embed', 'start': 172.347, 'weight': 0, 'content': [{'end': 179.973, 'text': 'Alright, so, the game, by definition, is played on a four by four grid.', 'start': 172.347, 'duration': 7.626}, {'end': 183.07, 'text': 'Now again, there are obviously variations of this.', 'start': 181.149, 'duration': 1.921}, {'end': 189.631, 'text': 'This is not, there are predecessors to 2048 of the same game with slightly different designs and flavors and ideas.', 'start': 183.35, 'duration': 6.281}, {'end': 194.673, 'text': 'But the core idea of the 2048 game is four by four grid.', 'start': 190.032, 'duration': 4.641}, {'end': 199.474, 'text': 'It starts I think with two random spots filled in with either a two or a four.', 'start': 195.253, 'duration': 4.221}], 'summary': '2048 game is played on a 4x4 grid, starting with two random spots filled with a 2 or 4.', 'duration': 27.127, 'max_score': 172.347, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf0172347.jpg'}, {'end': 255.647, 'src': 'embed', 'start': 228.198, 'weight': 3, 'content': [{'end': 231.628, 'text': 'So these twos, will combine into a four.', 'start': 228.198, 'duration': 3.43}, {'end': 240.275, 'text': "And so, let's go back and look at that, and we can kind of see, let's see that happening here, right? As I press down, nothing happens.", 'start': 232.008, 'duration': 8.267}, {'end': 241.336, 'text': 'I press the left.', 'start': 240.335, 'duration': 1.001}, {'end': 243.257, 'text': 'everything moves to the left, the four moves to the left.', 'start': 241.336, 'duration': 1.921}, {'end': 243.878, 'text': 'that two.', 'start': 243.257, 'duration': 0.621}, {'end': 247.32, 'text': 'ah, let me move that two up and then let me move that over.', 'start': 243.878, 'duration': 3.442}, {'end': 251.163, 'text': 'those two 16s will combine and those two twos will combine and these two twos will combine.', 'start': 247.32, 'duration': 3.843}, {'end': 253.745, 'text': 'There we go, now I can move down, so you get the idea.', 'start': 251.824, 'duration': 1.921}, {'end': 255.647, 'text': 'So what do I need??', 'start': 254.586, 'duration': 1.061}], 'summary': 'The twos and sixteens combine into fours, demonstrating a process of combining and moving numbers in a game scenario.', 'duration': 27.449, 'max_score': 228.198, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf0228198.jpg'}, {'end': 340.954, 'src': 'heatmap', 'start': 294.465, 'weight': 1, 'content': [{'end': 299.067, 'text': 'Okay, so, What was I talking about? Oh, yes, 2048.', 'start': 294.465, 'duration': 4.602}, {'end': 307.152, 'text': 'If I can just get them to figure out how to do it in one direction, then if the user or the player presses up,', 'start': 299.067, 'duration': 8.085}, {'end': 309.674, 'text': 'I could kind of just rotate the whole thing and go in that direction.', 'start': 307.152, 'duration': 2.522}, {'end': 311.535, 'text': "So let's see if we can figure this out.", 'start': 309.714, 'duration': 1.821}, {'end': 313.577, 'text': "All right, so let's start writing some code.", 'start': 311.555, 'duration': 2.022}, {'end': 317.859, 'text': "I'm going to say I'm going to have a variable called grid.", 'start': 314.357, 'duration': 3.502}, {'end': 321.11, 'text': "And guess what? I'm just going to hard code it.", 'start': 317.899, 'duration': 3.211}, {'end': 322.851, 'text': 'I feel OK with that.', 'start': 321.89, 'duration': 0.961}, {'end': 327.954, 'text': "Do you feel OK with that? I'm going to say, what is it? It's going to start as it needs.", 'start': 322.991, 'duration': 4.963}, {'end': 330.556, 'text': "It's basically this, right? I need to have four.", 'start': 328.174, 'duration': 2.382}, {'end': 334.37, 'text': 'arrays of zeros.', 'start': 332.188, 'duration': 2.182}, {'end': 337.031, 'text': "And let's see if, yeah, there we go.", 'start': 334.89, 'duration': 2.141}, {'end': 340.954, 'text': "This is, that's the board 2048 board.", 'start': 337.712, 'duration': 3.242}], 'summary': 'Developing 2048 game, hardcoded grid with 4 arrays of zeros', 'duration': 46.489, 'max_score': 294.465, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf0294465.jpg'}, {'end': 396.615, 'src': 'embed', 'start': 367.99, 'weight': 2, 'content': [{'end': 379.799, 'text': 'So what the add number function should do is it should pick a random location that does not already that has a zero and It should add a two or a four there.', 'start': 367.99, 'duration': 11.809}, {'end': 386.091, 'text': "So what I'll do is I So first I should check.", 'start': 379.799, 'duration': 6.292}, {'end': 390.593, 'text': "first I need to check is the whole board full of everything, that's not?", 'start': 386.091, 'duration': 4.502}, {'end': 391.713, 'text': 'are there any zero spots?', 'start': 390.593, 'duration': 1.12}, {'end': 396.615, 'text': "So let's make a list of all the possible spots that I can add.", 'start': 392.093, 'duration': 4.522}], 'summary': 'Add number function selects random zero spot and adds 2 or 4.', 'duration': 28.625, 'max_score': 367.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf0367990.jpg'}, {'end': 497.296, 'src': 'embed', 'start': 461.052, 'weight': 5, 'content': [{'end': 477.202, 'text': "So if options.length Is greater than zero, then I can pick a spot and then I'm going to say grid spot dot X, spot dot Y,", 'start': 461.052, 'duration': 16.15}, {'end': 485.594, 'text': 'Spot dot Y equals And I basically want to pick.', 'start': 477.202, 'duration': 8.392}, {'end': 487.194, 'text': 'I either want to pick a two or a four.', 'start': 485.594, 'duration': 1.6}, {'end': 493.495, 'text': "So I can use a ternary operator, woohoo, I'm just, I'm going totally nuts today.", 'start': 487.734, 'duration': 5.761}, {'end': 497.296, 'text': "Which basically what a ternary operator does is it says, okay, I'm going to pick a random number.", 'start': 493.855, 'duration': 3.441}], 'summary': 'Using a ternary operator to pick a random number from options.', 'duration': 36.244, 'max_score': 461.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf0461052.jpg'}], 'start': 172.347, 'title': '2048 game basics and creating game grid', 'summary': 'Explains the core idea of the 2048 game played on a four by four grid and discusses the process of creating the game grid, including hardcoding, identifying available spots, adding random numbers, and looping through the grid.', 'chapters': [{'end': 294.345, 'start': 172.347, 'title': '2048 game basics', 'summary': 'Explains the core idea of the 2048 game, played on a four by four grid with the goal of condensing numbers to one direction, showcasing the game mechanics and the potential for number combination.', 'duration': 121.998, 'highlights': ['The core idea of the 2048 game is a four by four grid with numbers combining when moved in a certain direction. The 2048 game is played on a four by four grid, and numbers combine when moved in a certain direction.', 'Numbers combine when the same values are moved into each other, such as two twos combining to form a four. When the same values are moved into each other, they combine, such as two twos combining to form a four.', 'The goal is to condense numbers to one direction, showcasing the mechanics of the game. The goal of the game is to condense numbers to one direction, showcasing the mechanics of the game.']}, {'end': 524.446, 'start': 294.465, 'title': 'Creating 2048 game grid', 'summary': 'Discusses the process of creating a 2048 game grid, including hardcoding the grid, identifying available spots, and adding random numbers to the grid using a ternary operator. it also involves looping through the grid and checking for valid spots to place numbers.', 'duration': 229.981, 'highlights': ['The author hardcodes the 2048 game grid as four arrays of zeros, which provides the initial board structure. Hardcoding the 2048 game grid', 'The process involves identifying and creating a list of available spots on the grid to add random numbers. Identifying available spots on the grid', 'The author utilizes a ternary operator to randomly select between adding a two or a four to a specific spot on the grid, providing a dynamic addition process. Utilizing ternary operator for random number selection']}], 'duration': 352.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf0172347.jpg', 'highlights': ['The core idea of the 2048 game is a four by four grid with numbers combining when moved in a certain direction.', 'The author hardcodes the 2048 game grid as four arrays of zeros, which provides the initial board structure.', 'The process involves identifying and creating a list of available spots on the grid to add random numbers.', 'Numbers combine when the same values are moved into each other, such as two twos combining to form a four.', 'The goal is to condense numbers to one direction, showcasing the mechanics of the game.', 'The author utilizes a ternary operator to randomly select between adding a two or a four to a specific spot on the grid, providing a dynamic addition process.']}, {'end': 816.803, 'segs': [{'end': 636.855, 'src': 'heatmap', 'start': 526.408, 'weight': 0, 'content': [{'end': 530.151, 'text': "I could have written an if statement, but everybody always complains when I don't use the ternary operator,", 'start': 526.408, 'duration': 3.743}, {'end': 532.152, 'text': "so I'm going to try using it and who knows if I got it right.", 'start': 530.151, 'duration': 2.001}, {'end': 547.052, 'text': "So let's, in setup, I'm going to say console.log table, I'm going to say add number, Add number and console.table grid.", 'start': 532.893, 'duration': 14.159}, {'end': 558.602, 'text': 'Console.table is a really nice way to display an array in the browser, in the JavaScript console in the browser.', 'start': 547.552, 'duration': 11.05}, {'end': 559.223, 'text': 'So let me do this.', 'start': 558.622, 'duration': 0.601}, {'end': 560.664, 'text': 'So look at that.', 'start': 560.004, 'duration': 0.66}, {'end': 562.026, 'text': 'Look at that.', 'start': 561.665, 'duration': 0.361}, {'end': 562.906, 'text': "Let's do it again.", 'start': 562.366, 'duration': 0.54}, {'end': 565.209, 'text': 'Two and two.', 'start': 564.808, 'duration': 0.401}, {'end': 567.4, 'text': 'Two and two, all right.', 'start': 566.82, 'duration': 0.58}, {'end': 573.604, 'text': 'So in a way, I almost want to just do this, the entire thing in the console and not draw anything.', 'start': 567.6, 'duration': 6.004}, {'end': 576.025, 'text': 'Because I could just do the whole thing in the console and play the game.', 'start': 573.824, 'duration': 2.201}, {'end': 581.108, 'text': "But I think it's going to be much easier if I can represent what we're seeing in the console in the canvas.", 'start': 576.065, 'duration': 5.043}, {'end': 583.209, 'text': "So let's put that into draw.", 'start': 581.408, 'duration': 1.801}, {'end': 588.872, 'text': "So here, this is my nested loop that I'm going to be using constantly.", 'start': 584.91, 'duration': 3.962}, {'end': 599.348, 'text': 'and I am going to first draw a rectangle, and I guess the size is always going to be the width divided by four.', 'start': 590.982, 'duration': 8.366}, {'end': 604.051, 'text': "You know, I think I can probably, for right now, just say it's 100.", 'start': 600.569, 'duration': 3.482}, {'end': 607.714, 'text': "Like I can hard code a lot of stuff because it's 400 by 400, refactor later.", 'start': 604.051, 'duration': 3.663}, {'end': 625.198, 'text': "And so I'm going to draw a rectangle at i times w, j times w, w, w, And I'm going to say no fill, stroke weight 2, stroke 0.", 'start': 608.975, 'duration': 16.223}, {'end': 628.16, 'text': "And let's make the background 255.", 'start': 625.198, 'duration': 2.962}, {'end': 632.003, 'text': 'And I should see a nice grid now.', 'start': 628.16, 'duration': 3.843}, {'end': 636.855, 'text': "There we go, I've got my nice grid.", 'start': 634.994, 'duration': 1.861}], 'summary': 'Using console.table to display array, drawing grid in canvas.', 'duration': 112.409, 'max_score': 526.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf0526408.jpg'}], 'start': 524.446, 'title': 'Javascript operators and console data visualization', 'summary': 'Covers the usage of ternary operator in javascript to display an array using console.table, emphasizing code simplification and user experience. it also explains visualizing console data in a canvas using nested loops and drawing functions in p5, encountering errors in positioning and rendering the grid and text. the grid size is 400 by 400, and the rectangle size is initially set to 100, with potential refactoring later.', 'chapters': [{'end': 576.025, 'start': 524.446, 'title': 'Using ternary operator in javascript', 'summary': 'Demonstrates the usage of the ternary operator in javascript to display an array using console.table, with an emphasis on simplifying code and enhancing user experience.', 'duration': 51.579, 'highlights': ['The chapter showcases the usage of the ternary operator in JavaScript to simplify code and improve readability.', 'The speaker demonstrates the console.table function in JavaScript, which provides a convenient way to display arrays in the browser console.', 'The speaker expresses a desire to perform the entire process in the console and play the game without drawing anything.']}, {'end': 816.803, 'start': 576.065, 'title': 'Visualization of console data in canvas', 'summary': 'Explains the process of visualizing console data in a canvas using nested loops and drawing functions in p5, while encountering and solving errors in positioning and rendering the grid and text. the grid size is set to 400 by 400, and the rectangle size is initially set to 100, with potential refactoring later.', 'duration': 240.738, 'highlights': ['The process of visualizing console data in a canvas using nested loops and drawing functions in p5 is explained, encountering and solving errors in positioning and rendering the grid and text. The transcript details the visualization process of console data in a canvas using nested loops and drawing functions in p5, along with encountering and solving errors in positioning and rendering the grid and text.', 'The grid size is set to 400 by 400, and the rectangle size is initially set to 100, with potential refactoring later. The initial grid size is set to 400 by 400, and the rectangle size is set to 100, with potential refactoring later to optimize the visualization.']}], 'duration': 292.357, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf0524446.jpg', 'highlights': ['The chapter showcases the usage of the ternary operator in JavaScript to simplify code and improve readability.', 'The speaker demonstrates the console.table function in JavaScript, which provides a convenient way to display arrays in the browser console.', 'The process of visualizing console data in a canvas using nested loops and drawing functions in p5 is explained, encountering and solving errors in positioning and rendering the grid and text.', 'The grid size is set to 400 by 400, and the rectangle size is initially set to 100, with potential refactoring later.']}, {'end': 1383.715, 'segs': [{'end': 874.423, 'src': 'embed', 'start': 818.043, 'weight': 2, 'content': [{'end': 820.105, 'text': 'Sorry you had to sit through that.', 'start': 818.043, 'duration': 2.062}, {'end': 822.727, 'text': "So now it's fine.", 'start': 821.586, 'duration': 1.141}, {'end': 824.848, 'text': 'And now I can put the value there.', 'start': 822.867, 'duration': 1.981}, {'end': 826.149, 'text': 'There we go.', 'start': 825.669, 'duration': 0.48}, {'end': 827.61, 'text': 'So now this should work.', 'start': 826.609, 'duration': 1.001}, {'end': 830.472, 'text': 'This is my opening board no matter what.', 'start': 827.73, 'duration': 2.742}, {'end': 833.094, 'text': "Okay, we're getting there.", 'start': 831.673, 'duration': 1.421}, {'end': 835.035, 'text': '2048, here we come.', 'start': 833.114, 'duration': 1.921}, {'end': 844.672, 'text': "So now what's the deal? I'm just going to say, for right now, whenever I hit the space bar, I'm going to send everything to the right.", 'start': 835.776, 'duration': 8.896}, {'end': 847.473, 'text': "OK, so let's think about this.", 'start': 845.953, 'duration': 1.52}, {'end': 853.134, 'text': "If I have an array of numbers and there's so many different ways you could approach this problem,", 'start': 848.713, 'duration': 4.421}, {'end': 856.455, 'text': "and I'm sure I'm not going to do it in the most efficient or sensical way.", 'start': 853.134, 'duration': 3.321}, {'end': 862.296, 'text': "But the first thing that I would do, like let's say this is the row.", 'start': 857.075, 'duration': 5.221}, {'end': 873.362, 'text': 'The first thing that I would do is just pack everything to the right so that any empty spots would be left on the left side.', 'start': 862.676, 'duration': 10.686}, {'end': 874.423, 'text': "So let's first do that.", 'start': 873.482, 'duration': 0.941}], 'summary': 'Discussing coding a game with 2048 and problem-solving an array of numbers.', 'duration': 56.38, 'max_score': 818.043, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf0818043.jpg'}, {'end': 1077.078, 'src': 'embed', 'start': 1034.48, 'weight': 0, 'content': [{'end': 1040.324, 'text': "Concat Where's my slide? Array concat zeros.", 'start': 1034.48, 'duration': 5.844}, {'end': 1046.484, 'text': 'No Oh, it makes a new array.', 'start': 1043.626, 'duration': 2.858}, {'end': 1047.326, 'text': 'It makes a new array.', 'start': 1046.565, 'duration': 0.761}, {'end': 1052.147, 'text': 'OK So I need to say array equals array concat zeros.', 'start': 1047.726, 'duration': 4.421}, {'end': 1054.027, 'text': 'OK, there we go.', 'start': 1053.067, 'duration': 0.96}, {'end': 1055.048, 'text': "Now let's take a look at this.", 'start': 1054.107, 'duration': 0.941}, {'end': 1057.929, 'text': "Let's get out of here, go back to here.", 'start': 1056.208, 'duration': 1.721}, {'end': 1060.609, 'text': 'There we go.', 'start': 1060.169, 'duration': 0.44}, {'end': 1063.43, 'text': 'It slides everything to the left.', 'start': 1061.89, 'duration': 1.54}, {'end': 1066.571, 'text': "Yeah, and let's just try some others.", 'start': 1065.191, 'duration': 1.38}, {'end': 1076.175, 'text': 'And slide 4, 0, 2, 4.', 'start': 1066.611, 'duration': 9.564}, {'end': 1077.078, 'text': "Okay, so that's good.", 'start': 1076.178, 'duration': 0.9}], 'summary': 'The discussion involves array concatenation and sliding elements, with a successful outcome.', 'duration': 42.598, 'max_score': 1034.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf01034480.jpg'}, {'end': 1148.466, 'src': 'embed', 'start': 1119.386, 'weight': 1, 'content': [{'end': 1128.77, 'text': 'So after I do that, each time I play the game, like this is one move, so to speak, then I should add a number again.', 'start': 1119.386, 'duration': 9.384}, {'end': 1132.753, 'text': 'Add another two or four randomly.', 'start': 1130.891, 'duration': 1.862}, {'end': 1140.199, 'text': "Great, this appears to be doing what it's supposed to be doing.", 'start': 1137.537, 'duration': 2.662}, {'end': 1142.841, 'text': 'Be nice to have an animation, but there is no animation.', 'start': 1140.419, 'duration': 2.422}, {'end': 1144.623, 'text': "Now there's no more room left, that's fine.", 'start': 1142.861, 'duration': 1.762}, {'end': 1146.564, 'text': 'Okay, okay, all right.', 'start': 1144.963, 'duration': 1.601}, {'end': 1148.466, 'text': 'So now I need to combine.', 'start': 1146.804, 'duration': 1.662}], 'summary': 'Incrementally adding numbers in a game, no animation, need to combine.', 'duration': 29.08, 'max_score': 1119.386, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf01119386.jpg'}], 'start': 818.043, 'title': 'Developing 2048 game functions', 'summary': 'Focuses on creating a slide function for the 2048 game, developing array slide and combine functions, and testing for array manipulation and game logic, including identifying an error at line 20 of the sketch.js file.', 'chapters': [{'end': 957.084, 'start': 818.043, 'title': 'Creating a slide function for 2048 game', 'summary': 'Focuses on creating a slide function for the 2048 game, discussing the process of packing elements to the right in a row using array functions and filtering out zeros.', 'duration': 139.041, 'highlights': ['Discussing the process of packing elements to the right in a row using array functions The speaker explains the process of packing elements to the right in a row using array functions like filter to remove zeros and keep the non-zero elements in the same order.', 'Introducing the idea of creating a slide function for the 2048 game The speaker introduces the idea of creating a slide function for the 2048 game to handle the movement of elements in the game board.']}, {'end': 1383.715, 'start': 959.026, 'title': 'Array slide and combine functions', 'summary': 'Presents the development of array slide and combine functions, including testing for array manipulation and game logic, such as the addition of numbers and tile movement, resulting in an error at line 20 of the sketch.js file.', 'duration': 424.689, 'highlights': ['The chapter presents the development of array slide and combine functions The speaker discusses creating functions for sliding and combining arrays to manipulate game grids.', "Testing for array manipulation and game logic, such as the addition of numbers and tile movement The transcript details the speaker's process of testing array manipulation and game logic, including adding numbers and moving tiles.", 'Resulting in an error at line 20 of the sketch.js file The speaker encounters an error in the sketch.js file at line 20 due to a mistake in the code implementation.']}], 'duration': 565.672, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf0818043.jpg', 'highlights': ['Developing array slide and combine functions for game grids', 'Testing array manipulation and game logic, including number addition and tile movement', 'Introducing the idea of creating a slide function for the 2048 game', 'Discussing the process of packing elements to the right in a row using array functions']}, {'end': 2106.62, 'segs': [{'end': 1450.042, 'src': 'embed', 'start': 1409.075, 'weight': 1, 'content': [{'end': 1413.175, 'text': 'So if I say combine, 0, 4, 2, 2.', 'start': 1409.075, 'duration': 4.1}, {'end': 1417.258, 'text': "That's right.", 'start': 1413.176, 'duration': 4.082}, {'end': 1418.558, 'text': '0, 4, 2, 2.', 'start': 1417.278, 'duration': 1.28}, {'end': 1419.899, 'text': 'Those two get combined.', 'start': 1418.558, 'duration': 1.341}, {'end': 1421.42, 'text': 'Now I need to slide that.', 'start': 1419.959, 'duration': 1.461}, {'end': 1427.908, 'text': 'Slide 0, 4, 0, 4.', 'start': 1422.16, 'duration': 5.748}, {'end': 1429.509, 'text': 'And that slid the other way.', 'start': 1427.908, 'duration': 1.601}, {'end': 1434.172, 'text': "So I'm combining the opposite way that I'm sliding, which is definitely a problem.", 'start': 1429.909, 'duration': 4.263}, {'end': 1440.456, 'text': 'So maybe what I should do is just slide the other way around.', 'start': 1435.733, 'duration': 4.723}, {'end': 1445.399, 'text': 'Which would be.', 'start': 1444.278, 'duration': 1.121}, {'end': 1448.26, 'text': 'Let me think about this.', 'start': 1445.399, 'duration': 2.861}, {'end': 1450.042, 'text': 'I could just reverse it.', 'start': 1448.28, 'duration': 1.762}], 'summary': 'Combining and sliding numbers, encountering a problem, considering reversing the process', 'duration': 40.967, 'max_score': 1409.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf01409075.jpg'}, {'end': 1819.087, 'src': 'embed', 'start': 1763.684, 'weight': 2, 'content': [{'end': 1771.125, 'text': 'I have 0, 4, 2, 2.', 'start': 1763.684, 'duration': 7.441}, {'end': 1780.687, 'text': "If I do this and now try to combine again and then slide, these won't go together.", 'start': 1771.125, 'duration': 9.562}, {'end': 1797.551, 'text': 'And if I do this, then this should give me zero, four, zero, four, and then slide, they will go together.', 'start': 1782.588, 'duration': 14.963}, {'end': 1811.461, 'text': "So I think, I'm thinking this through, I think that I can actually get rid of the break and just call combine once and call slide again after.", 'start': 1797.871, 'duration': 13.59}, {'end': 1815.664, 'text': "That's correct.", 'start': 1814.984, 'duration': 0.68}, {'end': 1819.087, 'text': "That's correct.", 'start': 1818.306, 'duration': 0.781}], 'summary': "By combining zero, four, two, two, and sliding, they won't go together, but by combining zero, four, zero, four, and sliding, they will go together, suggesting that the break can be eliminated.", 'duration': 55.403, 'max_score': 1763.684, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf01763684.jpg'}, {'end': 2106.62, 'src': 'embed', 'start': 2079.214, 'weight': 0, 'content': [{'end': 2079.914, 'text': 'Got a new number.', 'start': 2079.214, 'duration': 0.7}, {'end': 2081.094, 'text': 'Got a new number.', 'start': 2080.434, 'duration': 0.66}, {'end': 2083.179, 'text': "Nothing's moving, got any number.", 'start': 2082.119, 'duration': 1.06}, {'end': 2083.719, 'text': 'All right.', 'start': 2083.34, 'duration': 0.379}, {'end': 2093.849, 'text': 'So ends part one of 2048, where I have the entire game mechanic, but only for going in one direction.', 'start': 2086.663, 'duration': 7.186}, {'end': 2095.831, 'text': 'One direction.', 'start': 2095.29, 'duration': 0.541}, {'end': 2102.697, 'text': "I'm going to take a short break and have a part two to the 2048 challenge, where I deal with the rotation of the matrix.", 'start': 2096.65, 'duration': 6.047}, {'end': 2105.439, 'text': 'And I hope you enjoy watching that part.', 'start': 2103.677, 'duration': 1.762}, {'end': 2106.62, 'text': 'And then the game will be finished.', 'start': 2105.499, 'duration': 1.121}], 'summary': 'In part one of the 2048 challenge, the entire game mechanic is covered for one direction. part two will focus on matrix rotation.', 'duration': 27.406, 'max_score': 2079.214, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf02079214.jpg'}], 'start': 1383.795, 'title': 'Array combination and 2048 game mechanics', 'summary': 'Discusses array combination and sliding logic resulting in a final array configuration of 0, 0, 4, 4, 2, 2, 2, 4, and outlines the process of debugging and refining the game mechanics for the 2048 game, focusing on identifying and resolving errors in the code.', 'chapters': [{'end': 1557.593, 'start': 1383.795, 'title': 'Array combination and sliding logic', 'summary': 'Discusses the process of combining and sliding elements in an array, resolving issues and confirming correctness through console operations, resulting in a final array configuration of 0, 0, 4, 4, 2, 2, 2, 4.', 'duration': 173.798, 'highlights': ['The process involves identifying and resolving issues with combining and sliding elements in an array, leading to the final array configuration of 0, 0, 4, 4, 2, 2, 2, 4.', 'Confirmation of correctness is achieved through console operations, ensuring the successful sliding and combination of array elements.', 'Discussion on the need for a separate function to handle the operations of sliding, combining, and returning the final array configuration.']}, {'end': 2106.62, 'start': 1558.353, 'title': '2048 game mechanics', 'summary': 'Outlines the process of debugging and refining the game mechanics for the 2048 game, focusing on identifying and resolving errors in the code, such as incorrect grid indices and the need for incorporating functions to check for changes in the game grid before adding new numbers.', 'duration': 548.267, 'highlights': ['The chapter discusses debugging and refining the game mechanics for the 2048 game, focusing on identifying and resolving errors in the code, such as incorrect grid indices and the need for incorporating functions to check for changes in the game grid before adding new numbers.', 'The transcript covers the process of testing different scenarios and potential outcomes within the game mechanics, including identifying correct and incorrect results based on the implemented code.', 'The speaker iterates on the process of troubleshooting and modifying the code to ensure the correct behavior of the game, including the consideration of different strategies to achieve the desired outcomes, such as combining and sliding operations.', 'The chapter concludes with a plan for a part two of the 2048 challenge, which will involve dealing with the rotation of the matrix to complete the game.']}], 'duration': 722.825, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JSn-DJU8qf0/pics/JSn-DJU8qf01383795.jpg', 'highlights': ['The chapter concludes with a plan for a part two of the 2048 challenge, which will involve dealing with the rotation of the matrix to complete the game.', 'The process involves identifying and resolving issues with combining and sliding elements in an array, leading to the final array configuration of 0, 0, 4, 4, 2, 2, 2, 4.', 'The speaker iterates on the process of troubleshooting and modifying the code to ensure the correct behavior of the game, including the consideration of different strategies to achieve the desired outcomes, such as combining and sliding operations.', 'The chapter discusses debugging and refining the game mechanics for the 2048 game, focusing on identifying and resolving errors in the code, such as incorrect grid indices and the need for incorporating functions to check for changes in the game grid before adding new numbers.']}], 'highlights': ['The chapter discusses debugging and refining the game mechanics for the 2048 game, focusing on identifying and resolving errors in the code, such as incorrect grid indices and the need for incorporating functions to check for changes in the game grid before adding new numbers.', 'The process involves identifying and resolving issues with combining and sliding elements in an array, leading to the final array configuration of 0, 0, 4, 4, 2, 2, 2, 4.', 'The chapter concludes with a plan for a part two of the 2048 challenge, which will involve dealing with the rotation of the matrix to complete the game.', 'Developing array slide and combine functions for game grids', 'Testing array manipulation and game logic, including number addition and tile movement', 'Introducing the idea of creating a slide function for the 2048 game', 'The process of visualizing console data in a canvas using nested loops and drawing functions in p5 is explained, encountering and solving errors in positioning and rendering the grid and text.', 'The speaker demonstrates the console.table function in JavaScript, which provides a convenient way to display arrays in the browser console.', 'The chapter showcases the usage of the ternary operator in JavaScript to simplify code and improve readability.', 'The author utilizes a ternary operator to randomly select between adding a two or a four to a specific spot on the grid, providing a dynamic addition process.', 'The process involves identifying and creating a list of available spots on the grid to add random numbers.', 'The author hardcodes the 2048 game grid as four arrays of zeros, which provides the initial board structure.', 'The core idea of the 2048 game is a four by four grid with numbers combining when moved in a certain direction.', 'The coding challenge is currently in four parts, with potential addition of a fifth part for animation software, and viewers are encouraged to provide feedback and submit their own versions at thecodingtrain.com.', "The game '2048' is a sliding block puzzle created by Gabrielle Cerulli, now open source.", 'The speaker attempted to make their own version, emphasizing the need for object-oriented programming and the challenges faced.']}