title
Coding Challenge #5: Space Invaders in JavaScript with p5.js
description
This is my attempt to make a Space Invaders type game in the browser with JavaScript and the p5.js library Code: https://thecodingtrain.com/challenges/5-space-invaders
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/Azip-ZzXI
đĨ Previous video: https://youtu.be/KkyIDI6rQJI?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Next video: https://youtu.be/jxGS3fKPKJA?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
Videos:
đ Classes in JavaScript: https://youtu.be/T-HGdc8L-7w
đ´ Coding Train Live 33: https://youtu.be/WpUnYfVmKdA?t=1192s
Related Coding Challenges:
đ #46 Asteroids: https://youtu.be/hacZU523FyM
đ #72 Frogger: https://youtu.be/giXV6xErw0Y
Timestamps:
00:00 Welcome to the challenge!
00:46 Setup the sketch canvas
01:22 Planning the game
02:00 Create a Ship constructor
04:20 Add keyboard interaction to move the ship
07:35 Create a Flower constructor
09:37 Create an array of Flowers
12:35 Create a Water Drop constructor
16:00 Create an array of drops
16:55 Create a drop object on key press
18:02 Start the drop at the ship's location
19:40 Check for intersection of water drop and flower
25:00 Grow the flower and remove the drop
30:40 Some improvements
31:20 Move the flowers
37:12 Improve keyboard interaction
40:00 Thanks for watching!
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
đ Website: http://thecodingtrain.com/
đž Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
đŠ Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
đĄ GitHub: https://github.com/CodingTrain
đŦ Discord: https://discord.gg/hPuGy2g
đ Membership: http://youtube.com/thecodingtrain/join
đ Store: https://standard.tv/codingtrain
đī¸ Twitter: https://twitter.com/thecodingtrain
đ¸ Instagram: https://www.instagram.com/the.coding.train/
đĨ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
đ p5.js: https://p5js.org
đ p5.js Web Editor: https://editor.p5js.org/
đ Processing: https://processing.org
đ Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new
#spaceinvaders #game #p5js
detail
{'title': 'Coding Challenge #5: Space Invaders in JavaScript with p5.js', 'heatmap': [{'end': 393.783, 'start': 361.561, 'weight': 0.73}, {'end': 1079.54, 'start': 1023.806, 'weight': 0.758}, {'end': 1590.377, 'start': 1563.804, 'weight': 0.713}], 'summary': "Tutorial demonstrates creating a 'flower invaders' game using javascript and p5.js, replacing aliens with flowers and bullets with water, organizing code, using arrays for flowers and water, and creating a spaceship object with a constructor function. it also covers object creation, debugging, adding flower objects and water droplets, creating interactive drops and flowers, implementing sketch functions and array management, and developing a space invaders game with features like moving invaders and improved ship interaction.", 'chapters': [{'end': 183.117, 'segs': [{'end': 51.13, 'src': 'embed', 'start': 21.719, 'weight': 0, 'content': [{'end': 23.42, 'text': 'Classic Atari game, I believe.', 'start': 21.719, 'duration': 1.701}, {'end': 25.18, 'text': 'You can see some images from the original game.', 'start': 23.44, 'duration': 1.74}, {'end': 29.221, 'text': "I'm going to be using simple shapes to represent the things in the game.", 'start': 25.44, 'duration': 3.781}, {'end': 32.482, 'text': "And actually, I'm going to create a different version of it.", 'start': 29.421, 'duration': 3.061}, {'end': 34.183, 'text': "I'm going to call it Flower Invaders.", 'start': 32.542, 'duration': 1.641}, {'end': 36.023, 'text': 'And instead of aliens, there will be flowers.', 'start': 34.283, 'duration': 1.74}, {'end': 37.704, 'text': 'And instead of bullets, you will shoot water.', 'start': 36.123, 'duration': 1.581}, {'end': 43.326, 'text': "to water the flowers, because that's how I feel today in my world of rainbows and programming.", 'start': 38.524, 'duration': 4.802}, {'end': 45.567, 'text': 'OK, so I have to just get started.', 'start': 43.426, 'duration': 2.141}, {'end': 51.13, 'text': 'So the first thing that I need to do is I have a blank canvas here of code.', 'start': 45.627, 'duration': 5.503}], 'summary': 'Creating a new version of classic atari game with flowers and water bullets.', 'duration': 29.411, 'max_score': 21.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y021719.jpg'}, {'end': 116.721, 'src': 'embed', 'start': 84.037, 'weight': 3, 'content': [{'end': 88.159, 'text': "Let's come over here for a second and think about how we're going to organize the code for this.", 'start': 84.037, 'duration': 4.122}, {'end': 95.743, 'text': 'so in my flower invader program, I need to have a bunch of flowers,', 'start': 88.159, 'duration': 7.584}, {'end': 102.426, 'text': 'I need to have one watering can and I need to have water things and maybe I need a bunch of those.', 'start': 95.743, 'duration': 6.683}, {'end': 110.616, 'text': 'so I need an array for flowers and I need an array for the water.', 'start': 102.426, 'duration': 8.19}, {'end': 116.721, 'text': 'And I need one object for the ship.', 'start': 112.097, 'duration': 4.624}], 'summary': 'Code organization for flower invader program: arrays for flowers and water, object for ship.', 'duration': 32.684, 'max_score': 84.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y084037.jpg'}, {'end': 165.784, 'src': 'embed', 'start': 134.174, 'weight': 2, 'content': [{'end': 136.276, 'text': "And I'm going to write a constructor function.", 'start': 134.174, 'duration': 2.102}, {'end': 140.797, 'text': 'which gives an x value.', 'start': 138.536, 'duration': 2.261}, {'end': 142.839, 'text': "And I'm going to say width divided by 2.", 'start': 141.077, 'duration': 1.762}, {'end': 147.401, 'text': 'So this ship is automatically going to start in the center of the window.', 'start': 142.839, 'duration': 4.562}, {'end': 149.242, 'text': 'What does it need? It moves left and right.', 'start': 147.561, 'duration': 1.681}, {'end': 154.225, 'text': "Although I guess I'm going to move it left and right with the keyboard.", 'start': 151.243, 'duration': 2.982}, {'end': 155.766, 'text': 'So this is really all I need.', 'start': 154.565, 'duration': 1.201}, {'end': 159.148, 'text': 'Now I also need a function to show it.', 'start': 157.487, 'duration': 1.661}, {'end': 165.784, 'text': "And I'm going to make it a rectangle because I'm lazy and I'm figuring out how to draw a triangle to bottom.", 'start': 160.72, 'duration': 5.064}], 'summary': 'Creating a constructor function to position a ship in the center of the window and defining its movement with the keyboard.', 'duration': 31.61, 'max_score': 134.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y0134174.jpg'}], 'start': 1.331, 'title': 'Coding flower invaders game', 'summary': "Creating 'flower invaders' game using javascript and p5.js, with the aim to replace aliens with flowers and bullets with water, providing a relaxed programming experience. it also discusses organizing the code, using arrays for flowers and water, and creating a spaceship object with a constructor function.", 'chapters': [{'end': 84.037, 'start': 1.331, 'title': 'Coding rainbow challenge: space invaders to flower invaders', 'summary': "A coding challenge where the host plans to create a game called 'flower invaders' using javascript and p5.js, a framework with setup and draw functions, to replace aliens with flowers and bullets with water, aiming to provide a relaxed and meditative programming experience.", 'duration': 82.706, 'highlights': ["The host plans to create a game called 'Flower Invaders' using JavaScript and p5.js, aiming to replace aliens with flowers and bullets with water to provide a relaxed and meditative programming experience.", 'The coding challenge has no time constraint, and the host aims to move quickly but not rush in creating the game.', 'The host is using the p5.js framework, which has a setup function to start the program and a draw function to loop for animation.', "The game will feature simple shapes to represent the elements, such as flowers instead of aliens and water instead of bullets, in the classic Atari game 'Space Invaders'.", "The host aims to create a different version of the classic game, reflecting a world of rainbows and programming, by implementing the 'Flower Invaders' game."]}, {'end': 183.117, 'start': 84.037, 'title': 'Organizing code for flower invader program', 'summary': 'Discusses organizing the code for a flower invader program, including the use of arrays for flowers and water, as well as creating a spaceship object with a constructor function that automatically starts in the center of the window.', 'duration': 99.08, 'highlights': ["Creating a spaceship object with a constructor function that automatically starts in the center of the window The ship's x value is set to width divided by 2 for automatic centering; a rectangle is used to represent the ship at the bottom of the window, positioned 20 pixels up.", 'Using arrays for flowers and water The plan includes the use of arrays for flowers and water in the flower invader program to organize the code effectively.']}], 'duration': 181.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y01331.jpg', 'highlights': ["The host plans to create a game called 'Flower Invaders' using JavaScript and p5.js, aiming to replace aliens with flowers and bullets with water to provide a relaxed and meditative programming experience.", "The game will feature simple shapes to represent the elements, such as flowers instead of aliens and water instead of bullets, in the classic Atari game 'Space Invaders'.", "Creating a spaceship object with a constructor function that automatically starts in the center of the window The ship's x value is set to width divided by 2 for automatic centering; a rectangle is used to represent the ship at the bottom of the window, positioned 20 pixels up.", 'Using arrays for flowers and water The plan includes the use of arrays for flowers and water in the flower invader program to organize the code effectively.', "The host aims to create a different version of the classic game, reflecting a world of rainbows and programming, by implementing the 'Flower Invaders' game."]}, {'end': 442.298, 'segs': [{'end': 221.17, 'src': 'embed', 'start': 184.458, 'weight': 0, 'content': [{'end': 187.06, 'text': "And then maybe it's 20 pixels wide and 20 pixels high.", 'start': 184.458, 'duration': 2.602}, {'end': 188.201, 'text': "And it's going to be white.", 'start': 187.34, 'duration': 0.861}, {'end': 194.371, 'text': 'And now, so this is a very simple idea of a constructor function.', 'start': 190.604, 'duration': 3.767}, {'end': 198.598, 'text': 'I can make a ship object, and that ship object has a show function.', 'start': 194.491, 'duration': 4.107}, {'end': 203.923, 'text': "If you're wondering why I'm using a constructor function rather than making just like an object literal,", 'start': 199.701, 'duration': 4.222}, {'end': 210.566, 'text': "I just like constructor functions And I made a whole video tutorial about them, which I will hopefully link to somehow if you're watching this.", 'start': 203.923, 'duration': 6.643}, {'end': 213.507, 'text': 'okay. So now I need to go back to my main sketch.', 'start': 210.566, 'duration': 2.941}, {'end': 214.087, 'text': 'Oh boy.', 'start': 213.707, 'duration': 0.38}, {'end': 215.208, 'text': 'I lost that oops.', 'start': 214.487, 'duration': 0.721}, {'end': 217.549, 'text': 'This is like a irrelevant file Sorry about that.', 'start': 215.228, 'duration': 2.321}, {'end': 221.17, 'text': 'I need to go back to my main sketch and I need to create a variable.', 'start': 218.009, 'duration': 3.161}], 'summary': 'Discussion about a 20x20 white ship object using a constructor function.', 'duration': 36.712, 'max_score': 184.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y0184458.jpg'}, {'end': 314.447, 'src': 'embed', 'start': 241.322, 'weight': 2, 'content': [{'end': 245.484, 'text': 'I certainly defined it right here in this particular javascript file.', 'start': 241.322, 'duration': 4.162}, {'end': 249.667, 'text': "well, one thing you can't forget to do is, when you add a new javascript file,", 'start': 245.484, 'duration': 4.183}, {'end': 254.69, 'text': 'is to also make sure a Reference to that javascript file is included in your HTML file itself.', 'start': 249.667, 'duration': 5.023}, {'end': 257.873, 'text': "That's what the browser is actually loading to know what all the javascript it should look at.", 'start': 254.69, 'duration': 3.183}, {'end': 260.392, 'text': "Now we can see there's the ship.", 'start': 258.873, 'duration': 1.519}, {'end': 265.594, 'text': "it's right there at the bottom, and now what I need to do is figure out a way to move it left and right.", 'start': 260.392, 'duration': 5.202}, {'end': 274.816, 'text': "So one way to do that here, since I'm using p5.js, is to add a function called keyPressed.", 'start': 266.514, 'duration': 8.302}, {'end': 277.816, 'text': 'And so in keyPressed.', 'start': 276.636, 'duration': 1.18}, {'end': 278.477, 'text': 'I can check.', 'start': 277.816, 'duration': 0.661}, {'end': 285.758, 'text': "this is an event that's triggered any time a user presses a key on the keyboard and I can check if the key code is right arrow.", 'start': 278.477, 'duration': 7.281}, {'end': 290.624, 'text': 'I can say ship.left.', 'start': 287.478, 'duration': 3.146}, {'end': 296.44, 'text': 'else, if the key code is left arrow.', 'start': 290.624, 'duration': 5.816}, {'end': 297.04, 'text': 'Oh boy.', 'start': 296.7, 'duration': 0.34}, {'end': 298.661, 'text': 'So I got to get my equal signs right.', 'start': 297.22, 'duration': 1.441}, {'end': 303.522, 'text': 'So first of all, how many equal signs should I be using here? 100%, not one.', 'start': 298.741, 'duration': 4.781}, {'end': 305.663, 'text': 'One equal sign is for assignment.', 'start': 303.943, 'duration': 1.72}, {'end': 306.964, 'text': 'x equals 5.', 'start': 306.183, 'duration': 0.781}, {'end': 310.905, 'text': 'If I want to ask the question, does x equal 5, I can use two equals.', 'start': 306.964, 'duration': 3.941}, {'end': 314.447, 'text': 'And if I want to be really, really serious about it, I would use three equals.', 'start': 311.165, 'duration': 3.282}], 'summary': 'In javascript file, include reference in html. use keypressed function for arrow keys.', 'duration': 73.125, 'max_score': 241.322, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y0241322.jpg'}, {'end': 395.404, 'src': 'heatmap', 'start': 353.516, 'weight': 1, 'content': [{'end': 358.479, 'text': 'But it would make much more sense for me to have one single function that moves the ship.', 'start': 353.516, 'duration': 4.963}, {'end': 361.201, 'text': 'And then I could give it an argument to tell it whether to go left or right.', 'start': 358.699, 'duration': 2.502}, {'end': 370.687, 'text': "So I'm going to just say ship.move 1, meaning move to the right, ship.move negative 1, meaning move to the left,", 'start': 361.561, 'duration': 9.126}, {'end': 375.551, 'text': 'and now I can go into the ship object and add that function move equals function.', 'start': 370.687, 'duration': 4.864}, {'end': 378.153, 'text': "I'm going to make a variable called dir.", 'start': 375.551, 'duration': 2.602}, {'end': 379.053, 'text': "that's the argument.", 'start': 378.153, 'duration': 0.9}, {'end': 383.637, 'text': 'getting the 1 or the negative 1, and I can say this.x plus equals dir.', 'start': 379.053, 'duration': 4.584}, {'end': 387.119, 'text': 'so when I press left or right, the ship moves left or right.', 'start': 383.637, 'duration': 3.482}, {'end': 393.783, 'text': "so now, if we go back, hit refresh, click in here and you can see It's really moving.", 'start': 387.119, 'duration': 6.664}, {'end': 395.404, 'text': 'can I hold the keyboard down all right?', 'start': 393.783, 'duration': 1.621}], 'summary': 'Create a single function to move ship left or right, with ship.move 1 for right and ship.move -1 for left.', 'duration': 41.888, 'max_score': 353.516, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y0353516.jpg'}], 'start': 184.458, 'title': 'Object creation and debugging', 'summary': 'Introduces the constructor function for creating objects, specifically demonstrating the creation of a ship object with a show function and mentions a video tutorial. it also covers debugging a javascript error and working with object instances in a p5.js program, resolving errors and adding functionality to move the object left and right, along with improving the ship movement function by creating a single function that takes an argument to move the ship left or right.', 'chapters': [{'end': 221.17, 'start': 184.458, 'title': 'Constructor function for object creation', 'summary': 'Introduces the concept of a constructor function for creating objects, specifically demonstrating the creation of a ship object with a show function and mentioning a video tutorial on constructor functions.', 'duration': 36.712, 'highlights': ['The chapter introduces the concept of a constructor function for creating objects, specifically demonstrating the creation of a ship object with a show function.', 'Mention of a video tutorial on constructor functions is made, with the intention to link it for the viewers.', 'The speaker expresses a preference for constructor functions over object literals, citing a whole video tutorial made on the topic.']}, {'end': 314.447, 'start': 221.17, 'title': 'Debugging javascript code and working with object instances', 'summary': "Covers debugging a javascript error and working with object instances in a p5.js program, where the error in defining the 'ship' object is resolved and functionality to move the object left and right is added.", 'duration': 93.277, 'highlights': ["The importance of including a reference to a new JavaScript file in the HTML file to avoid errors like 'ship is not defined'.", "Explanation of using 'keyPressed' function in p5.js to trigger events based on user keyboard input for moving the 'ship' object left and right.", 'Understanding the difference between using one, two, and three equal signs for assignment and comparison in JavaScript.']}, {'end': 442.298, 'start': 314.507, 'title': 'Improving ship movement function', 'summary': 'Explains the need to improve the ship movement function by creating a single function that takes an argument to move the ship left or right, and demonstrates the implementation of the improved function in a coding environment.', 'duration': 127.791, 'highlights': ['The chapter discusses the need for a single function to move the ship, allowing it to go left or right based on the argument provided. Need for a single function for ship movement, using argument to specify left or right movement.', "The author demonstrates the implementation of the improved ship movement function in a coding environment, showing the ship moving left or right based on the function's argument. Demonstration of the ship moving left or right based on the argument provided in the improved function implementation."]}], 'duration': 257.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y0184458.jpg', 'highlights': ['The chapter introduces the concept of a constructor function for creating objects, specifically demonstrating the creation of a ship object with a show function.', 'The chapter discusses the need for a single function to move the ship, allowing it to go left or right based on the argument provided. Need for a single function for ship movement, using argument to specify left or right movement.', "Explanation of using 'keyPressed' function in p5.js to trigger events based on user keyboard input for moving the 'ship' object left and right.", 'Understanding the difference between using one, two, and three equal signs for assignment and comparison in JavaScript.', "The importance of including a reference to a new JavaScript file in the HTML file to avoid errors like 'ship is not defined'.", 'Mention of a video tutorial on constructor functions is made, with the intention to link it for the viewers.', 'The speaker expresses a preference for constructor functions over object literals, citing a whole video tutorial made on the topic.', "The author demonstrates the implementation of the improved ship movement function in a coding environment, showing the ship moving left or right based on the function's argument. Demonstration of the ship moving left or right based on the argument provided in the improved function implementation."]}, {'end': 838.236, 'segs': [{'end': 474.195, 'src': 'embed', 'start': 444.1, 'weight': 0, 'content': [{'end': 447.463, 'text': "but I'm going to hold that off till later.", 'start': 444.1, 'duration': 3.363}, {'end': 454.889, 'text': "I'm going to come back and fix that, because the next thing I want to do is add the flowers.", 'start': 447.463, 'duration': 7.426}, {'end': 462.275, 'text': 'so, if you recall, the flowers are things that live above and I need an array of them.', 'start': 454.889, 'duration': 7.386}, {'end': 471.393, 'text': "so I'm going to make a flower object come back over here, I'm going to make another new file And I'm going to make another new file.", 'start': 462.275, 'duration': 9.118}, {'end': 474.195, 'text': "I'm going to call this a flower.js.", 'start': 471.654, 'duration': 2.541}], 'summary': 'Adding flower objects to a new file for later modification.', 'duration': 30.095, 'max_score': 444.1, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y0444100.jpg'}, {'end': 537.512, 'src': 'embed', 'start': 508.361, 'weight': 4, 'content': [{'end': 509.862, 'text': "I think that's about purple.", 'start': 508.361, 'duration': 1.501}, {'end': 513.686, 'text': 'And this should say this.y.', 'start': 511.664, 'duration': 2.022}, {'end': 520.986, 'text': 'you know anybody who hopefully somebody will watch this video and make a really nice, pretty flower design,', 'start': 515.645, 'duration': 5.341}, {'end': 524.408, 'text': "or I could download a flower image and I'm going to take out the move function for right now.", 'start': 520.986, 'duration': 3.422}, {'end': 525.769, 'text': 'So we can see now.', 'start': 524.728, 'duration': 1.041}, {'end': 533.991, 'text': 'aha, now I have a flower object, basically the same idea, and what I want to do in Sketch now is make, just to test that this is working,', 'start': 525.769, 'duration': 8.222}, {'end': 535.391, 'text': 'make a single flower object.', 'start': 533.991, 'duration': 1.4}, {'end': 537.512, 'text': "So I'm going to say new flower.", 'start': 536.291, 'duration': 1.221}], 'summary': 'Creating a flower object in sketch to test functionality.', 'duration': 29.151, 'max_score': 508.361, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y0508361.jpg'}, {'end': 587.682, 'src': 'embed', 'start': 549.578, 'weight': 3, 'content': [{'end': 550.778, 'text': 'I can never remember.', 'start': 549.578, 'duration': 1.2}, {'end': 556.701, 'text': "index.html We've got to add a reference to flower.js now.", 'start': 551.218, 'duration': 5.483}, {'end': 557.502, 'text': 'Here we go.', 'start': 556.801, 'duration': 0.701}, {'end': 563.984, 'text': "Look, I've got a watering can ship and a flower and I can move my ship and I have it now.", 'start': 557.522, 'duration': 6.462}, {'end': 565.944, 'text': 'but I but one flower is not enough.', 'start': 563.984, 'duration': 1.96}, {'end': 567.585, 'text': 'I want to have an array of flowers.', 'start': 565.944, 'duration': 1.641}, {'end': 569.045, 'text': 'so this is a by the way with the ship.', 'start': 567.585, 'duration': 1.46}, {'end': 572.306, 'text': "I probably didn't really need to use a JavaScript constructor function,", 'start': 569.045, 'duration': 3.261}, {'end': 575.567, 'text': "but I'm going to make the case that it really makes a lot of sense to use it with the flower.", 'start': 572.306, 'duration': 3.261}, {'end': 587.682, 'text': "because what I'm going to do now is say actually what I want is to have an array called flowers and instead of having one flower,", 'start': 575.567, 'duration': 12.115}], 'summary': 'Adding reference to flower.js, creating array of flowers in javascript constructor function.', 'duration': 38.104, 'max_score': 549.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y0549578.jpg'}, {'end': 637.372, 'src': 'embed', 'start': 615.12, 'weight': 1, 'content': [{'end': 624.205, 'text': "I have an array of flowers and Aliens if you're really programming space invaders and I'm making Five flower objects and showing them all,", 'start': 615.12, 'duration': 9.085}, {'end': 625.745, 'text': "so let's run this again.", 'start': 624.205, 'duration': 1.54}, {'end': 627.606, 'text': "It looks like there's only one flower.", 'start': 626.046, 'duration': 1.56}, {'end': 630.668, 'text': "Why? because they're all being drawn in exactly the same place.", 'start': 627.606, 'duration': 3.062}, {'end': 633.87, 'text': 'because here I have hard-coded the location of the flowers.', 'start': 630.668, 'duration': 3.202}, {'end': 636.011, 'text': 'so What do I need to do?', 'start': 633.87, 'duration': 2.141}, {'end': 637.372, 'text': 'This is good, right?', 'start': 636.411, 'duration': 0.961}], 'summary': 'Creating 5 flower objects for space invaders, but they all appear in the same place due to hard-coded locations.', 'duration': 22.252, 'max_score': 615.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y0615120.jpg'}, {'end': 754.495, 'src': 'embed', 'start': 729.646, 'weight': 5, 'content': [{'end': 738.249, 'text': "I have my watering can, so what I'm going to do now is I need to oh boy, 12 minutes in, but we're making good progress here.", 'start': 729.646, 'duration': 8.603}, {'end': 746.312, 'text': "What I need to do now, I'm just checking the chat to see if everybody, the timer's a bit small, oh boy, you can't see that, whatever.", 'start': 738.509, 'duration': 7.803}, {'end': 748.633, 'text': "I gotta work on my timer, I shouldn't look at the chat.", 'start': 746.832, 'duration': 1.801}, {'end': 749.433, 'text': 'Keep going down.', 'start': 748.913, 'duration': 0.52}, {'end': 750.753, 'text': "OK, there's a live chat.", 'start': 749.853, 'duration': 0.9}, {'end': 754.495, 'text': "I'm doing this live, but most of you will be watching this not live.", 'start': 751.214, 'duration': 3.281}], 'summary': 'The speaker is conducting a live session, encountering technical issues and interacting with the live chat while working with a watering can for 12 minutes.', 'duration': 24.849, 'max_score': 729.646, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y0729646.jpg'}, {'end': 823.533, 'src': 'embed', 'start': 797.019, 'weight': 2, 'content': [{'end': 801.28, 'text': "And now what I'm going to do is I'm going to go into the flower, which has a lot of stuff that's useful for me.", 'start': 797.019, 'duration': 4.261}, {'end': 805.081, 'text': "I'm going to make the water a kind of bluish color.", 'start': 801.66, 'duration': 3.421}, {'end': 808.303, 'text': 'and make it a small circle.', 'start': 806.802, 'duration': 1.501}, {'end': 810.625, 'text': "And I'm going to call this a drop.", 'start': 809.104, 'duration': 1.521}, {'end': 814.909, 'text': "And I'm going to remember right now to add that to the HTML file.", 'start': 811.286, 'duration': 3.623}, {'end': 817.472, 'text': 'Not forgetting this time.', 'start': 816.411, 'duration': 1.061}, {'end': 821.673, 'text': 'Yeah, in your face HTML file.', 'start': 818.772, 'duration': 2.901}, {'end': 823.533, 'text': 'That was very rude.', 'start': 822.853, 'duration': 0.68}], 'summary': 'Creating a drop with a bluish color to add to the html file.', 'duration': 26.514, 'max_score': 797.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y0797019.jpg'}], 'start': 444.1, 'title': 'Adding flower objects and water droplets in javascript', 'summary': 'Discusses specifying properties, setting initial location and color of flower objects, creating and displaying flower objects using a constructor function, and beginning the creation of water droplets.', 'chapters': [{'end': 525.769, 'start': 444.1, 'title': 'Adding flowers to javascript', 'summary': 'Discusses adding flower objects to a javascript program, specifying their properties, and setting their initial location and color, aiming to create a visually appealing design.', 'duration': 81.669, 'highlights': ['The process of adding flower objects to a JavaScript program is detailed, including creating a new file for the flower object and defining its properties like x and y coordinates and color, with a focus on creating a visually appealing design.', 'The speaker emphasizes the desire for a purple flower and mentions the possibility of someone creating a pretty flower design or downloading a flower image, indicating the aesthetic goal of the program.', 'The chapter includes a mention of the time taken for the process, estimating it to take about seven minutes, providing a quantifiable measure of the effort involved.']}, {'end': 838.236, 'start': 525.769, 'title': 'Creating flower objects and water droplets', 'summary': 'Covers creating and displaying flower objects using a javascript constructor function, utilizing an array to generate multiple flower objects, implementing constructor arguments for positioning, and beginning the creation of water droplets to be emitted from the flowers.', 'duration': 312.467, 'highlights': ['Implementing array to generate multiple flower objects and using constructor arguments for positioning The chapter emphasizes the use of an array to create multiple flower objects and demonstrates the implementation of constructor arguments for positioning, resulting in the display of multiple flowers at different locations.', 'Creation of water droplets to be emitted from the flowers The chapter starts the process of creating water droplets by introducing a new file for handling the water droplets, defining their appearance and color, and ensuring their inclusion in the HTML file.', 'Utilizing JavaScript constructor function for creating and displaying flower objects The chapter highlights the use of a JavaScript constructor function to create and display flower objects, demonstrating the process by incorporating a new flower object and displaying it in the Sketch environment.']}], 'duration': 394.136, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y0444100.jpg', 'highlights': ['The process of adding flower objects to a JavaScript program is detailed, including creating a new file for the flower object and defining its properties like x and y coordinates and color, with a focus on creating a visually appealing design.', 'Implementing array to generate multiple flower objects and using constructor arguments for positioning The chapter emphasizes the use of an array to create multiple flower objects and demonstrates the implementation of constructor arguments for positioning, resulting in the display of multiple flowers at different locations.', 'Creation of water droplets to be emitted from the flowers The chapter starts the process of creating water droplets by introducing a new file for handling the water droplets, defining their appearance and color, and ensuring their inclusion in the HTML file.', 'Utilizing JavaScript constructor function for creating and displaying flower objects The chapter highlights the use of a JavaScript constructor function to create and display flower objects, demonstrating the process by incorporating a new flower object and displaying it in the Sketch environment.', 'The speaker emphasizes the desire for a purple flower and mentions the possibility of someone creating a pretty flower design or downloading a flower image, indicating the aesthetic goal of the program.', 'The chapter includes a mention of the time taken for the process, estimating it to take about seven minutes, providing a quantifiable measure of the effort involved.']}, {'end': 1499.819, 'segs': [{'end': 1079.54, 'src': 'heatmap', 'start': 1023.806, 'weight': 0.758, 'content': [{'end': 1032.491, 'text': "And I can also say now here if key equals space, there's probably another way to do this, but I'm going to just say if the key equals the space,", 'start': 1023.806, 'duration': 8.685}, {'end': 1042.781, 'text': "then I'm going to say var drop equals a new drop width divided by 2, height divided by 2..", 'start': 1032.491, 'duration': 10.29}, {'end': 1045.646, 'text': 'And drops.push drop.', 'start': 1042.781, 'duration': 2.865}, {'end': 1050.672, 'text': 'So whenever the user hits the space bar, make a new drop object and add it to that drops array.', 'start': 1045.925, 'duration': 4.747}, {'end': 1053.096, 'text': 'And that drops array will just expand magically.', 'start': 1050.933, 'duration': 2.163}, {'end': 1054.638, 'text': "OK, so let's run this.", 'start': 1053.536, 'duration': 1.102}, {'end': 1058.142, 'text': 'And now if I hit the space bar, oh, drops is not defined.', 'start': 1054.918, 'duration': 3.224}, {'end': 1061.866, 'text': 'What happened? What did I miss? Always with an error.', 'start': 1058.883, 'duration': 2.983}, {'end': 1065.709, 'text': 'Line 37, drops is not defined.', 'start': 1062.346, 'duration': 3.363}, {'end': 1067.67, 'text': 'Oh, I called it drop.', 'start': 1066.429, 'duration': 1.241}, {'end': 1069.172, 'text': 'I want to call it drops.', 'start': 1068.111, 'duration': 1.061}, {'end': 1071.714, 'text': 'And this should say drops, and that should say drops.', 'start': 1069.772, 'duration': 1.942}, {'end': 1075.457, 'text': 'So I was just being inconsistent about my typing, but I fixed that now.', 'start': 1071.734, 'duration': 3.723}, {'end': 1079.54, 'text': 'okay, here we go ready and spacebar, spacebar, spacebar, spacebar.', 'start': 1075.817, 'duration': 3.723}], 'summary': 'Creating a program to generate new drop objects when spacebar is pressed, leading to an expanding drops array.', 'duration': 55.734, 'max_score': 1023.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y01023806.jpg'}, {'end': 1061.866, 'src': 'embed', 'start': 1032.491, 'weight': 0, 'content': [{'end': 1042.781, 'text': "then I'm going to say var drop equals a new drop width divided by 2, height divided by 2..", 'start': 1032.491, 'duration': 10.29}, {'end': 1045.646, 'text': 'And drops.push drop.', 'start': 1042.781, 'duration': 2.865}, {'end': 1050.672, 'text': 'So whenever the user hits the space bar, make a new drop object and add it to that drops array.', 'start': 1045.925, 'duration': 4.747}, {'end': 1053.096, 'text': 'And that drops array will just expand magically.', 'start': 1050.933, 'duration': 2.163}, {'end': 1054.638, 'text': "OK, so let's run this.", 'start': 1053.536, 'duration': 1.102}, {'end': 1058.142, 'text': 'And now if I hit the space bar, oh, drops is not defined.', 'start': 1054.918, 'duration': 3.224}, {'end': 1061.866, 'text': 'What happened? What did I miss? Always with an error.', 'start': 1058.883, 'duration': 2.983}], 'summary': 'Creating a new drop object and adding it to the drops array results in an error.', 'duration': 29.375, 'max_score': 1032.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y01032491.jpg'}, {'end': 1216.996, 'src': 'embed', 'start': 1175.446, 'weight': 1, 'content': [{'end': 1178.93, 'text': 'But what can you do? OK, well, I lost track of what I was doing now.', 'start': 1175.446, 'duration': 3.484}, {'end': 1181.044, 'text': "Let's look here.", 'start': 1180.123, 'duration': 0.921}, {'end': 1185.267, 'text': 'We have a bunch of drops that are showing and moving.', 'start': 1181.644, 'duration': 3.623}, {'end': 1187.669, 'text': 'We have a bunch of flowers that are showing.', 'start': 1185.567, 'duration': 2.102}, {'end': 1198.623, 'text': 'Well what do we also want to do for every drop? For every drop, I want to look and see if the drop intersects a flower.', 'start': 1187.949, 'duration': 10.674}, {'end': 1206.248, 'text': 'If the drop and the flower are overlapping, if the drop hits the flower, maybe make the flower bigger to water it or something like that so it grows.', 'start': 1198.803, 'duration': 7.445}, {'end': 1209.671, 'text': 'Of course, I could make it disappear, which would be the Space Invaders thing.', 'start': 1206.288, 'duration': 3.383}, {'end': 1211.432, 'text': "So let's see.", 'start': 1210.832, 'duration': 0.6}, {'end': 1216.996, 'text': "So that should indicate to you that I'm saying every drop should check to see if it hit any of the flowers.", 'start': 1211.652, 'duration': 5.344}], 'summary': 'Algorithm to detect drops intersecting flowers and trigger growth or disappearance.', 'duration': 41.55, 'max_score': 1175.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y01175446.jpg'}], 'start': 838.716, 'title': 'Creating interactive drops and flowers', 'summary': 'Covers creating and managing drop objects in javascript, defining their location, appearance, and movement, with the functionality to add multiple drops. it also explains interactive programming for creating a game with moving drops and flowers, and implementing collision detection between them.', 'chapters': [{'end': 1084.463, 'start': 838.716, 'title': 'Creating and managing drops in javascript', 'summary': 'Explains the process of creating and managing drop objects in a javascript program, including defining their initial location, appearance, and movement, and implementing the functionality to add multiple drops when the space bar is pressed.', 'duration': 245.747, 'highlights': ['Implementing the functionality to add multiple drops when the space bar is pressed The code is designed to create a new drop object and add it to the drops array whenever the user hits the space bar, allowing for the dynamic addition of drops.', 'Defining the initial location of the drop object The speaker discusses the need to give the drop object initial values to establish its starting location, addressing the issue of the drop not being visible initially.', 'Looping through all drops to show and move them The code includes a loop to iterate through all drop objects, using the show and move functions to display and animate each drop, enabling the program to handle multiple drops simultaneously.']}, {'end': 1499.819, 'start': 1084.463, 'title': 'Interactive programming with drops and flowers', 'summary': 'Covers interactive programming for creating a game with moving drops and flowers, and implementing collision detection between drops and flowers, aiming to make the flowers grow when watered, and the drops disappear upon hitting the flowers.', 'duration': 415.356, 'highlights': ['Creating interactive programming for moving drops and flowers The chapter focuses on creating interactive programming for moving drops and flowers to demonstrate game development.', 'Implementing collision detection between drops and flowers The chapter emphasizes the implementation of collision detection between drops and flowers, aiming to trigger events such as making the flowers grow when watered and causing the drops to disappear upon hitting the flowers.', 'Demonstrating game development features and potential expansions The chapter discusses the potential addition of features such as moving flowers similar to Space Invaders aliens and the implementation of bonus exercises for the viewers.']}], 'duration': 661.103, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y0838716.jpg', 'highlights': ['Implementing the functionality to add multiple drops when the space bar is pressed The code is designed to create a new drop object and add it to the drops array whenever the user hits the space bar, allowing for the dynamic addition of drops.', 'Creating interactive programming for moving drops and flowers The chapter focuses on creating interactive programming for moving drops and flowers to demonstrate game development.', 'Implementing collision detection between drops and flowers The chapter emphasizes the implementation of collision detection between drops and flowers, aiming to trigger events such as making the flowers grow when watered and causing the drops to disappear upon hitting the flowers.']}, {'end': 1817.895, 'segs': [{'end': 1645.205, 'src': 'heatmap', 'start': 1563.804, 'weight': 0, 'content': [{'end': 1567.787, 'text': 'The comment that out, and this means now I need to add a function, this.grow.', 'start': 1563.804, 'duration': 3.983}, {'end': 1569.909, 'text': 'to the flower object.', 'start': 1568.928, 'duration': 0.981}, {'end': 1573.374, 'text': "And I'm going to say this.r equals this.r plus 2.", 'start': 1570.27, 'duration': 3.104}, {'end': 1574.695, 'text': 'Just gets two pixels bigger.', 'start': 1573.374, 'duration': 1.321}, {'end': 1577.199, 'text': "So let's look at this.", 'start': 1575.396, 'duration': 1.803}, {'end': 1579.281, 'text': 'And look at that.', 'start': 1578.18, 'duration': 1.101}, {'end': 1590.377, 'text': "So this is actually kind of a nice effect because, Oh, we've been overtaken by the purple pink flower of glorious wonderfulness.", 'start': 1579.481, 'duration': 10.896}, {'end': 1596.641, 'text': "But you can see here that without the drop being removed, it's behind that flower.", 'start': 1590.857, 'duration': 5.784}, {'end': 1601.444, 'text': 'And if the flower is growing, and if the drop is moving while the flower is growing, it never leaves the flower.', 'start': 1596.741, 'duration': 4.703}, {'end': 1603.846, 'text': 'You have this infinitely growing flower, which is kind of nice.', 'start': 1601.464, 'duration': 2.382}, {'end': 1605.587, 'text': "But I'm going to correct that problem.", 'start': 1604.106, 'duration': 1.481}, {'end': 1615.567, 'text': "So let's add this other function back in, drops.evaporate, which means I need a function.", 'start': 1605.847, 'duration': 9.72}, {'end': 1617.045, 'text': 'called evaporate.', 'start': 1616.124, 'duration': 0.921}, {'end': 1622.749, 'text': 'Now what am I really doing here? What I need to determine basically, I need a drop to have, I mean I could do a couple things.', 'start': 1617.105, 'duration': 5.644}, {'end': 1625.511, 'text': 'One is I could just set its position like way off screen.', 'start': 1622.929, 'duration': 2.582}, {'end': 1627.712, 'text': 'I could say this.x equals 5,000.', 'start': 1625.831, 'duration': 1.881}, {'end': 1632.155, 'text': "That would kind of be good because you wouldn't see it, it would be to the users if it was gone.", 'start': 1627.712, 'duration': 4.443}, {'end': 1634.877, 'text': "But it'd probably be better to actually remove it from the array.", 'start': 1632.456, 'duration': 2.421}, {'end': 1645.205, 'text': "So what I'm going to do is set like a flag basically to know, so I'm going to say like this.toDelete equals false.", 'start': 1635.338, 'duration': 9.867}], 'summary': 'Adding a function to grow the flower and addressing an issue with the drop being behind the flower while it grows.', 'duration': 71.831, 'max_score': 1563.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y01563804.jpg'}, {'end': 1767.318, 'src': 'embed', 'start': 1735.582, 'weight': 2, 'content': [{'end': 1738.863, 'text': 'And the way that you do that in JavaScript is with the splice function.', 'start': 1735.582, 'duration': 3.281}, {'end': 1741.905, 'text': 'The splice function splices something out of an array.', 'start': 1739.163, 'duration': 2.742}, {'end': 1747.247, 'text': 'And I need to give it which element out of the array do I want to splice, which is, in this case, i.', 'start': 1742.165, 'duration': 5.082}, {'end': 1749.168, 'text': 'And I need to give it how many elements.', 'start': 1747.247, 'duration': 1.921}, {'end': 1755.186, 'text': 'Do I want just that i or also the one after? And in this case, I want just that i, so I say one.', 'start': 1750.319, 'duration': 4.867}, {'end': 1767.318, 'text': "So now we should be able to run this and you'll see, Right, it's just getting bigger and those drops are being removed from the right now.", 'start': 1755.607, 'duration': 11.711}], 'summary': 'Using javascript splice function to remove elements from an array.', 'duration': 31.736, 'max_score': 1735.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y01735582.jpg'}], 'start': 1499.939, 'title': 'Implementing sketch functions and array management', 'summary': 'Discusses implementing flower growth and drop evaporation in the main sketch, with the flower growing by 2 pixels and the drop evaporating, while also explaining array management in javascript, including conditional deletion and addressing potential issues with element deletion.', 'chapters': [{'end': 1625.511, 'start': 1499.939, 'title': 'Implementing flower growth and drop evaporation', 'summary': "Discusses implementing flower growth and drop evaporation in the main sketch, demonstrating the functions 'grow' for the flower object and 'evaporate' for the drops, with the flower growing by 2 pixels and the drop evaporating, addressing the issue of an infinitely growing flower and ensuring the drop leaves the flower.", 'duration': 125.572, 'highlights': ["Implementing the function 'grow' for the flower object by increasing its radius by 2 pixels. The flower growth is demonstrated by implementing the function 'grow' for the flower object, increasing its radius by 2 pixels.", "Addressing the issue of an infinitely growing flower by implementing the function 'evaporate' for the drops. The issue of an infinitely growing flower is addressed by implementing the function 'evaporate' for the drops, ensuring the drop leaves the flower as it evaporates.", "Demonstrating the need to add the function 'evaporate' for the drops to address the problem of the flower being overtaken by the growing drop. The need to add the function 'evaporate' for the drops is demonstrated, addressing the problem of the flower being overtaken by the growing drop."]}, {'end': 1817.895, 'start': 1625.831, 'title': 'Managing array and conditional deletion', 'summary': 'Explains how to manage an array in javascript, including setting a flag to mark items for deletion, and using the splice function to remove elements. it also highlights the potential issue of skipping elements when deleting from an array.', 'duration': 192.064, 'highlights': ['The splice function in JavaScript is used to remove elements from an array, as demonstrated by removing drops from the array in the provided code.', 'The chapter introduces the concept of setting a flag in an object to mark it for deletion, enabling effective management of array elements.', 'The potential issue of skipping elements when deleting from an array is highlighted, emphasizing the importance of walking through the array backwards to avoid accidental skipping.', 'The importance of walking through the array backwards to prevent accidental skipping of elements when deleting from the array is emphasized, providing a valuable insight into array management in JavaScript.', 'The concept of setting a flag in an object to mark it for deletion is explained, demonstrating effective array management techniques in JavaScript.']}], 'duration': 317.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y01499939.jpg', 'highlights': ["Implementing the function 'grow' for the flower object by increasing its radius by 2 pixels.", "Addressing the issue of an infinitely growing flower by implementing the function 'evaporate' for the drops.", 'The splice function in JavaScript is used to remove elements from an array, as demonstrated by removing drops from the array in the provided code.', 'The concept of setting a flag in an object to mark it for deletion is explained, demonstrating effective array management techniques in JavaScript.']}, {'end': 2443.314, 'segs': [{'end': 1863.848, 'src': 'embed', 'start': 1819.196, 'weight': 0, 'content': [{'end': 1822.098, 'text': 'And I can grow these flowers.', 'start': 1819.196, 'duration': 2.902}, {'end': 1831.362, 'text': 'So in a way, this is kind of like, at 30 minutes, this is the basic core idea of Space Invaders with some modification and flowers and water.', 'start': 1822.378, 'duration': 8.984}, {'end': 1835.965, 'text': 'Now, I sort of would like to keep going.', 'start': 1831.863, 'duration': 4.102}, {'end': 1839.447, 'text': "I'm looking at the chat because people are asking questions.", 'start': 1835.985, 'duration': 3.462}, {'end': 1840.407, 'text': "But I'll have to look at those after.", 'start': 1839.467, 'duration': 0.94}, {'end': 1842.868, 'text': "I'd like to keep going to add a few more features.", 'start': 1840.787, 'duration': 2.081}, {'end': 1845.21, 'text': 'But let me tell you what those features are.', 'start': 1843.149, 'duration': 2.061}, {'end': 1847.299, 'text': 'So number one is.', 'start': 1846.198, 'duration': 1.101}, {'end': 1856.263, 'text': 'I would like the invaders to move the flowers, excuse me, and I would like to make the interaction of the ship be a little.', 'start': 1847.299, 'duration': 8.964}, {'end': 1857.284, 'text': 'this is like too awkward.', 'start': 1856.263, 'duration': 1.021}, {'end': 1858.144, 'text': 'this is not working for me.', 'start': 1857.284, 'duration': 0.86}, {'end': 1861.746, 'text': 'I want to be able to hold the key down, and when I release the key have it stop moving.', 'start': 1858.185, 'duration': 3.561}, {'end': 1863.848, 'text': 'So I want to fix those two things.', 'start': 1862.807, 'duration': 1.041}], 'summary': 'Adapting space invaders with flowers and water, aiming to add features like moving invaders and improving ship interaction.', 'duration': 44.652, 'max_score': 1819.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y01819196.jpg'}, {'end': 1907.657, 'src': 'embed', 'start': 1881.939, 'weight': 2, 'content': [{'end': 1888.565, 'text': 'So if we look at the flower constructor function, which sort of represents that like a template for that flower object?', 'start': 1881.939, 'duration': 6.626}, {'end': 1891.167, 'text': 'It has a function called grow, which grows the radius.', 'start': 1888.565, 'duration': 2.602}, {'end': 1895.871, 'text': 'it has a function called show, which draws it, But it has no function to let it move.', 'start': 1891.167, 'duration': 4.704}, {'end': 1899.814, 'text': 'so I think we should write a function called move.', 'start': 1895.871, 'duration': 3.943}, {'end': 1903.934, 'text': 'And how should it move?', 'start': 1902.353, 'duration': 1.581}, {'end': 1907.657, 'text': 'It needs to say this.x equals this.x plus something.', 'start': 1904.194, 'duration': 3.463}], 'summary': 'The flower constructor function lacks a move function; a new function called move should be written to adjust the position.', 'duration': 25.718, 'max_score': 1881.939, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y01881939.jpg'}, {'end': 2120.244, 'src': 'embed', 'start': 2095.918, 'weight': 3, 'content': [{'end': 2104.065, 'text': 'So basically, if any of the flowers hit the right edge, I want all the flowers to shift down and start moving to the left.', 'start': 2095.918, 'duration': 8.147}, {'end': 2110.33, 'text': "So if I go back into my flower object, I actually don't need this y direction variable.", 'start': 2104.665, 'duration': 5.665}, {'end': 2111.391, 'text': "I'm going to just get rid of that.", 'start': 2110.37, 'duration': 1.021}, {'end': 2116.455, 'text': "And I'm going to say this.shiftDown.", 'start': 2112.652, 'duration': 3.803}, {'end': 2119.284, 'text': 'equals function.', 'start': 2118.163, 'duration': 1.121}, {'end': 2120.244, 'text': 'and what do I do here?', 'start': 2119.284, 'duration': 0.96}], 'summary': 'Flowers shift down and start moving left if hitting right edge.', 'duration': 24.326, 'max_score': 2095.918, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y02095918.jpg'}, {'end': 2373.423, 'src': 'embed', 'start': 2344.058, 'weight': 4, 'content': [{'end': 2346.84, 'text': "now. the problem is, when I let go of the key, It's still moving now.", 'start': 2344.058, 'duration': 2.782}, {'end': 2351.063, 'text': 'this might be the interaction you want for some games and some things, but probably not this one.', 'start': 2346.84, 'duration': 4.223}, {'end': 2362.272, 'text': 'I. what I want to do now this is actually quite easy is I just want to add the key released and And all I have to do now is ship.setdir 0,', 'start': 2351.063, 'duration': 11.209}, {'end': 2364.114, 'text': 'because when I lift the key, stop moving.', 'start': 2362.272, 'duration': 1.842}, {'end': 2370.54, 'text': "And I could check which key was released, but this I can say any key that's released, stop moving.", 'start': 2364.775, 'duration': 5.765}, {'end': 2373.423, 'text': 'And so now we can see this.', 'start': 2371.641, 'duration': 1.782}], 'summary': 'The issue of the key not stopping movement when released was resolved by adding a key release function, resulting in the desired behavior of stopping movement when any key is released.', 'duration': 29.365, 'max_score': 2344.058, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y02344058.jpg'}], 'start': 1819.196, 'title': 'Space invaders game development and programming', 'summary': 'Covers the development of a space invaders game, presenting a basic core idea in 30 minutes and adding features such as moving invaders and improving ship interaction. it also discusses adding functionality to the flower constructor function, including implementing movement, checking for edge collisions, and enabling seamless key interaction, resulting in a space invaders-like game with flowers.', 'chapters': [{'end': 1881.939, 'start': 1819.196, 'title': 'Space invaders game development', 'summary': 'Discusses the development of a space invaders game, with a basic core idea presented in 30 minutes, and the plan to add features such as moving invaders and improving ship interaction.', 'duration': 62.743, 'highlights': ['The chapter discusses the development of a Space Invaders game, with a basic core idea presented in 30 minutes.', 'The plan to add features such as moving invaders and improving ship interaction is outlined.', 'The speaker encourages viewers to attempt implementing new features themselves before watching how it is done.', 'The speaker expresses gratitude to viewers for watching the video 30 minutes in.']}, {'end': 2443.314, 'start': 1881.939, 'title': 'Programming space invaders with flowers', 'summary': 'Discusses adding functionality to the flower constructor function, including implementing movement, checking for edge collisions, and enabling seamless key interaction, ultimately resulting in a space invaders-like game with flowers.', 'duration': 561.375, 'highlights': ['Implemented movement functionality by adding a function called move to the flower constructor, enabling the flowers to move together. The flower constructor function is updated with a move function to enable the flowers to move together, enhancing the game dynamics.', "Developed logic to check for edge collisions, causing all flowers to shift down and move in a different direction when hitting an edge. A function is created to check for edge collisions, resulting in all flowers shifting down and changing direction when hitting an edge, enhancing the game's mechanics.", 'Enhanced key interaction by implementing continuous movement when a key is pressed and stopping movement when the key is released. Improved key interaction by enabling continuous movement when a key is pressed and stopping movement when the key is released, enhancing the gameplay experience.']}], 'duration': 624.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/biN3v3ef-Y0/pics/biN3v3ef-Y01819196.jpg', 'highlights': ['The chapter discusses the development of a Space Invaders game, with a basic core idea presented in 30 minutes.', 'The plan to add features such as moving invaders and improving ship interaction is outlined.', 'Implemented movement functionality by adding a function called move to the flower constructor, enabling the flowers to move together.', 'Developed logic to check for edge collisions, causing all flowers to shift down and move in a different direction when hitting an edge.', 'Enhanced key interaction by implementing continuous movement when a key is pressed and stopping movement when the key is released.']}], 'highlights': ["The host plans to create a game called 'Flower Invaders' using JavaScript and p5.js, aiming to replace aliens with flowers and bullets with water to provide a relaxed and meditative programming experience.", "The game will feature simple shapes to represent the elements, such as flowers instead of aliens and water instead of bullets, in the classic Atari game 'Space Invaders'.", "Creating a spaceship object with a constructor function that automatically starts in the center of the window The ship's x value is set to width divided by 2 for automatic centering; a rectangle is used to represent the ship at the bottom of the window, positioned 20 pixels up.", 'Using arrays for flowers and water The plan includes the use of arrays for flowers and water in the flower invader program to organize the code effectively.', 'The process of adding flower objects to a JavaScript program is detailed, including creating a new file for the flower object and defining its properties like x and y coordinates and color, with a focus on creating a visually appealing design.', 'Implementing array to generate multiple flower objects and using constructor arguments for positioning The chapter emphasizes the use of an array to create multiple flower objects and demonstrates the implementation of constructor arguments for positioning, resulting in the display of multiple flowers at different locations.', 'Creation of water droplets to be emitted from the flowers The chapter starts the process of creating water droplets by introducing a new file for handling the water droplets, defining their appearance and color, and ensuring their inclusion in the HTML file.', 'Utilizing JavaScript constructor function for creating and displaying flower objects The chapter highlights the use of a JavaScript constructor function to create and display flower objects, demonstrating the process by incorporating a new flower object and displaying it in the Sketch environment.', 'Implementing the functionality to add multiple drops when the space bar is pressed The code is designed to create a new drop object and add it to the drops array whenever the user hits the space bar, allowing for the dynamic addition of drops.', 'Creating interactive programming for moving drops and flowers The chapter focuses on creating interactive programming for moving drops and flowers to demonstrate game development.', 'Implementing collision detection between drops and flowers The chapter emphasizes the implementation of collision detection between drops and flowers, aiming to trigger events such as making the flowers grow when watered and causing the drops to disappear upon hitting the flowers.', 'The concept of setting a flag in an object to mark it for deletion is explained, demonstrating effective array management techniques in JavaScript.', 'The chapter discusses the development of a Space Invaders game, with a basic core idea presented in 30 minutes.', 'The plan to add features such as moving invaders and improving ship interaction is outlined.', 'Implemented movement functionality by adding a function called move to the flower constructor, enabling the flowers to move together.', 'Developed logic to check for edge collisions, causing all flowers to shift down and move in a different direction when hitting an edge.', 'Enhanced key interaction by implementing continuous movement when a key is pressed and stopping movement when the key is released.']}