title
Coding Challenge #115: Snake Game Redux
description
Snake Game!? Again!? Now with the p5.js Web Editor! Code: https://thecodingtrain.com/challenges/115-snake-game-redux
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/HkDVpSvDm
đĨ Previous video: https://youtu.be/67k3I2GxTH8?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Next video: https://youtu.be/--6eyLO78CY?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
đ p5.js: https://p5js.org/
đī¸ The p5.js Web Editor: https://editor.p5js.org/
đ Hello p5.js Web Editor!: https://medium.com/processing-foundation/hello-p5-js-web-editor-b90b902b74cf
Videos:
đ OOP with ES6: https://youtu.be/xG2Vbnv0wvg
đĨ Livestream Archive: https://youtu.be/wTDDsOZwdQY
Related Coding Challenges:
đ #3 The Snake Game: https://youtu.be/AaGK-fj-BAM
đ #173 AppleSoft Basic Snake Game: https://youtu.be/7r83N3c2kPw
Timestamps:
0:00 Introducing the p5.js Web Editor!
1:18 What is the snake game?
2:01 Creating the Snake class
7:55 Adding the keyboard controls
10:56 Scaling the snake by a variable resolution
12:50 Adding the food
16:03 Eating the food!
18:30 Making the snake grow on eating food
27:48 Adding conditions for the game over state
32:50 Playing the game and things you could do!
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 #snake #games #vectors #arrays #objectorientedprogramming #p5js #javascript
detail
{'title': 'Coding Challenge #115: Snake Game Redux', 'heatmap': [{'end': 1854.265, 'start': 1831.175, 'weight': 1}], 'summary': 'In this video, the host presents a coding challenge to create a snake game using p5.js within 20 minutes, covering object-oriented programming, snake movement and controls, food creation, array manipulation, code refactoring, and game development, while showcasing debugging and audience participation in the p5 web editor.', 'chapters': [{'end': 79.602, 'segs': [{'end': 48.205, 'src': 'embed', 'start': 1.442, 'weight': 0, 'content': [{'end': 2.583, 'text': 'Happy back to school.', 'start': 1.442, 'duration': 1.141}, {'end': 4.565, 'text': 'It is August 31.', 'start': 3.284, 'duration': 1.281}, {'end': 6.146, 'text': 'School for me starts next week.', 'start': 4.565, 'duration': 1.581}, {'end': 11.471, 'text': "On the coding train, I'm going to attempt to do a classic again.", 'start': 7.067, 'duration': 4.404}, {'end': 16.296, 'text': "I'm going to attempt to do a coding challenge and make the snake game.", 'start': 11.492, 'duration': 4.804}, {'end': 19.139, 'text': 'And yes, I have done this before.', 'start': 16.315, 'duration': 2.824}, {'end': 25.325, 'text': "But I'm going to do this in order to celebrate something that was announced today, the p5.js web editor.", 'start': 19.199, 'duration': 6.126}, {'end': 32.67, 'text': "So the p5 web just official web editor is out And I'm going to try.", 'start': 27.564, 'duration': 5.106}, {'end': 39.257, 'text': 'the nice thing about this is when I code this at the end of it Stop the sound effects.', 'start': 32.67, 'duration': 6.587}, {'end': 46.564, 'text': "at the end of this, you'll be able to just go directly to this URL, which I'll include in the video description and Hit Duplicate.", 'start': 39.257, 'duration': 7.307}, {'end': 48.205, 'text': "You'll have to make an account for the web editor.", 'start': 46.584, 'duration': 1.621}], 'summary': 'Creating the snake game to celebrate the launch of p5.js web editor.', 'duration': 46.763, 'max_score': 1.442, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA1442.jpg'}, {'end': 89.366, 'src': 'embed', 'start': 63.699, 'weight': 1, 'content': [{'end': 68.782, 'text': "very soon, so I'm giving myself about 20 minutes, which of course, this is gonna take longer than that, but let's see how it goes.", 'start': 63.699, 'duration': 5.083}, {'end': 71.723, 'text': 'All right, so however long this video is, is however long it takes.', 'start': 68.802, 'duration': 2.921}, {'end': 72.824, 'text': "Hopefully there'll be no edits.", 'start': 71.763, 'duration': 1.061}, {'end': 76.625, 'text': 'Every once in a while, it just has to be an edit, because the whole system crashes.', 'start': 73.324, 'duration': 3.301}, {'end': 77.646, 'text': 'I better get coding.', 'start': 76.945, 'duration': 0.701}, {'end': 79.602, 'text': 'Snake game.', 'start': 79.002, 'duration': 0.6}, {'end': 85.525, 'text': 'Have you ever played the snake game? The idea of the snake game is there is a canvas.', 'start': 79.722, 'duration': 5.803}, {'end': 89.366, 'text': 'You are a dot, like a little square on that canvas.', 'start': 86.345, 'duration': 3.021}], 'summary': 'The speaker plans to code a snake game in 20 minutes, hoping for no edits, but expects occasional crashes.', 'duration': 25.667, 'max_score': 63.699, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA63699.jpg'}], 'start': 1.442, 'title': 'Creating snake game with p5.js', 'summary': 'Presents a coding challenge to create the snake game using the p5.js web editor, with the aim to complete the task within 20 minutes, enabling viewers to duplicate and modify the code.', 'chapters': [{'end': 79.602, 'start': 1.442, 'title': 'Coding challenge: snake game with p5.js', 'summary': 'Features a coding challenge to create the snake game using the p5.js web editor, allowing viewers to duplicate and modify the code, while the creator aims to complete the task within 20 minutes.', 'duration': 78.16, 'highlights': ['The p5.js web editor was officially launched, allowing viewers to duplicate and modify the snake game code, and share their versions with the creator.', 'The challenge involves creating the snake game within a time limit of approximately 20 minutes.', 'The creator aims to celebrate the launch of the p5.js web editor by attempting to code the classic snake game.']}], 'duration': 78.16, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA1442.jpg', 'highlights': ['The p5.js web editor was officially launched, allowing viewers to duplicate and modify the snake game code, and share their versions with the creator.', 'The challenge involves creating the snake game within a time limit of approximately 20 minutes.', 'The creator aims to celebrate the launch of the p5.js web editor by attempting to code the classic snake game.']}, {'end': 480.387, 'segs': [{'end': 124.121, 'src': 'embed', 'start': 98.11, 'weight': 3, 'content': [{'end': 104.953, 'text': 'Once you grab that piece of food, a new piece of food appears somewhere else and you get a little more on your tail,', 'start': 98.11, 'duration': 6.843}, {'end': 109.315, 'text': 'you get another piece of your body and you get the next piece of food and it gets longer and it gets longer.', 'start': 104.953, 'duration': 4.362}, {'end': 112.996, 'text': 'And any time you hit the edge, if you run into one of the edges, you die.', 'start': 109.395, 'duration': 3.601}, {'end': 113.616, 'text': "The game's over.", 'start': 113.036, 'duration': 0.58}, {'end': 117.898, 'text': 'Or if you hit another part of your body, and it becomes much harder as your body gets longer and longer.', 'start': 113.836, 'duration': 4.062}, {'end': 119.399, 'text': "That's the snake game.", 'start': 118.338, 'duration': 1.061}, {'end': 120.619, 'text': "That's what I'm going to code.", 'start': 119.779, 'duration': 0.84}, {'end': 124.121, 'text': "So in order to do this, I'm going to use object-oriented programming.", 'start': 121.079, 'duration': 3.042}], 'summary': 'Transcript covers the concept of a snake game and coding it using object-oriented programming.', 'duration': 26.011, 'max_score': 98.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA98110.jpg'}, {'end': 196.327, 'src': 'embed', 'start': 170.946, 'weight': 0, 'content': [{'end': 175.889, 'text': "the idea is that this is a template for this snake object that I'm going to make in my code and has a constructor function.", 'start': 170.946, 'duration': 4.943}, {'end': 180.371, 'text': 'I will refer you to my tutorials about object-oriented programming with ES6 classes.', 'start': 176.209, 'duration': 4.162}, {'end': 195.426, 'text': 'But I need to actually go into index.html so that the page, when I run the code, is actually using both sketch.js and snake.js.', 'start': 182.412, 'duration': 13.014}, {'end': 196.327, 'text': "So that's there.", 'start': 195.666, 'duration': 0.661}], 'summary': 'Creating a template for a snake object with a constructor function, referring to es6 classes tutorials, and ensuring code usage in index.html.', 'duration': 25.381, 'max_score': 170.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA170946.jpg'}, {'end': 294.48, 'src': 'embed', 'start': 265, 'weight': 1, 'content': [{'end': 268.806, 'text': "OK What do I need? So I'm going to do something a little weird.", 'start': 265, 'duration': 3.806}, {'end': 278.051, 'text': "I know that what I need is an array because, even though the snake's position you could think of as like a single xy location,", 'start': 269.006, 'duration': 9.045}, {'end': 281.213, 'text': 'I botched this the last time I did this.', 'start': 278.051, 'duration': 3.162}, {'end': 285.895, 'text': 'really what I want is an array, because I want to keep track of a list of all of its locations.', 'start': 281.213, 'duration': 4.682}, {'end': 290.117, 'text': 'And maybe the first element, and probably more easily the last element of the array,', 'start': 286.055, 'duration': 4.062}, {'end': 294.48, 'text': "when there's only one thing is it's the sort of head of the snake, the front part of the snake.", 'start': 290.117, 'duration': 4.363}], 'summary': "Creating an array to track the snake's locations for better control and manipulation.", 'duration': 29.48, 'max_score': 265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA265000.jpg'}, {'end': 483.288, 'src': 'embed', 'start': 455.052, 'weight': 2, 'content': [{'end': 459.155, 'text': 'The snake game, by definition, I can only move horizontally or vertically.', 'start': 455.052, 'duration': 4.103}, {'end': 461.936, 'text': "So I'm going to start these at 0.", 'start': 459.615, 'duration': 2.321}, {'end': 467.04, 'text': "And then I'm also, just right now, I'm going to change this to 1.", 'start': 461.936, 'duration': 5.104}, {'end': 469.721, 'text': "I'm going to do this in a funny way that I think might work well.", 'start': 467.04, 'duration': 2.681}, {'end': 473.843, 'text': "It's a tiny little dot, a one pixel dot, that rectangle.", 'start': 469.981, 'duration': 3.862}, {'end': 480.387, 'text': "I am going to now in sketch, I'm going to have the keyboard be the controls.", 'start': 475.444, 'duration': 4.943}, {'end': 483.288, 'text': "So I'm going to say key pressed.", 'start': 481.967, 'duration': 1.321}], 'summary': 'Creating a snake game with keyboard controls at 1 pixel size.', 'duration': 28.236, 'max_score': 455.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA455052.jpg'}], 'start': 79.722, 'title': 'Coding a snake game', 'summary': 'Introduces the concept of the snake game and discusses coding it using object-oriented programming in p5.js. it covers creating a snake class, utilizing arrays for location tracking, and implementing movement controls using keyboard input.', 'chapters': [{'end': 113.616, 'start': 79.722, 'title': 'Snake game overview', 'summary': 'Introduces the concept of the snake game, where a dot on a canvas collects food items to grow its tail, while avoiding hitting the edges and dying.', 'duration': 33.894, 'highlights': ['Players control a dot on a canvas to collect food items and grow their tail, while avoiding hitting the edges and dying.', "The game's objective is to continuously collect food items to increase the length of the snake while avoiding collision with the edges.", "The snake game mechanics involve the appearance of new food items after the previous one is collected, leading to the snake's tail getting longer with each food item collected."]}, {'end': 480.387, 'start': 113.836, 'title': 'Coding snake game with object-oriented programming', 'summary': "Discusses coding a snake game using object-oriented programming in p5.js, creating a snake class, utilizing arrays to keep track of the snake's locations, and implementing movement controls for the snake using keyboard input.", 'duration': 366.551, 'highlights': ['Coding a snake game using object-oriented programming in p5.js The chapter focuses on coding a snake game using object-oriented programming in p5.js, leveraging the concept of classes and ES6 features for the implementation.', "Creating a snake class and utilizing arrays to keep track of the snake's locations The author discusses the creation of a snake class and the use of arrays to keep track of the snake's locations, highlighting the importance of maintaining a list of the snake's positions for movement and display purposes.", 'Implementing movement controls for the snake using keyboard input The chapter explains the implementation of movement controls for the snake using keyboard input, demonstrating the process of using keyboard input to control the direction and movement of the snake within the game.']}], 'duration': 400.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA79722.jpg', 'highlights': ['The chapter focuses on coding a snake game using object-oriented programming in p5.js, leveraging the concept of classes and ES6 features for the implementation.', "Creating a snake class and utilizing arrays to keep track of the snake's locations, highlighting the importance of maintaining a list of the snake's positions for movement and display purposes.", 'Implementing movement controls for the snake using keyboard input, demonstrating the process of using keyboard input to control the direction and movement of the snake within the game.', "The game's objective is to continuously collect food items to increase the length of the snake while avoiding collision with the edges.", 'Players control a dot on a canvas to collect food items and grow their tail, while avoiding hitting the edges and dying.', "The snake game mechanics involve the appearance of new food items after the previous one is collected, leading to the snake's tail getting longer with each food item collected."]}, {'end': 763.71, 'segs': [{'end': 513.443, 'src': 'embed', 'start': 481.967, 'weight': 0, 'content': [{'end': 483.288, 'text': "So I'm going to say key pressed.", 'start': 481.967, 'duration': 1.321}, {'end': 485.99, 'text': 'Oh, I forgot how to do this already.', 'start': 484.169, 'duration': 1.821}, {'end': 501.892, 'text': 'So like if key equals up, What is it in p5? Basically, key pressed is an event that whenever I press a key, this function happens.', 'start': 487.17, 'duration': 14.722}, {'end': 504.094, 'text': 'Then I can check what key did I press.', 'start': 502.193, 'duration': 1.901}, {'end': 507.217, 'text': 'But I totally can never remember how to write this function.', 'start': 504.274, 'duration': 2.943}, {'end': 509.479, 'text': "So let's try to look at the p5 reference.", 'start': 507.638, 'duration': 1.841}, {'end': 513.443, 'text': "Somebody maybe in the chat will tell me, let's look at key pressed.", 'start': 511.001, 'duration': 2.442}], 'summary': 'Using key pressed event to check which key is pressed in p5 reference.', 'duration': 31.476, 'max_score': 481.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA481967.jpg'}, {'end': 606.413, 'src': 'embed', 'start': 565.454, 'weight': 2, 'content': [{'end': 574.12, 'text': "Okay, so now what I want to do is if it's the left arrow, then snake.setDirection, this is the way I did it before, I remember.", 'start': 565.454, 'duration': 8.666}, {'end': 580.285, 'text': 'Left is negative one along the x and zero along the y.', 'start': 574.581, 'duration': 5.704}, {'end': 583.127, 'text': "So I'm going to write a function that's like saying set the direction.", 'start': 580.285, 'duration': 2.842}, {'end': 585.329, 'text': 'So this is for left.', 'start': 584.148, 'duration': 1.181}, {'end': 587.81, 'text': 'This is for right.', 'start': 586.349, 'duration': 1.461}, {'end': 592.274, 'text': 'This is for.', 'start': 591.073, 'duration': 1.201}, {'end': 604.533, 'text': "I'm remaking this video, why? This is for up, negative one.", 'start': 595.71, 'duration': 8.823}, {'end': 606.413, 'text': 'Okay, tidy code.', 'start': 604.753, 'duration': 1.66}], 'summary': 'Creating a function to set snake direction for left, right, and up.', 'duration': 40.959, 'max_score': 565.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA565454.jpg'}, {'end': 719.569, 'src': 'embed', 'start': 691.82, 'weight': 1, 'content': [{'end': 699.343, 'text': 'So I was going to use math, and I was going to always multiply its x location by that resolution, and use the resolution for the width.', 'start': 691.82, 'duration': 7.523}, {'end': 703.705, 'text': 'But the truth of the matter is, p5 has a scale function.', 'start': 699.883, 'duration': 3.822}, {'end': 709.906, 'text': "So I'm going to say let resolution equal 10.", 'start': 705.424, 'duration': 4.482}, {'end': 713.727, 'text': 'And then in the draw function, I can just say scale by resolution.', 'start': 709.906, 'duration': 3.821}, {'end': 717.228, 'text': "And what that's going to do, and notice, see, look at that.", 'start': 714.407, 'duration': 2.821}, {'end': 719.569, 'text': 'I can change this to 50.', 'start': 717.328, 'duration': 2.241}], 'summary': "Using p5's scale function to adjust resolution, setting resolution to 10, and scaling by resolution in the draw function.", 'duration': 27.749, 'max_score': 691.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA691820.jpg'}], 'start': 481.967, 'title': 'Snake movement and controls', 'summary': 'Covers handling key press events in p5.js, creating a function for snake movement based on key input, and controlling movement and speed using canvas scaling and frame rate adjustments.', 'chapters': [{'end': 565.114, 'start': 481.967, 'title': 'Handling key press events', 'summary': "Discusses using the 'key pressed' event in p5.js, demonstrating how to check for specific key presses such as the left and right arrow keys, and considering the use of a switch statement for improved functionality.", 'duration': 83.147, 'highlights': ["The 'key pressed' event in p5.js allows for the execution of a function when a key is pressed, with specific key checks available such as 'key code equals left arrow' and 'key code equals right arrow'.", 'The speaker considers using a switch statement for handling key presses, highlighting the potential for improved code organization and functionality.', "The speaker expresses difficulty recalling the exact syntax for the 'key pressed' function in p5.js, demonstrating a need for further reference and practice."]}, {'end': 653.925, 'start': 565.454, 'title': 'Snake movement function', 'summary': "Discusses creating a function to set the direction of a snake's movement based on key input, using a switch statement to improve code readability and efficiency, resulting in successful movement of the snake in all directions.", 'duration': 88.471, 'highlights': ["The speaker discusses creating a function to set the direction of the snake's movement based on key input, using specific values for left, right, up, and down directions.", 'The speaker emphasizes the use of a switch statement to improve the code and efficiently handle different key inputs for snake movement.', 'The speaker successfully demonstrates the working movement of the snake in all directions by pressing the keys, ensuring the effectiveness of the implemented function.']}, {'end': 763.71, 'start': 653.985, 'title': 'Snake movement and canvas scaling', 'summary': "Discusses using a scale function to control the movement of a snake in a canvas, demonstrating how to scale the snake's movement and control the speed of the animation by adjusting the frame rate.", 'duration': 109.725, 'highlights': ["The chapter demonstrates how to use a scale function in p5 to control the movement of a snake, scaling it by a factor of 10, 50, or 100, allowing for precise control over the snake's movement, and the ability to adjust the scale dynamically (e.g., changing from 10 to 50).", "The use of the scale function allows for the precise and dynamic control of the snake's movement, enabling it to move every 10 pixels with a resolution of 10, and demonstrating the ability to adjust the speed of the animation by changing the frame rate to five."]}], 'duration': 281.743, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA481967.jpg', 'highlights': ["The 'key pressed' event in p5.js allows for the execution of a function when a key is pressed, with specific key checks available such as 'key code equals left arrow' and 'key code equals right arrow'.", "The chapter demonstrates how to use a scale function in p5 to control the movement of a snake, scaling it by a factor of 10, 50, or 100, allowing for precise control over the snake's movement, and the ability to adjust the scale dynamically (e.g., changing from 10 to 50).", "The speaker discusses creating a function to set the direction of the snake's movement based on key input, using specific values for left, right, up, and down directions."]}, {'end': 1111.38, 'segs': [{'end': 833.589, 'src': 'embed', 'start': 796.045, 'weight': 0, 'content': [{'end': 796.845, 'text': 'So I need a variable.', 'start': 796.045, 'duration': 0.8}, {'end': 807.495, 'text': 'to keep track of the actual dimensions of the world.', 'start': 804.673, 'duration': 2.822}, {'end': 810.917, 'text': "So I'm going to say, I'm going to use w.", 'start': 807.815, 'duration': 3.102}, {'end': 811.697, 'text': "I don't know.", 'start': 810.917, 'duration': 0.78}, {'end': 813.478, 'text': "I'm just trying to think of columns.", 'start': 811.737, 'duration': 1.741}, {'end': 816.6, 'text': "I'm going to say w equal.", 'start': 813.538, 'duration': 3.062}, {'end': 819.082, 'text': "I'm going to actually just put let w and let h here.", 'start': 816.88, 'duration': 2.202}, {'end': 825.566, 'text': "So I'm going to say w equals floor width divided by resolution.", 'start': 819.882, 'duration': 5.684}, {'end': 833.589, 'text': 'So what is this? Width divided by resolution is 400 divided by 10, which is 40.', 'start': 826.726, 'duration': 6.863}], 'summary': 'Using w to track world dimensions, w = floor(width / resolution), w = 400 / 10 = 40', 'duration': 37.544, 'max_score': 796.045, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA796045.jpg'}, {'end': 893.835, 'src': 'embed', 'start': 858.546, 'weight': 1, 'content': [{'end': 863.11, 'text': 'because now I want to get an x position and guess what?', 'start': 858.546, 'duration': 4.564}, {'end': 865.132, 'text': 'I remember this from before.', 'start': 863.631, 'duration': 1.501}, {'end': 868.755, 'text': "I'm going to write a function, foodLocation, foodLocation.", 'start': 865.192, 'duration': 3.563}, {'end': 881.909, 'text': 'And what happens in this function is I pick an x, which is floor, random w and a y Floor.', 'start': 871.906, 'duration': 10.003}, {'end': 884.39, 'text': 'so I need a spot random h, right?', 'start': 881.909, 'duration': 2.481}, {'end': 888.572, 'text': 'I need to find a random spot for the food and set that there.', 'start': 884.45, 'duration': 4.122}, {'end': 893.835, 'text': "And then in draw, I'm going to make the food a red.", 'start': 889.513, 'duration': 4.322}], 'summary': 'Creating a function to randomly place food at an x and y position in a program.', 'duration': 35.289, 'max_score': 858.546, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA858546.jpg'}, {'end': 967.925, 'src': 'embed', 'start': 926.935, 'weight': 2, 'content': [{'end': 929.037, 'text': 'That stroke is getting scaled in a strange way.', 'start': 926.935, 'duration': 2.102}, {'end': 930.858, 'text': 'So this is actually 10 by 10 pixels.', 'start': 929.257, 'duration': 1.601}, {'end': 937.643, 'text': "It was much bigger because with a stroke there, that's getting scaled as well.", 'start': 931.078, 'duration': 6.565}, {'end': 940.005, 'text': 'So now we can see, whoops.', 'start': 938.404, 'duration': 1.601}, {'end': 943.173, 'text': 'If I click over here, we can see.', 'start': 941.391, 'duration': 1.782}, {'end': 946.016, 'text': 'And eventually, come on, get that piece of food.', 'start': 943.273, 'duration': 2.743}, {'end': 946.957, 'text': 'OK, so now, good.', 'start': 946.036, 'duration': 0.921}, {'end': 947.658, 'text': 'So this is working.', 'start': 947.017, 'duration': 0.641}, {'end': 948.899, 'text': 'Ah, the steak game is working.', 'start': 947.798, 'duration': 1.101}, {'end': 949.64, 'text': 'Oh, this is good.', 'start': 949.119, 'duration': 0.521}, {'end': 951.101, 'text': 'This is much better than I did before.', 'start': 949.68, 'duration': 1.421}, {'end': 954.945, 'text': 'Helps to do this a second time, even though that was a couple of years ago.', 'start': 952.042, 'duration': 2.903}, {'end': 958.149, 'text': "Let's make this 20, just because I want to be able to see it better.", 'start': 955.065, 'duration': 3.084}, {'end': 960.171, 'text': "OK, so that's good.", 'start': 958.169, 'duration': 2.002}, {'end': 962.033, 'text': 'Let me just make sure things are lining up.', 'start': 960.191, 'duration': 1.842}, {'end': 963.975, 'text': 'Excellent So now I need a test.', 'start': 962.153, 'duration': 1.822}, {'end': 967.925, 'text': "I'm going to say snake.eat food.", 'start': 965.623, 'duration': 2.302}], 'summary': 'Improving game: 10x10 pixels, scaled stroke, better visuals, testing snake.eat food.', 'duration': 40.99, 'max_score': 926.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA926935.jpg'}, {'end': 1056.141, 'src': 'embed', 'start': 989.123, 'weight': 3, 'content': [{'end': 998.847, 'text': "if now this is really probably a bad idea, because you never know in JavaScript if you've really got the number like three or if, by accident,", 'start': 989.123, 'duration': 9.724}, {'end': 1003.209, 'text': 'you have the number three, point, zero, zero, zero, zero, zero, zero, one.', 'start': 998.847, 'duration': 4.362}, {'end': 1010.332, 'text': "But I'm going to test in theory if the xy of the head of the snake is the same as the xy of the piece of food.", 'start': 1003.209, 'duration': 7.123}, {'end': 1012.733, 'text': "if they're equal, I should be eating the food.", 'start': 1010.332, 'duration': 2.401}, {'end': 1015.677, 'text': "so let's, Let's just see if that works.", 'start': 1012.733, 'duration': 2.944}, {'end': 1025.521, 'text': "So I'm going to say if, for the first, let x equal, let's just put this in a separate variable.", 'start': 1016.778, 'duration': 8.743}, {'end': 1032.803, 'text': "Let y equal this dot, I'm going to get that head of the snake location.", 'start': 1028.942, 'duration': 3.861}, {'end': 1051.9, 'text': 'if x equals pos.x and y equals pos.y, then return true and also say console, console.', 'start': 1035.086, 'duration': 16.814}, {'end': 1052.761, 'text': "I'm going to say print.", 'start': 1051.9, 'duration': 0.861}, {'end': 1056.141, 'text': "I'm going to say console.log print Food eaten.", 'start': 1052.761, 'duration': 3.38}], 'summary': 'Testing if snake head matches food position for food consumption.', 'duration': 67.018, 'max_score': 989.123, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA989123.jpg'}], 'start': 765.391, 'title': 'Creating food and game code improvement', 'summary': 'Discusses setting the dimensions of the world, creating a function to set a random location for the food, and improving the snake game code, resulting in successful implementation and testing for food consumption and number discrepancies.', 'chapters': [{'end': 949.64, 'start': 765.391, 'title': 'Creating food and setting its location', 'summary': 'Discusses setting the dimensions of the world, creating a function to set a random location for the food, and displaying the food as a red rectangle in a scaled-up environment, ensuring it works as expected.', 'duration': 184.249, 'highlights': ['Setting the dimensions of the world The code sets the dimensions of the world by dividing the width and height by a resolution of 10, resulting in a 40 by 40 world.', 'Creating a function to set a random location for the food A function called foodLocation is created to pick random x and y positions within the world dimensions for the food, ensuring its random placement.', 'Displaying the food as a red rectangle in a scaled-up environment The food is displayed as a red rectangle in the scaled-up environment, ensuring it appears as intended within the game.']}, {'end': 1111.38, 'start': 949.68, 'title': 'Snake game code improvement', 'summary': 'Details the process of improving a snake game code, including testing for food consumption and handling potential number discrepancies, resulting in a successful implementation.', 'duration': 161.7, 'highlights': ["The code is improved to test for food consumption, where the head of the snake's location is compared with the food location, and if they are equal, the food is eaten, triggering a new food location to be generated.", 'The process involves addressing potential number discrepancies in JavaScript, ensuring the accuracy of comparisons and operations within the code.', 'The chapter discusses the iterative process of refining the code and the satisfaction with the achieved results, indicating successful code improvement.']}], 'duration': 345.989, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA765391.jpg', 'highlights': ['The code sets the dimensions of the world by dividing the width and height by a resolution of 10, resulting in a 40 by 40 world.', 'A function called foodLocation is created to pick random x and y positions within the world dimensions for the food, ensuring its random placement.', 'The food is displayed as a red rectangle in the scaled-up environment, ensuring it appears as intended within the game.', "The code is improved to test for food consumption, where the head of the snake's location is compared with the food location, and if they are equal, the food is eaten, triggering a new food location to be generated.", 'The process involves addressing potential number discrepancies in JavaScript, ensuring the accuracy of comparisons and operations within the code.', 'The chapter discusses the iterative process of refining the code and the satisfaction with the achieved results, indicating successful code improvement.']}, {'end': 1580.582, 'segs': [{'end': 1202.079, 'src': 'embed', 'start': 1114.258, 'weight': 1, 'content': [{'end': 1117.279, 'text': 'If I eat the food, I want the snake to grow.', 'start': 1114.258, 'duration': 3.021}, {'end': 1125.043, 'text': "If I'm calling a function that I intend to be part of the snake object within the snake class, I need to reference it by saying this.grow.", 'start': 1117.48, 'duration': 7.563}, {'end': 1127.924, 'text': 'And so that means I need to write another function grow.', 'start': 1125.383, 'duration': 2.541}, {'end': 1133.207, 'text': 'And what that means is I want to expand the array.', 'start': 1130.546, 'duration': 2.661}, {'end': 1137.266, 'text': 'Okay, okay, well this is the tricky part.', 'start': 1135.262, 'duration': 2.004}, {'end': 1139.39, 'text': 'This is where everything went wrong before.', 'start': 1137.827, 'duration': 1.563}, {'end': 1141.454, 'text': "I'm not even looking at the chat.", 'start': 1139.41, 'duration': 2.044}, {'end': 1142.255, 'text': "There's a chat going on.", 'start': 1141.474, 'duration': 0.781}, {'end': 1143.497, 'text': "I'm sure everyone's screaming at me.", 'start': 1142.275, 'duration': 1.222}, {'end': 1147.926, 'text': "I'm going to add another variable.", 'start': 1143.517, 'duration': 4.409}, {'end': 1155.047, 'text': 'this.len for length, length of the snake, and it starts as one.', 'start': 1149.966, 'duration': 5.081}, {'end': 1161.188, 'text': 'So at a minimum, I know when I want to grow, I want length to go up by one.', 'start': 1155.407, 'duration': 5.781}, {'end': 1166.089, 'text': 'So I want the length to increase, and I need to add something onto the array.', 'start': 1161.548, 'duration': 4.541}, {'end': 1169.91, 'text': 'Add something to the end, add something to the beginning.', 'start': 1166.769, 'duration': 3.141}, {'end': 1171.79, 'text': 'This is unclear to me.', 'start': 1170.47, 'duration': 1.32}, {'end': 1183.597, 'text': "So, first of all, let's try, so let's just try saying this dot, body dot.", 'start': 1172.85, 'duration': 10.747}, {'end': 1188.902, 'text': 'Okay, so first let me get the last.', 'start': 1183.597, 'duration': 5.305}, {'end': 1190.895, 'text': "I'm thinking about this, You know what?", 'start': 1188.902, 'duration': 1.993}, {'end': 1193.956, 'text': 'I think, actually this is simpler than I think.', 'start': 1191.655, 'duration': 2.301}, {'end': 1198.678, 'text': "Let's just try saying this.body.push createVector.", 'start': 1194.316, 'duration': 4.362}, {'end': 1202.079, 'text': "So I'm just going to push a blank vector into it.", 'start': 1199.919, 'duration': 2.16}], 'summary': "Function 'grow' in snake class needs to expand the array to increase length.", 'duration': 87.821, 'max_score': 1114.258, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA1114258.jpg'}, {'end': 1265.666, 'src': 'embed', 'start': 1228.367, 'weight': 0, 'content': [{'end': 1230.507, 'text': "But, okay, we're going to figure this out.", 'start': 1228.367, 'duration': 2.14}, {'end': 1231.508, 'text': "I'm like trying to think it through.", 'start': 1230.527, 'duration': 0.981}, {'end': 1233.408, 'text': "Sometimes it's easier than thinking through, just code it.", 'start': 1231.528, 'duration': 1.88}, {'end': 1235.829, 'text': 'So what I want to do now?', 'start': 1233.829, 'duration': 2}, {'end': 1236.55, 'text': 'this whole thing.', 'start': 1235.829, 'duration': 0.721}, {'end': 1244.273, 'text': "so, first of all, what this means is any time I want to draw the snake, I don't actually want to draw.", 'start': 1236.55, 'duration': 7.723}, {'end': 1250.453, 'text': "I don't want to draw Just a single rectangle.", 'start': 1244.273, 'duration': 6.18}, {'end': 1252.015, 'text': 'I want to draw all the rectangles.', 'start': 1250.513, 'duration': 1.502}, {'end': 1255.998, 'text': "So I'm going to say and I could use like a for of loop or something.", 'start': 1252.015, 'duration': 3.983}, {'end': 1265.666, 'text': "But I'm just going to say I'm just going to use a regular old-fashioned, this dot for loop, this dot body dot length I, Plus, plus,", 'start': 1255.998, 'duration': 9.668}], 'summary': 'Planning to draw multiple rectangles using a for loop.', 'duration': 37.299, 'max_score': 1228.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA1228367.jpg'}, {'end': 1500.76, 'src': 'embed', 'start': 1471.318, 'weight': 2, 'content': [{'end': 1472.559, 'text': 'This is exactly what I need.', 'start': 1471.318, 'duration': 1.241}, {'end': 1473.36, 'text': 'Oh, I love it.', 'start': 1472.779, 'duration': 0.581}, {'end': 1479.705, 'text': 'So actually, all I need to do every time in update is say this.body.shift.', 'start': 1473.72, 'duration': 5.985}, {'end': 1483.389, 'text': "And then that's moving everything over.", 'start': 1481.407, 'duration': 1.982}, {'end': 1488.793, 'text': 'And then the last spot, so one thing I need to do is let me save where it currently is.', 'start': 1483.729, 'duration': 5.064}, {'end': 1491.952, 'text': 'So let me pop.', 'start': 1489.85, 'duration': 2.102}, {'end': 1493.814, 'text': "pop doesn't remove it from the array right?", 'start': 1491.952, 'duration': 1.862}, {'end': 1499.859, 'text': 'So if I say array.pop, that gave me the element five, but the array still.', 'start': 1494.234, 'duration': 5.625}, {'end': 1500.76, 'text': 'oh no, that got rid of it.', 'start': 1499.859, 'duration': 0.901}], 'summary': 'Updating the array by shifting and popping elements.', 'duration': 29.442, 'max_score': 1471.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA1471318.jpg'}, {'end': 1584.579, 'src': 'embed', 'start': 1556.346, 'weight': 5, 'content': [{'end': 1558.327, 'text': "So that's the last element, copying it.", 'start': 1556.346, 'duration': 1.981}, {'end': 1567.893, 'text': "So one thing that I want to do, what's wrong here? This dot body index, this cannot read property copy of undefined.", 'start': 1559.128, 'duration': 8.765}, {'end': 1572.236, 'text': "So do I not have, oh, because I'm doing it after shift.", 'start': 1568.474, 'duration': 3.762}, {'end': 1575.318, 'text': "And if I'm shifting something with zero?", 'start': 1573.217, 'duration': 2.101}, {'end': 1578.1, 'text': "yeah, if I'm shifting something with zero, so shift has to happen after right?", 'start': 1575.318, 'duration': 2.782}, {'end': 1580.582, 'text': "Because if it only has one thing in it, I shift it, it's gone.", 'start': 1578.2, 'duration': 2.382}, {'end': 1584.579, 'text': 'So this is working now.', 'start': 1583.479, 'duration': 1.1}], 'summary': 'Identifying and correcting error in shifting elements of an array for better functionality.', 'duration': 28.233, 'max_score': 1556.346, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA1556346.jpg'}], 'start': 1114.258, 'title': 'Snake object function and array manipulation and snake game code debugging', 'summary': "Covers manipulating the snake object's array, increasing its length by one, referencing functions within the snake class, debugging a code for a snake game, using for loops to draw multiple rectangles, and encountering issues with undefined properties during the debugging process.", 'chapters': [{'end': 1225.345, 'start': 1114.258, 'title': 'Snake object function and array manipulation', 'summary': "Discusses the process of manipulating the snake object's array by adding elements to it, increasing its length by one, and referencing functions within the snake class.", 'duration': 111.087, 'highlights': ["Manipulating the snake object's array by adding elements to it The speaker discusses the process of adding elements to the snake object's array, using the 'push' function to insert a blank vector at the end of the array.", "Increasing the snake's length by one The discussion includes the intention to increase the length of the snake by one, with the initial length set as one.", "Referencing functions within the snake class The speaker emphasizes the need to reference functions within the snake class using 'this' keyword, specifically mentioning the 'grow' function as an example."]}, {'end': 1580.582, 'start': 1228.367, 'title': 'Snake game code debugging', 'summary': "Covers debugging a code for a snake game, including using for loops to draw multiple rectangles, utilizing array functions like shift and pop to manipulate the snake's body, and encountering issues with undefined properties during the debugging process.", 'duration': 352.215, 'highlights': ["Using for loops to draw multiple rectangles The speaker explains using a for loop to draw all the rectangles of the snake's body, demonstrating the process of iterating through the body elements and drawing each one.", "Utilizing array functions like shift and pop to manipulate the snake's body The speaker discusses using array functions such as shift and pop to manipulate the snake's body, specifically using shift to move all elements down one and pop to remove the last element.", "Encountering issues with undefined properties during the debugging process The speaker encounters issues with undefined properties during the debugging process, specifically mentioning the error 'cannot read property copy of undefined' and realizing the need to reorganize the sequence of operations to avoid shifting something with zero elements."]}], 'duration': 466.324, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA1114258.jpg', 'highlights': ["Using for loops to draw multiple rectangles The speaker explains using a for loop to draw all the rectangles of the snake's body, demonstrating the process of iterating through the body elements and drawing each one.", "Manipulating the snake object's array by adding elements to it The speaker discusses the process of adding elements to the snake object's array, using the 'push' function to insert a blank vector at the end of the array.", "Utilizing array functions like shift and pop to manipulate the snake's body The speaker discusses using array functions such as shift and pop to manipulate the snake's body, specifically using shift to move all elements down one and pop to remove the last element.", "Referencing functions within the snake class The speaker emphasizes the need to reference functions within the snake class using 'this' keyword, specifically mentioning the 'grow' function as an example.", "Increasing the snake's length by one The discussion includes the intention to increase the length of the snake by one, with the initial length set as one.", "Encountering issues with undefined properties during the debugging process The speaker encounters issues with undefined properties during the debugging process, specifically mentioning the error 'cannot read property copy of undefined' and realizing the need to reorganize the sequence of operations to avoid shifting something with zero elements."]}, {'end': 1858.551, 'segs': [{'end': 1706.523, 'src': 'embed', 'start': 1615.649, 'weight': 0, 'content': [{'end': 1618.972, 'text': 'So I need to just duplicate where it was before to the end.', 'start': 1615.649, 'duration': 3.323}, {'end': 1620.253, 'text': 'I think this should do the trick.', 'start': 1618.992, 'duration': 1.261}, {'end': 1631.663, 'text': "Yep Am I like going one step behind by accident? I'm not sure, but that's pretty good.", 'start': 1624.517, 'duration': 7.146}, {'end': 1633.564, 'text': 'You know why the food, oh.', 'start': 1631.683, 'duration': 1.881}, {'end': 1637.896, 'text': "Oh, you know what? It's not getting it until I get to the back.", 'start': 1634.995, 'duration': 2.901}, {'end': 1641.137, 'text': 'Why? Because eat is always checking this one.', 'start': 1637.996, 'duration': 3.141}, {'end': 1642.758, 'text': 'I need to check the last element.', 'start': 1641.177, 'duration': 1.581}, {'end': 1643.798, 'text': 'Same thing.', 'start': 1643.218, 'duration': 0.58}, {'end': 1645.859, 'text': "This is very awkward the way I'm doing it.", 'start': 1643.838, 'duration': 2.021}, {'end': 1650.8, 'text': "And I'm sure somebody will make their own version that's less awkward.", 'start': 1646.679, 'duration': 4.121}, {'end': 1654.462, 'text': 'But I need to check the location of the head against the food.', 'start': 1650.82, 'duration': 3.642}, {'end': 1656.682, 'text': 'Here we go.', 'start': 1656.122, 'duration': 0.56}, {'end': 1658.023, 'text': "Let's try this one more time.", 'start': 1656.742, 'duration': 1.281}, {'end': 1659.483, 'text': 'Snake game go.', 'start': 1658.503, 'duration': 0.98}, {'end': 1662.504, 'text': 'There we go.', 'start': 1659.503, 'duration': 3.001}, {'end': 1663.485, 'text': 'And up.', 'start': 1662.524, 'duration': 0.961}, {'end': 1665.836, 'text': 'Yeah, this is better.', 'start': 1665.236, 'duration': 0.6}, {'end': 1666.277, 'text': 'Okay, great.', 'start': 1665.936, 'duration': 0.341}, {'end': 1667.077, 'text': 'This is working.', 'start': 1666.477, 'duration': 0.6}, {'end': 1671.38, 'text': 'Yay! All right, now guess what? One more thing.', 'start': 1667.357, 'duration': 4.023}, {'end': 1674.302, 'text': 'I need to know when to restart the game.', 'start': 1671.82, 'duration': 2.482}, {'end': 1684.529, 'text': "When do I die? So I'm going to do a function called like check, you know, check for death or like, I don't know, end game.", 'start': 1674.382, 'duration': 10.147}, {'end': 1693.175, 'text': 'And what I need to do is I need to check if the head intersects with any of the other positions.', 'start': 1687.471, 'duration': 5.704}, {'end': 1696.608, 'text': 'So the head, as we know, is this.', 'start': 1694.426, 'duration': 2.182}, {'end': 1704.361, 'text': "This is a little bit weird what I'm doing.", 'start': 1703.2, 'duration': 1.161}, {'end': 1706.523, 'text': "That's the last spot.", 'start': 1704.421, 'duration': 2.102}], 'summary': 'Coding session: debugging and improving snake game, successfully implemented game restart function.', 'duration': 90.874, 'max_score': 1615.649, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA1615649.jpg'}, {'end': 1858.551, 'src': 'heatmap', 'start': 1831.175, 'weight': 1, 'content': [{'end': 1832.315, 'text': 'Yeah, OK, so that works.', 'start': 1831.175, 'duration': 1.14}, {'end': 1836.338, 'text': 'So going off the edge, at least the bottom, I should probably test the other edges.', 'start': 1832.556, 'duration': 3.782}, {'end': 1841.533, 'text': 'Whoa, what just happened there? And I took my auto refresh off.', 'start': 1837.81, 'duration': 3.723}, {'end': 1842.374, 'text': "I'm going to put that on.", 'start': 1841.573, 'duration': 0.801}, {'end': 1847.539, 'text': "So if I go off the top, ooh, that didn't work.", 'start': 1845.657, 'duration': 1.882}, {'end': 1849.421, 'text': 'I probably had a mistake somewhere in there.', 'start': 1847.979, 'duration': 1.442}, {'end': 1853.043, 'text': 'Yeah Oh, y.', 'start': 1850.7, 'duration': 2.343}, {'end': 1854.265, 'text': 'This should be y.', 'start': 1853.043, 'duration': 1.222}, {'end': 1855.226, 'text': 'Whoops, that was a mistake.', 'start': 1854.265, 'duration': 0.961}, {'end': 1857.289, 'text': 'OK, so yeah.', 'start': 1855.887, 'duration': 1.402}, {'end': 1858.551, 'text': 'All right, hopefully that fixed that.', 'start': 1857.449, 'duration': 1.102}], 'summary': 'Testing edge cases for auto refresh with some mistakes and fixes made.', 'duration': 43.606, 'max_score': 1831.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA1831175.jpg'}], 'start': 1583.479, 'title': 'Code refactoring and snake game development', 'summary': 'Discusses the challenges of code refactoring, such as duplicating elements and checking the last element. it also details the development of a snake game, covering collision and boundary condition checks, along with testing game features.', 'chapters': [{'end': 1643.798, 'start': 1583.479, 'title': 'Issues with code refactoring', 'summary': 'Illustrates the process of code refactoring and the challenges faced, including duplicating elements to the end and checking the last element instead of the first.', 'duration': 60.319, 'highlights': ['The process of code refactoring and the challenges faced', 'Duplicating elements to the end', 'Checking the last element instead of the first']}, {'end': 1858.551, 'start': 1643.838, 'title': 'Snake game development', 'summary': 'Details the process of developing a snake game, including checking for collisions and boundary conditions, with the goal of restarting the game under specific conditions, while also testing the functionality of the game features.', 'duration': 214.713, 'highlights': ['The chapter details the process of developing a snake game Development of a game, specifically a snake game', 'Checking for collisions and boundary conditions Implementation of collision detection and boundary condition verification', 'Goal of restarting the game under specific conditions Objective to restart the game based on certain conditions', "Testing the functionality of the game features Evaluation of the game's functionality through testing"]}], 'duration': 275.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA1583479.jpg', 'highlights': ['The chapter details the process of developing a snake game Development of a game, specifically a snake game', 'The process of code refactoring and the challenges faced', 'Checking for collisions and boundary conditions Implementation of collision detection and boundary condition verification', "Testing the functionality of the game features Evaluation of the game's functionality through testing", 'Duplicating elements to the end', 'Checking the last element instead of the first', 'Goal of restarting the game under specific conditions Objective to restart the game based on certain conditions']}, {'end': 2093.773, 'segs': [{'end': 1925.11, 'src': 'embed', 'start': 1861.034, 'weight': 0, 'content': [{'end': 1865.76, 'text': "And now what I need to do, so one thing I need to do just to be able to test better is I'm going to add something.", 'start': 1861.034, 'duration': 4.726}, {'end': 1868.184, 'text': "I'm going to add the mousePressed function.", 'start': 1865.981, 'duration': 2.203}, {'end': 1874.765, 'text': "And I'm going to say this snake.grow.", 'start': 1870.543, 'duration': 4.222}, {'end': 1880.687, 'text': "So anytime I click the mouse, I'm going to grow the snake so I can do it, sort of test this feature.", 'start': 1875.365, 'duration': 5.322}, {'end': 1883.989, 'text': 'Oh, whoops, shoot.', 'start': 1880.707, 'duration': 3.282}, {'end': 1886.37, 'text': 'Oh, and you know what? I should set the snake in the middle.', 'start': 1884.329, 'duration': 2.041}, {'end': 1900.445, 'text': "So the snake's location should probably be initially the W divided by 2 and H divided by 2, and I've got to keep everything an integer.", 'start': 1887.45, 'duration': 12.995}, {'end': 1906.347, 'text': "so I've got to put floor in here, just in case.", 'start': 1900.445, 'duration': 5.902}, {'end': 1909.088, 'text': 'alright. so now let me I.', 'start': 1906.347, 'duration': 2.741}, {'end': 1911.249, 'text': 'well, why did that?', 'start': 1909.088, 'duration': 2.161}, {'end': 1920.669, 'text': 'oh, Oh, because when I grow the head becomes the same location as the other part of the body.', 'start': 1911.249, 'duration': 9.42}, {'end': 1925.11, 'text': 'And then I check to see if the game is over.', 'start': 1921.389, 'duration': 3.721}], 'summary': 'Adding mousepressed function to grow snake, setting initial location in the middle, and checking for game over.', 'duration': 64.076, 'max_score': 1861.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA1861034.jpg'}, {'end': 2010.832, 'src': 'embed', 'start': 1955.655, 'weight': 3, 'content': [{'end': 1959.336, 'text': "I'm just trying to do this to debug it, and so I can do whatever I want.", 'start': 1955.655, 'duration': 3.681}, {'end': 1961.417, 'text': 'So I click over here and I move it.', 'start': 1959.356, 'duration': 2.061}, {'end': 1964.578, 'text': "So I'm going to make it longer.", 'start': 1961.437, 'duration': 3.141}, {'end': 1970, 'text': "So now let's see if it dies.", 'start': 1968.699, 'duration': 1.301}, {'end': 1970.82, 'text': 'Yep, OK, great.', 'start': 1970.04, 'duration': 0.78}, {'end': 1974.122, 'text': 'So I think I finished this game.', 'start': 1971.761, 'duration': 2.361}, {'end': 1979.243, 'text': 'Really what I want to do is come up with an end screen or restart the game or have some sort of score.', 'start': 1974.922, 'duration': 4.321}, {'end': 1984.664, 'text': "Let's see before I go how long I can play it before I die.", 'start': 1979.723, 'duration': 4.941}, {'end': 1988.665, 'text': 'And oh, let me just show you something.', 'start': 1987.225, 'duration': 1.44}, {'end': 1990.326, 'text': "I'm going to hit Save.", 'start': 1989.165, 'duration': 1.161}, {'end': 1992.506, 'text': 'This is a feature of the web editor.', 'start': 1990.646, 'duration': 1.86}, {'end': 1994.887, 'text': 'If I go File, Share.', 'start': 1992.526, 'duration': 2.361}, {'end': 1999.02, 'text': "I'm going to go here and I'm going to grab this full screen URL.", 'start': 1996.618, 'duration': 2.402}, {'end': 2000.622, 'text': "I'm going to grab it.", 'start': 1999.1, 'duration': 1.522}, {'end': 2002.123, 'text': "I'm going to open a new tab.", 'start': 2000.642, 'duration': 1.481}, {'end': 2004.806, 'text': "And now it's just the game.", 'start': 2003.725, 'duration': 1.081}, {'end': 2007.689, 'text': "I'm going to make it bigger for fun times.", 'start': 2004.926, 'duration': 2.763}, {'end': 2008.91, 'text': "I'm going to click in here.", 'start': 2008.169, 'duration': 0.741}, {'end': 2010.832, 'text': "And ready, I'm going to play the game.", 'start': 2009.23, 'duration': 1.602}], 'summary': 'Debugging game, adding end screen, testing playtime, and sharing feature.', 'duration': 55.177, 'max_score': 1955.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA1955655.jpg'}, {'end': 2093.773, 'src': 'embed', 'start': 2061.702, 'weight': 4, 'content': [{'end': 2063.303, 'text': 'You can do all sorts of things.', 'start': 2061.702, 'duration': 1.601}, {'end': 2068.926, 'text': 'You can now make your own version of the snake game in P5 in the web editor, instantly share it.', 'start': 2063.623, 'duration': 5.303}, {'end': 2074.007, 'text': 'Thank you to the Processing Foundation, Cassie Terakajian,', 'start': 2069.826, 'duration': 4.181}, {'end': 2080.429, 'text': 'all the people who made contributions to the p5 web editor and all the people who have worked on p5.js over the years.', 'start': 2074.007, 'duration': 6.422}, {'end': 2083.85, 'text': "I'm so excited to be able to make tutorials and coding challenges with this.", 'start': 2080.489, 'duration': 3.361}, {'end': 2093.773, 'text': 'I will still use my other workflow, and I will use processing, but I hope you enjoyed this video, and I will see you next time on The Coding Train.', 'start': 2084.07, 'duration': 9.703}], 'summary': 'Create snake game in p5 web editor, share instantly, thanks to processing foundation and contributors.', 'duration': 32.071, 'max_score': 2061.702, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA2061702.jpg'}], 'start': 1861.034, 'title': 'Creating snake game in p5 web editor', 'summary': "Involves adding the mousepressed function to grow the snake, setting the initial location, and identifying an issue with the snake's head location. it also highlights the process of creating a snake game in p5 web editor, showcasing debugging, game development, and sharing features, while encouraging audience participation, and expressing gratitude toward contributors, ending with a call for continued engagement.", 'chapters': [{'end': 1925.11, 'start': 1861.034, 'title': 'Adding mousepressed function for testing', 'summary': "Involves adding the mousepressed function to grow the snake when clicked, setting the snake's initial location, and identifying an issue with the snake's head location causing a game-over condition.", 'duration': 64.076, 'highlights': ['Adding the mousePressed function to grow the snake when clicked for testing purposes.', "Setting the snake's initial location to W/2 and H/2 and ensuring all values are rounded to integers.", 'Identifying an issue where growing the snake causes the head to overlap with another part of the body, leading to a game-over condition.']}, {'end': 2093.773, 'start': 1925.611, 'title': 'Creating snake game in p5 web editor', 'summary': 'Highlights the process of creating a snake game in p5 web editor, showcasing debugging, game development, and sharing features, while encouraging audience participation and expressing gratitude toward contributors, ending with a call for continued engagement.', 'duration': 168.162, 'highlights': ["The speaker debugs the game by adjusting its behavior, demonstrating the iterative development process. (e.g. 'I'm just trying to do this to debug it, and so I can do whatever I want.')", "The speaker shares a feature of the web editor, showcasing the capability to save, share, and duplicate the game for audience engagement. (e.g. 'I'm going to hit Save. This is a feature of the web editor. If I go File, Share. I'm going to go here and I'm going to grab this full screen URL.')", "The speaker encourages audience participation by inviting them to create their own versions of the game and share it, emphasizing the ease of use of the P5 web editor. (e.g. 'Goodbye Make your own version. Look for the link. Sign up for a P5 web editor account. Hit duplicate. Make your own version. Share it in the comments.')", "The speaker expresses gratitude towards contributors and the Processing Foundation, conveying excitement for creating tutorials and coding challenges using the P5 web editor. (e.g. 'Thank you to the Processing Foundation, Cassie Terakajian, all the people who made contributions to the p5 web editor and all the people who have worked on p5.js over the years.')"]}], 'duration': 232.739, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OMoVcohRgZA/pics/OMoVcohRgZA1861034.jpg', 'highlights': ['Identifying an issue where growing the snake causes the head to overlap with another part of the body, leading to a game-over condition.', "Setting the snake's initial location to W/2 and H/2 and ensuring all values are rounded to integers.", 'Adding the mousePressed function to grow the snake when clicked for testing purposes.', 'The speaker shares a feature of the web editor, showcasing the capability to save, share, and duplicate the game for audience engagement.', 'The speaker encourages audience participation by inviting them to create their own versions of the game and share it, emphasizing the ease of use of the P5 web editor.', 'The speaker expresses gratitude towards contributors and the Processing Foundation, conveying excitement for creating tutorials and coding challenges using the P5 web editor.', 'The speaker debugs the game by adjusting its behavior, demonstrating the iterative development process.']}], 'highlights': ['The challenge involves creating the snake game within a time limit of approximately 20 minutes.', 'The p5.js web editor was officially launched, allowing viewers to duplicate and modify the snake game code, and share their versions with the creator.', 'The creator aims to celebrate the launch of the p5.js web editor by attempting to code the classic snake game.', 'The chapter focuses on coding a snake game using object-oriented programming in p5.js, leveraging the concept of classes and ES6 features for the implementation.', 'The process of code refactoring and the challenges faced', 'The speaker shares a feature of the web editor, showcasing the capability to save, share, and duplicate the game for audience engagement.', 'The speaker encourages audience participation by inviting them to create their own versions of the game and share it, emphasizing the ease of use of the P5 web editor.', 'The speaker expresses gratitude towards contributors and the Processing Foundation, conveying excitement for creating tutorials and coding challenges using the P5 web editor.']}