title
Intro to Game Development with JavaScript - Full Tutorial

description
An introduction to game development tutorial using vanilla JavaScript and HTML5 canvas. Build a complete brick-breaker game while learning the fundamentals of game development. 💻 Code / Completed Project: https://codesandbox.io/s/z2pqr9620m ⭐️ Course Contents ⭐️ ⌨️ (00:00) Introduction ⌨️ (00:32) Project Setup and Canvas ⌨️ (02:07) Drawing on the Canvas ⌨️ (04:25) Clearing the Canvas ⌨️ (05:45) Creating the Player's Paddle ⌨️ (11:42) The Game Loop ⌨️ (15:47) Handling Keyboard Input ⌨️ (17:56) Moving the Paddle ⌨️ (21:36) Stopping the Paddle ⌨️ (23:10) Drawing the Ball Image ⌨️ (26:59) Moving the Ball ⌨️ (32:11) Refactoring to the Game Class ⌨️ (38:54) Collision Detection between the Ball and Paddle ⌨️ (43:19) Loading Bricks ⌨️ (46:24) Building Levels ⌨️ (51:22) Collision Detection with Bricks ⌨️ (56:54) Pause Screen ⌨️ (1:02:08) A Simple Start Menu ⌨️ (1:06:09) Game Over ⌨️ (1:10:13) Completing Levels 🎥 Tutorial from Crhis Perko. Check out his YouTube channel: https://www.youtube.com/channel/UCraxnACLukXNgBnCq1zQnNg 🔗 Chris Perko's blog: https://chrisperko.net 🐦 Chris on Twitter: https://twitter.com/chrisjperko

detail
{'title': 'Intro to Game Development with JavaScript - Full Tutorial', 'heatmap': [{'end': 642.548, 'start': 549.09, 'weight': 1}, {'end': 1060.184, 'start': 1005.578, 'weight': 0.825}, {'end': 1152.707, 'start': 1096.494, 'weight': 0.74}], 'summary': 'This tutorial covers game development with javascript and html5 canvas, including collision detection, game loop, fps, paddle movement, drawing images, ball creation and movement, code refactoring, brick collision, level design, reusing collision detection, pausing the game, game states, and game progress with menu screen and level progression.', 'chapters': [{'end': 264.259, 'segs': [{'end': 44.448, 'src': 'embed', 'start': 0.409, 'weight': 0, 'content': [{'end': 3.63, 'text': "Hey guys, welcome to a new series that I'm super excited to get started.", 'start': 0.409, 'duration': 3.221}, {'end': 5.77, 'text': "It's the Introduction to Game Development.", 'start': 4.05, 'duration': 1.72}, {'end': 13.592, 'text': "In this series we're going to cover a lot of basic topics like collision detection, the game loop, handling different frames per second,", 'start': 6.35, 'duration': 7.242}, {'end': 15.772, 'text': "all kinds of cool issues that we're going to get into.", 'start': 13.592, 'duration': 2.18}, {'end': 19.733, 'text': "It's all going to be in just vanilla JavaScript, no third party libraries or framework.", 'start': 16.232, 'duration': 3.501}, {'end': 25.414, 'text': "All we're going to use is the HTML5 canvas and we're going to be drawing it directly on the browser.", 'start': 20.093, 'duration': 5.321}, {'end': 29.257, 'text': 'So if you know just a little bit of JavaScript, you should be able to follow it just fine.', 'start': 25.874, 'duration': 3.383}, {'end': 31.138, 'text': 'Have fun and enjoy the series.', 'start': 29.837, 'duration': 1.301}, {'end': 38.363, 'text': "So we're going to be using code-sandbox.io for this project.", 'start': 35.381, 'duration': 2.982}, {'end': 43.047, 'text': 'This would be a good way to use multiple JavaScript files in one project.', 'start': 38.724, 'duration': 4.323}, {'end': 44.448, 'text': "Let's go ahead and get started here.", 'start': 43.447, 'duration': 1.001}], 'summary': 'Introduction to game development series covers basic topics like collision detection, game loop, and handling different frames per second using vanilla javascript and html5 canvas, accessible with just a little bit of javascript knowledge. project will be using code-sandbox.io.', 'duration': 44.039, 'max_score': 0.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z0409.jpg'}, {'end': 180.001, 'src': 'embed', 'start': 111.724, 'weight': 1, 'content': [{'end': 114.047, 'text': "And let's give the canvas itself a width and a height.", 'start': 111.724, 'duration': 2.323}, {'end': 119.372, 'text': "So let's do width of 800 pixels and a height of 600 pixels.", 'start': 114.727, 'duration': 4.645}, {'end': 122.395, 'text': 'So there you go.', 'start': 119.392, 'duration': 3.003}, {'end': 124.637, 'text': 'Now you can see we have our game screen here.', 'start': 122.435, 'duration': 2.202}, {'end': 126.279, 'text': 'And this is what we will draw our game in.', 'start': 124.757, 'duration': 1.522}, {'end': 133.385, 'text': 'So we now have our canvas here.', 'start': 131.365, 'duration': 2.02}, {'end': 136.006, 'text': "Let's get rid of this guy.", 'start': 134.546, 'duration': 1.46}, {'end': 140.267, 'text': "Let's learn how to draw something on the canvas.", 'start': 137.286, 'duration': 2.981}, {'end': 143.167, 'text': "So let's go into our index.js file.", 'start': 140.287, 'duration': 2.88}, {'end': 146.308, 'text': "Let's first grab the canvas.", 'start': 145.108, 'duration': 1.2}, {'end': 153.069, 'text': "So let's do let canvas equals document.getElementById.", 'start': 146.448, 'duration': 6.621}, {'end': 156.37, 'text': "And we're looking for the game screen.", 'start': 153.929, 'duration': 2.441}, {'end': 161.645, 'text': 'And we need the context of the canvas.', 'start': 158.743, 'duration': 2.902}, {'end': 169.532, 'text': "So next we'll say let context equal canvas dot get context.", 'start': 164.027, 'duration': 5.505}, {'end': 173.896, 'text': "And we're going to be using two dimensional context here.", 'start': 170.353, 'duration': 3.543}, {'end': 180.001, 'text': 'The context gives us a rendering context for actually drawing to the canvas.', 'start': 175.457, 'duration': 4.544}], 'summary': 'Setting canvas width to 800px and height to 600px for game screen.', 'duration': 68.277, 'max_score': 111.724, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z0111724.jpg'}, {'end': 264.259, 'src': 'embed', 'start': 235.065, 'weight': 3, 'content': [{'end': 246.688, 'text': "So if we do ctx.fillrect, let's do another one at 200, 200, and make it a little bit smaller, 50 by 50, that square is also going to be red.", 'start': 235.065, 'duration': 11.623}, {'end': 251.929, 'text': 'If you want it to be blue, we have to update the fill style to 00F.', 'start': 246.888, 'duration': 5.041}, {'end': 256.591, 'text': 'And now that one is going to be blue.', 'start': 255.29, 'duration': 1.301}, {'end': 259.014, 'text': 'So the fill style sets the fill style.', 'start': 257.072, 'duration': 1.942}, {'end': 264.259, 'text': "And then you're going to fill a rectangle with that style that you've recently specified.", 'start': 259.514, 'duration': 4.745}], 'summary': 'Using ctx.fillrect to create red and blue rectangles in a canvas.', 'duration': 29.194, 'max_score': 235.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z0235065.jpg'}], 'start': 0.409, 'title': 'Game development introduction and html5 canvas', 'summary': 'Introduces game development covering collision detection, game loop, and fps using vanilla javascript and html5 canvas. it explains setting up html5 canvas, defining dimensions, obtaining canvas context, and drawing shapes using fillrect method in different colors.', 'chapters': [{'end': 76.328, 'start': 0.409, 'title': 'Introduction to game development', 'summary': 'Introduces the series on introduction to game development, covering basic topics like collision detection, game loop, and handling different frames per second using vanilla javascript and html5 canvas, with the use of code-sandbox.io for the project.', 'duration': 75.919, 'highlights': ['The series covers basic topics like collision detection, game loop, and handling different frames per second using vanilla JavaScript and HTML5 canvas, with no third party libraries or framework.', 'The project will be using code-sandbox.io for a good way to use multiple JavaScript files in one project.', 'The chapter emphasizes the use of vanilla JavaScript and HTML5 canvas, making it accessible to those with just a little bit of JavaScript knowledge.']}, {'end': 264.259, 'start': 78.59, 'title': 'Creating html5 canvas and drawing shapes', 'summary': 'Explains setting up an html5 canvas for game development, defining its dimensions, obtaining the canvas context, and drawing shapes using fillrect method in different colors.', 'duration': 185.669, 'highlights': ['The canvas is set with a width of 800 pixels and a height of 600 pixels, providing a designated area for game rendering.', 'The process of obtaining the canvas context is detailed, emphasizing the use of a two-dimensional context for drawing on the canvas.', 'The fillrect method is utilized to draw shapes on the canvas, demonstrating the creation of squares at specified coordinates and dimensions, along with the ability to alter their colors using the fill style.']}], 'duration': 263.85, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z0409.jpg', 'highlights': ['The series covers basic topics like collision detection, game loop, and handling different frames per second using vanilla JavaScript and HTML5 canvas, with no third party libraries or framework.', 'The canvas is set with a width of 800 pixels and a height of 600 pixels, providing a designated area for game rendering.', 'The process of obtaining the canvas context is detailed, emphasizing the use of a two-dimensional context for drawing on the canvas.', 'The fillrect method is utilized to draw shapes on the canvas, demonstrating the creation of squares at specified coordinates and dimensions, along with the ability to alter their colors using the fill style.', 'The project will be using code-sandbox.io for a good way to use multiple JavaScript files in one project.', 'The chapter emphasizes the use of vanilla JavaScript and HTML5 canvas, making it accessible to those with just a little bit of JavaScript knowledge.']}, {'end': 657.816, 'segs': [{'end': 351.834, 'src': 'embed', 'start': 268.623, 'weight': 0, 'content': [{'end': 270.224, 'text': "Next, let's talk about clearing the screen.", 'start': 268.623, 'duration': 1.601}, {'end': 273.808, 'text': "If you notice here, we're drawing these two squares on here.", 'start': 271.605, 'duration': 2.203}, {'end': 282.264, 'text': "If I update this, let's move it to 220.", 'start': 274.528, 'duration': 7.736}, {'end': 284.025, 'text': 'You see that it turned into like a rectangle.', 'start': 282.264, 'duration': 1.761}, {'end': 286.387, 'text': 'It kind of stretched.', 'start': 284.045, 'duration': 2.342}, {'end': 287.828, 'text': '0 to 40.', 'start': 286.407, 'duration': 1.421}, {'end': 288.308, 'text': 'Same thing.', 'start': 287.828, 'duration': 0.48}, {'end': 290.51, 'text': "Now, it's not actually stretching.", 'start': 288.949, 'duration': 1.561}, {'end': 296.854, 'text': "What's happening is every time you redraw onto the canvas, what was previously on the canvas is still there.", 'start': 290.55, 'duration': 6.304}, {'end': 305.946, 'text': "So when you're working with a game where objects are moving around on the screen, you want to make sure you clear what was previously there before.", 'start': 299.204, 'duration': 6.742}, {'end': 310.627, 'text': "So all we want to do is we're just going to say CTX dot clear rect.", 'start': 306.746, 'duration': 3.881}, {'end': 312.767, 'text': "So it's going to clear everything on the screen.", 'start': 311.047, 'duration': 1.72}, {'end': 315.548, 'text': 'But you have to give it an area that you want to clear.', 'start': 313.407, 'duration': 2.141}, {'end': 318.028, 'text': "So we're going to start at 0, 0.", 'start': 316.168, 'duration': 1.86}, {'end': 322.11, 'text': "And we're going to do the whole screen, which was 800 wide by 600 tall.", 'start': 318.029, 'duration': 4.081}, {'end': 332.686, 'text': 'So now if something gets updated, 350, 360, this is actually going to move on the screen.', 'start': 324.01, 'duration': 8.676}, {'end': 335.608, 'text': "You're not going to have what was previously there.", 'start': 333.627, 'duration': 1.981}, {'end': 343.971, 'text': 'So this is going to be a very important part of our game to make sure we clear it between every frame.', 'start': 339.929, 'duration': 4.042}, {'end': 351.834, 'text': "Now we know how to draw to the screen, let's first start working on our paddle.", 'start': 348.233, 'duration': 3.601}], 'summary': 'Clear the canvas to prevent overlap, ensuring smooth screen updates for game development.', 'duration': 83.211, 'max_score': 268.623, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z0268623.jpg'}, {'end': 510.498, 'src': 'embed', 'start': 446.711, 'weight': 2, 'content': [{'end': 450.333, 'text': "we'll pass this into our paddle class when we want to create it.", 'start': 446.711, 'duration': 3.622}, {'end': 456.318, 'text': 'so our paddle is going to take a game width and a game height.', 'start': 450.333, 'duration': 5.985}, {'end': 463.763, 'text': 'So the position of the paddle needs to be in the center of the screen.', 'start': 460.402, 'duration': 3.361}, {'end': 466.364, 'text': "So let's see here.", 'start': 465.143, 'duration': 1.221}, {'end': 471.405, 'text': "Let's say this.position equals, and I like to make the position an object.", 'start': 466.384, 'duration': 5.021}, {'end': 479.268, 'text': 'That way we can say position x is this position, position y is this position,', 'start': 472.446, 'duration': 6.822}, {'end': 486.59, 'text': 'and then we can just update this by saying something like this.position.x, and you can update it.', 'start': 479.268, 'duration': 7.322}, {'end': 490.982, 'text': "So let's go with this right now.", 'start': 488.8, 'duration': 2.182}, {'end': 495.225, 'text': "Y, we're going to be at the very bottom of the screen, but a little bit above it.", 'start': 491.002, 'duration': 4.223}, {'end': 507.215, 'text': "So we want to say gameHeight minus this.height minus how much do we want off the bottom? Let's just say 10 pixels.", 'start': 495.345, 'duration': 11.87}, {'end': 510.498, 'text': "I'll explain this in a little more detail once we finish it.", 'start': 508.416, 'duration': 2.082}], 'summary': 'Creating a paddle with position, width, and height for game screen.', 'duration': 63.787, 'max_score': 446.711, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z0446711.jpg'}, {'end': 642.548, 'src': 'heatmap', 'start': 549.09, 'weight': 1, 'content': [{'end': 551.072, 'text': "We're going to say we're going to have a paddle here.", 'start': 549.09, 'duration': 1.982}, {'end': 552.252, 'text': "It's going to be a new paddle.", 'start': 551.092, 'duration': 1.16}, {'end': 555.154, 'text': 'And it takes in the game width and game height.', 'start': 553.293, 'duration': 1.861}, {'end': 559.237, 'text': 'So game width, game height.', 'start': 555.755, 'duration': 3.482}, {'end': 563.44, 'text': 'And we just need to say paddle.draw.', 'start': 561.639, 'duration': 1.801}, {'end': 567.913, 'text': "Now it's giving us an error because it doesn't know what paddle is.", 'start': 565.011, 'duration': 2.902}, {'end': 572.357, 'text': 'So on our paddle class, we need to export this.', 'start': 568.934, 'duration': 3.423}, {'end': 576, 'text': 'So export default class paddle.', 'start': 572.377, 'duration': 3.623}, {'end': 578.122, 'text': "So now we're exporting this.", 'start': 576.961, 'duration': 1.161}, {'end': 588.31, 'text': 'So in our index.js file, we can import paddle from source paddles.', 'start': 578.482, 'duration': 9.828}, {'end': 597.609, 'text': "Alright, so now that this file knows what paddle is, we're instantiating it, and then we're going to say draw.", 'start': 590.444, 'duration': 7.165}, {'end': 600.591, 'text': 'But draw needs to have the context of our game.', 'start': 597.909, 'duration': 2.682}, {'end': 603.913, 'text': 'There we go, so we have our paddle drawn.', 'start': 602.432, 'duration': 1.481}, {'end': 608.236, 'text': 'Now let me go back and explain how we calculated this.', 'start': 604.173, 'duration': 4.063}, {'end': 611.898, 'text': 'So we want this to be in the middle of the screen.', 'start': 610.337, 'duration': 1.561}, {'end': 614.82, 'text': "Let's think about the Y position first.", 'start': 612.558, 'duration': 2.262}, {'end': 618.222, 'text': 'The square is drawn from the top left corner.', 'start': 616.141, 'duration': 2.081}, {'end': 623.683, 'text': 'So, if we want this to be at the bottom of the screen but off the page by about 10 pixels,', 'start': 618.802, 'duration': 4.881}, {'end': 631.565, 'text': 'what we need to do is we need to take the game height so 800, which will be right down here at the bottom, move it up the height of the square,', 'start': 623.683, 'duration': 7.882}, {'end': 636.586, 'text': 'which is 30, and then subtract 10 to give it just that little bit of buffer.', 'start': 631.565, 'duration': 5.021}, {'end': 642.548, 'text': 'So game height minus this height minus 10 puts it right here off the bottom of the page.', 'start': 637.407, 'duration': 5.141}], 'summary': 'Creating and positioning a new paddle for the game using calculated coordinates and class export/import.', 'duration': 93.458, 'max_score': 549.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z0549090.jpg'}], 'start': 268.623, 'title': 'Canvas drawing fundamentals', 'summary': 'Covers clearing the canvas to prevent overlap and demonstrates using ctx.clearrect at 0,0. it also explains positioning and drawing a paddle, specifying its dimensions and position on the screen.', 'chapters': [{'end': 318.028, 'start': 268.623, 'title': 'Clearing the screen in canvas', 'summary': 'Discusses the importance of clearing the canvas in canvas drawing to prevent objects from overlapping, and demonstrates the use of ctx.clearrect to achieve this, starting at 0, 0.', 'duration': 49.405, 'highlights': ['The importance of clearing the canvas in canvas drawing to prevent objects from overlapping.', 'Demonstration of using CTX.clearRect to clear the canvas starting at 0, 0.']}, {'end': 657.816, 'start': 318.029, 'title': 'Paddle positioning and drawing', 'summary': 'Explains how to position and draw a paddle on the game screen, including setting its size, position, and drawing it in the center of the screen, with the paddle being 150 pixels wide, 30 pixels high, and positioned at the bottom, a little above it, and centered horizontally.', 'duration': 339.787, 'highlights': ['The paddle is positioned at the bottom of the screen, a little above it, with a height of 30 pixels and a width of 150 pixels.', "The paddle's x-position is calculated as half of the game width minus half of the paddle's width, ensuring it is centered horizontally on the screen.", "The y-position of the paddle is calculated as the game height minus the paddle's height minus 10 pixels, providing a buffer, and ensuring the paddle is positioned at the bottom of the screen."]}], 'duration': 389.193, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z0268623.jpg', 'highlights': ['Demonstration of using CTX.clearRect to clear the canvas starting at 0, 0.', 'The importance of clearing the canvas in canvas drawing to prevent objects from overlapping.', "The paddle's x-position is calculated as half of the game width minus half of the paddle's width, ensuring it is centered horizontally on the screen.", "The y-position of the paddle is calculated as the game height minus the paddle's height minus 10 pixels, providing a buffer, and ensuring the paddle is positioned at the bottom of the screen.", 'The paddle is positioned at the bottom of the screen, a little above it, with a height of 30 pixels and a width of 150 pixels.']}, {'end': 1388.66, 'segs': [{'end': 738.401, 'src': 'embed', 'start': 713.121, 'weight': 3, 'content': [{'end': 720.887, 'text': 'A game loop is something that runs every frame, updates all the objects, redraws them in their new position, and then moves on to the next frame.', 'start': 713.121, 'duration': 7.766}, {'end': 722.753, 'text': "So let's see what that would look like.", 'start': 721.752, 'duration': 1.001}, {'end': 731.337, 'text': 'Now, you would think you would just do a simple while loop and iterate over everything, redraw the paddle.', 'start': 723.433, 'duration': 7.904}, {'end': 738.401, 'text': "But in reality, that's not going to work well because you have to think about all the computers running at different speeds.", 'start': 732.938, 'duration': 5.463}], 'summary': 'Game loop updates and redraws objects each frame, accounting for varying computer speeds.', 'duration': 25.28, 'max_score': 713.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z0713121.jpg'}, {'end': 963.698, 'src': 'embed', 'start': 915.259, 'weight': 0, 'content': [{'end': 917.763, 'text': "So if no delta time is passed in, we'll just return.", 'start': 915.259, 'duration': 2.504}, {'end': 920.888, 'text': 'And now you can see that our paddle is moving across the screen.', 'start': 918.224, 'duration': 2.664}, {'end': 928.62, 'text': "All right, so let's just remove this, and we'll handle actually moving the paddle with inputs in another episode in the future.", 'start': 920.908, 'duration': 7.712}, {'end': 934.037, 'text': 'So just as a quick recap, we have our game loop that runs every frame.', 'start': 929.935, 'duration': 4.102}, {'end': 936.139, 'text': 'It calculates how much time has passed.', 'start': 934.598, 'duration': 1.541}, {'end': 938.12, 'text': 'It clears the screen.', 'start': 936.859, 'duration': 1.261}, {'end': 941.042, 'text': 'It updates the paddle, and then it redraws the paddle.', 'start': 938.8, 'duration': 2.242}, {'end': 945.644, 'text': "And then again, it calls the game loop again with the next frame's timestamp.", 'start': 941.342, 'duration': 4.302}, {'end': 955.55, 'text': "Now let's create a simple input handler to listen to a couple key events for moving the arrows left and right.", 'start': 950.387, 'duration': 5.163}, {'end': 958.532, 'text': 'These will be used to move the paddle left and right on the screen.', 'start': 956.111, 'duration': 2.421}, {'end': 961.097, 'text': "Let's create a new file.", 'start': 960.097, 'duration': 1}, {'end': 963.698, 'text': 'Call it input.js.', 'start': 962.357, 'duration': 1.341}], 'summary': 'Game loop updates and redraws paddle, plans for input handling in future episode.', 'duration': 48.439, 'max_score': 915.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z0915259.jpg'}, {'end': 1060.184, 'src': 'heatmap', 'start': 1005.578, 'weight': 0.825, 'content': [{'end': 1009.461, 'text': "And we're going to give it a function that passes the event.", 'start': 1005.578, 'duration': 3.883}, {'end': 1014.846, 'text': "And let's just alert the event.keyCode.", 'start': 1012.003, 'duration': 2.843}, {'end': 1021.45, 'text': 'In our index.js file, all we need to do is instantiate it before the game loop.', 'start': 1017.967, 'duration': 3.483}, {'end': 1023.832, 'text': 'So new input handler.', 'start': 1022.05, 'duration': 1.782}, {'end': 1031.117, 'text': 'If I push the left arrow key, we get 37.', 'start': 1023.852, 'duration': 7.265}, {'end': 1033.138, 'text': 'If I push the right arrow key, I get 39.', 'start': 1031.117, 'duration': 2.021}, {'end': 1035.26, 'text': "That's great.", 'start': 1033.138, 'duration': 2.122}, {'end': 1038.282, 'text': 'So now we just need to make a little switch here.', 'start': 1035.721, 'duration': 2.561}, {'end': 1045.496, 'text': "Event.keycode So we're going to do different things based on the key code.", 'start': 1040.044, 'duration': 5.452}, {'end': 1051.319, 'text': 'So if we have 37, this is going to move left.', 'start': 1045.596, 'duration': 5.723}, {'end': 1060.184, 'text': "And if we have 39, we're going to move right.", 'start': 1055.221, 'duration': 4.963}], 'summary': 'Creating a function to handle key events and move left/right based on key codes 37 and 39.', 'duration': 54.606, 'max_score': 1005.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z01005578.jpg'}, {'end': 1152.707, 'src': 'heatmap', 'start': 1096.494, 'weight': 0.74, 'content': [{'end': 1100.976, 'text': "And in our index.js file, let's pass the paddle to our input handler.", 'start': 1096.494, 'duration': 4.482}, {'end': 1106.177, 'text': 'All right, now we need to create the move left function on our paddle.', 'start': 1103.156, 'duration': 3.021}, {'end': 1108.938, 'text': "So let's say here move left.", 'start': 1107.078, 'duration': 1.86}, {'end': 1115.181, 'text': "And what's going to happen here? Let's say we have the paddle has a max speed.", 'start': 1110.559, 'duration': 4.622}, {'end': 1119.042, 'text': "Let's set it to 10.", 'start': 1116.861, 'duration': 2.181}, {'end': 1123.979, 'text': 'And the current speed that it is moving is 0.', 'start': 1119.042, 'duration': 4.937}, {'end': 1130.041, 'text': 'All right, so when we move left, we want this speed to be equal to negative max speed.', 'start': 1123.979, 'duration': 6.062}, {'end': 1133.482, 'text': "So it'll be moving at negative 10 pixels per second.", 'start': 1130.641, 'duration': 2.841}, {'end': 1142.024, 'text': 'In our update function, we now want to say this.position.x plus this.speed.', 'start': 1135.102, 'duration': 6.922}, {'end': 1147.466, 'text': 'So when we tell it to move left, the speed becomes negative 10.', 'start': 1143.084, 'duration': 4.382}, {'end': 1152.707, 'text': 'And then when we update, the x position gets moved a minus 10 amount.', 'start': 1147.466, 'duration': 5.241}], 'summary': 'Creating move left function for paddle with max speed of 10 pixels per second.', 'duration': 56.213, 'max_score': 1096.494, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z01096494.jpg'}, {'end': 1204.541, 'src': 'embed', 'start': 1169.151, 'weight': 4, 'content': [{'end': 1173.232, 'text': 'We want to make sure that it cannot leave the bounds of our game.', 'start': 1169.151, 'duration': 4.081}, {'end': 1185.78, 'text': "So what we'll say here is we'll say if this.position.x is less than 0, this.position.x will be set to 0.", 'start': 1175.052, 'duration': 10.728}, {'end': 1189.764, 'text': 'There we go.', 'start': 1185.78, 'duration': 3.984}, {'end': 1191.505, 'text': 'Now it stops when it hits the edge of the screen.', 'start': 1189.864, 'duration': 1.641}, {'end': 1195.149, 'text': "Now all we have to do is do our move right, and we'll be done.", 'start': 1192.606, 'duration': 2.543}, {'end': 1199.573, 'text': "So right here, we'll say petal.moveRight.", 'start': 1196.39, 'duration': 3.183}, {'end': 1204.541, 'text': 'Go into our paddle class, make a move right function.', 'start': 1201.158, 'duration': 3.383}], 'summary': 'Ensuring game object stays within screen bounds, setting x position to 0 when less than 0.', 'duration': 35.39, 'max_score': 1169.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z01169151.jpg'}], 'start': 658.636, 'title': 'Paddle movement and input handling', 'summary': 'Covers the game loop concept, illustrating paddle movement using delta time, and implementing input handling for moving the paddle within game screen boundaries.', 'chapters': [{'end': 938.12, 'start': 658.636, 'title': 'Game loop and paddle movement', 'summary': 'Explains the concept of a game loop, which runs every frame, updates all the objects, and redraws them in their new position, and then moves on to the next frame, while also demonstrating how to move the paddle on the screen using delta time and the game loop.', 'duration': 279.484, 'highlights': ['The concept of a game loop is introduced, which updates all objects and redraws them in their new positions every frame.', "Explanation of using delta time to update the paddle's position, ensuring it moves at a constant speed regardless of the computer's processing power.", "Demonstration of implementing the game loop by calculating delta time, passing it into the paddle's update function, and ensuring the paddle moves smoothly on the screen."]}, {'end': 1388.66, 'start': 938.8, 'title': 'Paddle movement and input handling', 'summary': 'Explains how to create an input handler to move a paddle left and right using key events, implementing movement functions, and ensuring the paddle stays within the game screen boundaries.', 'duration': 449.86, 'highlights': ["The chapter discusses creating an input handler to listen to key events for moving the paddle left and right, enabling control over the paddle's movement.", 'It details the implementation of movement functions for the paddle, specifying the speed and direction of movement based on key events, with a max speed of 7 pixels per second.', 'The explanation includes ensuring the paddle stays within the game screen boundaries by setting position constraints based on the game width and paddle width, preventing it from moving off-screen.']}], 'duration': 730.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z0658636.jpg', 'highlights': ['Demonstration of implementing the game loop with delta time for smooth paddle movement.', 'Explanation of using delta time to ensure constant paddle speed regardless of processing power.', 'Creation of input handler for paddle movement, specifying speed and direction based on key events.', 'Introduction of game loop concept, updating and redrawing objects in new positions every frame.', 'Implementation of position constraints to keep the paddle within game screen boundaries.']}, {'end': 1915.864, 'segs': [{'end': 1424.037, 'src': 'embed', 'start': 1393.755, 'weight': 4, 'content': [{'end': 1396.556, 'text': "All right, next, let's learn how we can draw an image onto our canvas.", 'start': 1393.755, 'duration': 2.801}, {'end': 1398.137, 'text': 'First, we need an image.', 'start': 1397.177, 'duration': 0.96}, {'end': 1401.819, 'text': "So let's go and create a new directory called Assets.", 'start': 1398.337, 'duration': 3.482}, {'end': 1406.941, 'text': "And maybe in there, we'll create a new folder called Images.", 'start': 1402.959, 'duration': 3.982}, {'end': 1412.484, 'text': "And in here, let's go ahead and upload a file.", 'start': 1408.222, 'duration': 4.262}, {'end': 1417.686, 'text': "Let's see, I have a ball.png file here.", 'start': 1412.504, 'duration': 5.182}, {'end': 1421.328, 'text': "I'm terrible at pixel art, so please forgive me.", 'start': 1419.207, 'duration': 2.121}, {'end': 1424.037, 'text': 'All right, so we have our ball.', 'start': 1423.137, 'duration': 0.9}], 'summary': 'Learn how to draw an image onto canvas using a ball.png file.', 'duration': 30.282, 'max_score': 1393.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z01393755.jpg'}, {'end': 1486.842, 'src': 'embed', 'start': 1455.875, 'weight': 1, 'content': [{'end': 1460.199, 'text': "So now that we have it here, even though you can't see it, we can grab it using this ID.", 'start': 1455.875, 'duration': 4.324}, {'end': 1464.523, 'text': "So let's go into our index.js file.", 'start': 1460.219, 'duration': 4.304}, {'end': 1467.425, 'text': "Let's see here.", 'start': 1466.504, 'duration': 0.921}, {'end': 1469.046, 'text': "Let's just put a spot here.", 'start': 1467.465, 'duration': 1.581}, {'end': 1471.969, 'text': "Images We'll say let ball.", 'start': 1469.226, 'duration': 2.743}, {'end': 1477.253, 'text': "I'll say image ball equals document.getElement by ID.", 'start': 1471.989, 'duration': 5.264}, {'end': 1481.677, 'text': "And we'll pass it the ID we gave it here.", 'start': 1477.714, 'duration': 3.963}, {'end': 1486.842, 'text': 'So we have the image.', 'start': 1486.141, 'duration': 0.701}], 'summary': 'Using the image id, we can grab it in index.js.', 'duration': 30.967, 'max_score': 1455.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z01455875.jpg'}, {'end': 1558.407, 'src': 'embed', 'start': 1520.477, 'weight': 0, 'content': [{'end': 1524.299, 'text': "So let's create a new file here, ball.js.", 'start': 1520.477, 'duration': 3.822}, {'end': 1530.441, 'text': 'And here we will export a default class of ball.', 'start': 1525.619, 'duration': 4.822}, {'end': 1535.383, 'text': "We're going to need a constructor.", 'start': 1531.602, 'duration': 3.781}, {'end': 1539.403, 'text': "And we're also going to need a draw function.", 'start': 1537.282, 'duration': 2.121}, {'end': 1543.223, 'text': 'And later we will also do an update function.', 'start': 1540.363, 'duration': 2.86}, {'end': 1546.624, 'text': 'That is to do later.', 'start': 1545.564, 'duration': 1.06}, {'end': 1551.285, 'text': 'All right, so the constructor, we need to get the image.', 'start': 1548.725, 'duration': 2.56}, {'end': 1558.407, 'text': "So we'll say this.image equals, and then we can grab this document, getElementById.", 'start': 1552.185, 'duration': 6.222}], 'summary': "Creating a new file 'ball.js' with a default class of 'ball' including a constructor and draw function.", 'duration': 37.93, 'max_score': 1520.477, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z01520477.jpg'}, {'end': 1682.84, 'src': 'embed', 'start': 1656.313, 'weight': 3, 'content': [{'end': 1660.695, 'text': "let's make sure everything still works alright.", 'start': 1656.313, 'duration': 4.382}, {'end': 1663.677, 'text': "let's move on to moving the ball.", 'start': 1660.695, 'duration': 2.982}, {'end': 1666.079, 'text': "let's go to our ball class.", 'start': 1663.677, 'duration': 2.402}, {'end': 1672.102, 'text': 'our update function is going to take a delta time, so we can know how far to move.', 'start': 1666.079, 'duration': 6.023}, {'end': 1676.018, 'text': "let's set the speed And let's just hard code it for now.", 'start': 1672.102, 'duration': 3.916}, {'end': 1678.598, 'text': "And we'll adjust it based on which direction it's moving later.", 'start': 1676.058, 'duration': 2.54}, {'end': 1682.84, 'text': "Let's give it an x speed and a y speed.", 'start': 1679.719, 'duration': 3.121}], 'summary': 'Code to move ball with x and y speed, adjustable later.', 'duration': 26.527, 'max_score': 1656.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z01656313.jpg'}, {'end': 1915.864, 'src': 'embed', 'start': 1870.175, 'weight': 2, 'content': [{'end': 1876.92, 'text': 'and if the position y is less than zero, the speed y gets reversed.', 'start': 1870.175, 'duration': 6.745}, {'end': 1882.944, 'text': 'Let me change this to speed x.', 'start': 1877.74, 'duration': 5.204}, {'end': 1885.065, 'text': "Alright, let's see if it bounces off the bottom wall here.", 'start': 1882.944, 'duration': 2.121}, {'end': 1888.486, 'text': 'There we go.', 'start': 1888.086, 'duration': 0.4}, {'end': 1891.429, 'text': "Can't quite see the edge of the canvas.", 'start': 1890.008, 'duration': 1.421}, {'end': 1900.877, 'text': 'All right, we need to adjust this just a little bit.', 'start': 1898.815, 'duration': 2.062}, {'end': 1908.744, 'text': 'On the y, we need to say if this position y plus this dot size is greater than the height.', 'start': 1901.598, 'duration': 7.146}, {'end': 1914.029, 'text': 'There we go.', 'start': 1913.649, 'duration': 0.38}, {'end': 1915.864, 'text': 'Same thing on the right.', 'start': 1915.003, 'duration': 0.861}], 'summary': 'Adjusting position y if less than zero, checking boundaries for y and x.', 'duration': 45.689, 'max_score': 1870.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z01870175.jpg'}], 'start': 1393.755, 'title': 'Drawing image onto canvas and creating and moving a ball', 'summary': 'Explains how to draw an image onto a canvas, create a directory for assets, load the image into html, use javascript to grab and draw the image onto the canvas, and refactor the process into its own class. it also discusses creating a ball class, setting its speed and position, updating its movement, drawing it on the canvas, adjusting its size, and handling collisions with the walls in a game world.', 'chapters': [{'end': 1656.313, 'start': 1393.755, 'title': 'Drawing image onto canvas', 'summary': 'Explains how to draw an image onto a canvas, including creating a directory for assets, loading the image into html, using javascript to grab and draw the image onto the canvas, and refactoring the process into its own class for cleaner implementation.', 'duration': 262.558, 'highlights': ['Creating a directory for assets and uploading the image file, ball.png.', "Loading the image into HTML using the 'image source' tag and hiding it from the web page.", "Using JavaScript to grab the image by its ID and drawing it onto the canvas using 'ctx.drawImage'.", 'Refactoring the process into its own class by creating a new file called ball.js, exporting a default class of ball, and implementing a constructor and a draw function.', "Cleaning up hard-coded values and implementing 'requestAnimationFrame' for the game loop."]}, {'end': 1915.864, 'start': 1656.313, 'title': 'Creating and moving a ball', 'summary': 'Discusses creating a ball class, setting its speed and position, updating its movement, drawing it on the canvas, adjusting its size, and handling collisions with the walls in a game world.', 'duration': 259.551, 'highlights': ['The ball class is created with properties such as speed, position, and size, enabling the movement and drawing of the ball on the canvas.', "The ball's movement is updated based on its speed and position, allowing it to move within the game world using delta time for calculations.", 'The size of the ball is set to 16, providing a standardized value for its appearance, which can be dynamically adjusted for power-ups.', "Collisions with the walls are handled by reversing the speed of the ball on the x and y axes when it reaches the game world's boundaries, ensuring it bounces off the walls effectively."]}], 'duration': 522.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z01393755.jpg', 'highlights': ['Refactoring the process into its own class by creating a new file called ball.js, exporting a default class of ball, and implementing a constructor and a draw function.', "Using JavaScript to grab the image by its ID and drawing it onto the canvas using 'ctx.drawImage'.", "Collisions with the walls are handled by reversing the speed of the ball on the x and y axes when it reaches the game world's boundaries, ensuring it bounces off the walls effectively.", "The ball's movement is updated based on its speed and position, allowing it to move within the game world using delta time for calculations.", 'Creating a directory for assets and uploading the image file, ball.png.']}, {'end': 2574.727, 'segs': [{'end': 1973.715, 'src': 'embed', 'start': 1945.059, 'weight': 1, 'content': [{'end': 1951.942, 'text': "like the ball might need to know where the paddle is we're starting to just chain on more and more parameters to these constructors.", 'start': 1945.059, 'duration': 6.883}, {'end': 1956.243, 'text': 'That is a sign that things need to be refactored and cleaned up a bit.', 'start': 1952.902, 'duration': 3.341}, {'end': 1957.424, 'text': "So let's take care of that.", 'start': 1956.543, 'duration': 0.881}, {'end': 1961.045, 'text': "Let's go ahead and create a new file.", 'start': 1958.624, 'duration': 2.421}, {'end': 1963.046, 'text': "We'll call it game.js.", 'start': 1962.005, 'duration': 1.041}, {'end': 1967.512, 'text': 'Export default class game.', 'start': 1965.251, 'duration': 2.261}, {'end': 1973.715, 'text': 'All right, so this guy is going to be in charge of managing all this for us.', 'start': 1969.373, 'duration': 4.342}], 'summary': 'Code needs refactoring and cleaning up to manage game parameters efficiently.', 'duration': 28.656, 'max_score': 1945.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z01945059.jpg'}, {'end': 2031.996, 'src': 'embed', 'start': 1997.495, 'weight': 2, 'content': [{'end': 2004.517, 'text': "So right here, we'll say this.gameWidth equals gameWidth, and this.gameHeight equals gameHeight.", 'start': 1997.495, 'duration': 7.022}, {'end': 2015.761, 'text': "All right? Now, instead of passing the ball and the paddle the gameWidth and gameHeight, we'll just pass it an instance of this.", 'start': 2006.998, 'duration': 8.763}, {'end': 2024.144, 'text': "Let's move this out into a new function.", 'start': 2021.063, 'duration': 3.081}, {'end': 2026.905, 'text': "We'll call it the start function.", 'start': 2025.024, 'duration': 1.881}, {'end': 2031.996, 'text': "So when we're ready for our game to start, we will instantiate these objects.", 'start': 2028.274, 'duration': 3.722}], 'summary': 'Setting game dimensions and creating new start function', 'duration': 34.501, 'max_score': 1997.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z01997495.jpg'}, {'end': 2142.403, 'src': 'embed', 'start': 2110.615, 'weight': 0, 'content': [{'end': 2115.196, 'text': 'All right, next we have this game loop trying to update and draw our objects.', 'start': 2110.615, 'duration': 4.581}, {'end': 2118.757, 'text': "So let's take this out.", 'start': 2115.596, 'duration': 3.161}, {'end': 2128.899, 'text': "And what if we just said game.update and game.draw? Those functions don't exist yet, so let's take care of that.", 'start': 2119.577, 'duration': 9.322}, {'end': 2134.76, 'text': "So we'll do an update and a draw function.", 'start': 2131.079, 'duration': 3.681}, {'end': 2142.403, 'text': "Now what we had before is we had paddle update, paddle draw, so let's just move these around.", 'start': 2137.642, 'duration': 4.761}], 'summary': 'Refactoring game loop to include update and draw functions.', 'duration': 31.788, 'max_score': 2110.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z02110615.jpg'}, {'end': 2419.845, 'src': 'embed', 'start': 2389.508, 'weight': 3, 'content': [{'end': 2400.437, 'text': 'Our update function currently updates the position of the ball and checks to see if it is hitting a wall on the left or right of the screen.', 'start': 2389.508, 'duration': 10.929}, {'end': 2404.761, 'text': 'And we also check to see if it hits a wall on the top or bottom.', 'start': 2401.338, 'duration': 3.423}, {'end': 2410.065, 'text': "So now let's check with the paddle.", 'start': 2408.083, 'duration': 1.982}, {'end': 2419.845, 'text': 'Now the ball is always going to collide with the paddle with the bottom of the ball hitting the top of the paddle.', 'start': 2415.424, 'duration': 4.421}], 'summary': 'Update function checks ball position, collision with walls, and paddle interaction.', 'duration': 30.337, 'max_score': 2389.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z02389508.jpg'}], 'start': 1916.766, 'title': 'Game code refactoring', 'summary': "Covers refactoring game code for efficiency by creating a new class 'game.js', updating game loop for efficient object handling, and collision handling between ball and paddle.", 'chapters': [{'end': 2101.35, 'start': 1916.766, 'title': 'Refactoring game code for efficiency', 'summary': "Discusses the process of refactoring code by creating a new class 'game.js' to manage game elements, removing the need to pass multiple parameters to constructors, and utilizing the 'start' function to instantiate game objects.", 'duration': 184.584, 'highlights': ['The need to refactor code becomes evident when chaining multiple parameters to constructors, as it indicates a need for cleanup and optimization.', "The creation of a new 'game.js' class to manage game elements eliminates the necessity of passing multiple parameters to constructors, enhancing code efficiency and organization.", "Utilizing the 'start' function to instantiate game objects streamlines the process and ensures proper initialization, leading to more efficient and manageable code."]}, {'end': 2574.727, 'start': 2110.615, 'title': 'Game loop refactoring and collision handling', 'summary': 'Discusses refactoring the game loop to update and draw game objects efficiently, handling collision between the ball and paddle, and utilizing the game class to manage game objects, with a focus on updating, drawing, and collision logic.', 'duration': 464.112, 'highlights': ['The game loop is refactored to efficiently update and draw game objects by creating update and draw functions for each object, passing delta time and context, and organizing all game objects into an array for easy management.', 'The collision handling between the ball and paddle is implemented by checking the position of the ball and paddle, reversing the speed and adjusting the position of the ball upon collision, and ensuring the ball hits within the bounds of the paddle for accurate collision detection.', "The game class is utilized to manage game objects by passing its instance to the objects for accessing necessary information, such as the paddle's position, enabling efficient coordination and interaction between game elements."]}], 'duration': 657.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z01916766.jpg', 'highlights': ['The game loop is refactored to efficiently update and draw game objects', "The creation of a new 'game.js' class enhances code efficiency and organization", "Utilizing the 'start' function streamlines the process and ensures proper initialization", 'The collision handling between the ball and paddle ensures accurate collision detection', 'The need to refactor code becomes evident when chaining multiple parameters to constructors']}, {'end': 3073.552, 'segs': [{'end': 2608.815, 'src': 'embed', 'start': 2578.208, 'weight': 1, 'content': [{'end': 2580.989, 'text': 'All right, it does pass through and hit the ground, which will end the game.', 'start': 2578.208, 'duration': 2.781}, {'end': 2584.69, 'text': "Now let's check the right side of the paddle just to make sure that is working as well.", 'start': 2581.009, 'duration': 3.681}, {'end': 2597.467, 'text': 'Alright, so we now have a basic collision between the ball and the paddle working and we can bounce the ball back towards the bricks that we will build soon.', 'start': 2588.922, 'duration': 8.545}, {'end': 2603.751, 'text': "Alright, let's introduce some bricks to the game.", 'start': 2601.85, 'duration': 1.901}, {'end': 2608.815, 'text': "As you can see, I've already loaded a brick PNG file here into our images folder.", 'start': 2604.332, 'duration': 4.483}], 'summary': 'Basic collision between ball and paddle working, introducing bricks to the game.', 'duration': 30.607, 'max_score': 2578.208, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z02578208.jpg'}, {'end': 2752, 'src': 'embed', 'start': 2707.662, 'weight': 0, 'content': [{'end': 2710.683, 'text': "In our game class, let's first import the brick.", 'start': 2707.662, 'duration': 3.021}, {'end': 2718.246, 'text': "Now let's create a new brick for an example.", 'start': 2716.166, 'duration': 2.08}, {'end': 2722.768, 'text': 'Give it a position.', 'start': 2722.088, 'duration': 0.68}, {'end': 2727.95, 'text': "And let's add it to our game objects.", 'start': 2726.51, 'duration': 1.44}, {'end': 2733.133, 'text': 'So we now have a brick loaded into our game.', 'start': 2731.212, 'duration': 1.921}, {'end': 2736.194, 'text': "Let's just see how easy it is to make lots of bricks.", 'start': 2734.033, 'duration': 2.161}, {'end': 2739.432, 'text': 'Our brick width was 52.', 'start': 2738.231, 'duration': 1.201}, {'end': 2742.574, 'text': "So let's do this.", 'start': 2739.432, 'duration': 3.142}, {'end': 2745.136, 'text': 'Let bricks equal a new array.', 'start': 2743.555, 'duration': 1.581}, {'end': 2752, 'text': "Let's do a loop of 10 times.", 'start': 2745.156, 'duration': 6.844}], 'summary': 'In the game class, bricks of width 52 are easily created and added to the game objects using a loop of 10 times.', 'duration': 44.338, 'max_score': 2707.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z02707662.jpg'}, {'end': 2860.181, 'src': 'embed', 'start': 2832.062, 'weight': 2, 'content': [{'end': 2838.787, 'text': 'So as you can see here, we have four arrays within the level array, each one corresponding to a row with ones and zeros.', 'start': 2832.062, 'duration': 6.725}, {'end': 2844.25, 'text': "So what I'm going to do here is any time there is a one, that'll become a brick.", 'start': 2839.487, 'duration': 4.763}, {'end': 2846.131, 'text': 'A zero is just going to be an empty space.', 'start': 2844.59, 'duration': 1.541}, {'end': 2851.155, 'text': "So for this first level, we'll have three rows of full bricks.", 'start': 2846.912, 'duration': 4.243}, {'end': 2854.257, 'text': "And in the top row, we'll just have some bricks here and there.", 'start': 2851.295, 'duration': 2.962}, {'end': 2860.181, 'text': 'Now we need a function to actually turn these levels into the bricks.', 'start': 2855.938, 'duration': 4.243}], 'summary': 'Four arrays in the level array with ones and zeros, creating three rows of full bricks in the first level.', 'duration': 28.119, 'max_score': 2832.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z02832062.jpg'}], 'start': 2578.208, 'title': 'Brick collision and level design', 'summary': 'Covers implementing collision between ball and paddle, creating varied brick objects, and developing levels using arrays for easy modification.', 'chapters': [{'end': 3073.552, 'start': 2578.208, 'title': 'Brick collision and level design', 'summary': "Covers implementing the collision between the ball and the paddle, creating brick objects with varied positions and arrangements, and developing different levels using arrays, allowing easy modification of the game's appearance and difficulty.", 'duration': 495.344, 'highlights': ["The chapter discusses implementing the collision between the ball and the paddle, enabling the ball to bounce back towards the bricks, setting the foundation for the game's mechanics.", 'The process of creating brick objects and populating the game world with a bunch of bricks is detailed, showcasing the ease of building multiple bricks using a loop and an array.', "The concept of defining levels using arrays, where each array corresponds to a row with ones and zeros representing brick and empty spaces, is introduced, allowing easy modification of the game's levels and appearance."]}], 'duration': 495.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z02578208.jpg', 'highlights': ['The process of creating brick objects and populating the game world with a bunch of bricks is detailed, showcasing the ease of building multiple bricks using a loop and an array.', "The chapter discusses implementing the collision between the ball and the paddle, enabling the ball to bounce back towards the bricks, setting the foundation for the game's mechanics.", "The concept of defining levels using arrays, where each array corresponds to a row with ones and zeros representing brick and empty spaces, is introduced, allowing easy modification of the game's levels and appearance."]}, {'end': 3412.542, 'segs': [{'end': 3135.102, 'src': 'embed', 'start': 3099.16, 'weight': 2, 'content': [{'end': 3103.223, 'text': "So I'd like to reuse this code, but it's best not to copy and paste it.", 'start': 3099.16, 'duration': 4.063}, {'end': 3104.604, 'text': "Let's put it someplace reusable.", 'start': 3103.263, 'duration': 1.341}, {'end': 3106.686, 'text': "Let's copy this.", 'start': 3105.946, 'duration': 0.74}, {'end': 3109.148, 'text': "Let's create a new file.", 'start': 3107.627, 'duration': 1.521}, {'end': 3111.41, 'text': "We'll call it collision detection.", 'start': 3110.309, 'duration': 1.101}, {'end': 3117.856, 'text': "Now let's just export a function.", 'start': 3116.596, 'duration': 1.26}, {'end': 3125.739, 'text': "And we'll need the ball and a game object.", 'start': 3122.758, 'duration': 2.981}, {'end': 3129.46, 'text': "Let's go ahead and paste our code in here.", 'start': 3127.999, 'duration': 1.461}, {'end': 3133.001, 'text': 'So we have the bottom of the ball.', 'start': 3131.64, 'duration': 1.361}, {'end': 3135.102, 'text': "We're also going to need the top of the ball.", 'start': 3133.481, 'duration': 1.621}], 'summary': 'Refactoring code for collision detection, reusing and exporting functions.', 'duration': 35.942, 'max_score': 3099.16, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z03099160.jpg'}, {'end': 3233.088, 'src': 'embed', 'start': 3205.772, 'weight': 3, 'content': [{'end': 3215.56, 'text': 'If the bottom of the ball is greater than or equal to the top of object and the top of the ball is less than or equal to the bottom of object,', 'start': 3205.772, 'duration': 9.788}, {'end': 3228.345, 'text': 'and the ball position x is greater than or equal to the left side of the object, and the ball position x, plus the ball size,', 'start': 3220.22, 'duration': 8.125}, {'end': 3233.088, 'text': "is less than or equal to the right side of the object, then we're going to do whatever we need to do.", 'start': 3228.345, 'duration': 4.743}], 'summary': 'Conditions for ball and object collision and action.', 'duration': 27.316, 'max_score': 3205.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z03205772.jpg'}, {'end': 3367.954, 'src': 'embed', 'start': 3275.484, 'weight': 0, 'content': [{'end': 3280.666, 'text': "We'll remove all of this and instead say if detectCollision.", 'start': 3275.484, 'duration': 5.182}, {'end': 3286.448, 'text': "We're going to pass it the ball, which is this, and the paddle, game.paddle.", 'start': 3280.686, 'duration': 5.762}, {'end': 3294.911, 'text': "Let's make sure that still works.", 'start': 3286.468, 'duration': 8.443}, {'end': 3298.753, 'text': 'And it does.', 'start': 3294.931, 'duration': 3.822}, {'end': 3302.01, 'text': "So that's a successful refactor.", 'start': 3300.629, 'duration': 1.381}, {'end': 3305.312, 'text': "Now it'll be easy for us to detect collision with the bricks.", 'start': 3302.91, 'duration': 2.402}, {'end': 3309.214, 'text': "Let's go into the brick class.", 'start': 3307.593, 'duration': 1.621}, {'end': 3311.075, 'text': "Let's go into our update function here.", 'start': 3309.234, 'duration': 1.841}, {'end': 3315.037, 'text': 'First we need to import our function.', 'start': 3313.436, 'duration': 1.601}, {'end': 3333.152, 'text': 'Then we will just say if detect collision between the ball and the object, which is the brick itself.', 'start': 3324.422, 'duration': 8.73}, {'end': 3338.835, 'text': "Let's tell the ball to reverse the y speed.", 'start': 3335.954, 'duration': 2.881}, {'end': 3347.539, 'text': "Let's check that out.", 'start': 3346.839, 'duration': 0.7}, {'end': 3352.482, 'text': "As you can see, it's bouncing off the bricks here at the top of our screen.", 'start': 3349.961, 'duration': 2.521}, {'end': 3358.429, 'text': "Now we need to just remove the brick from the game once it's been hit.", 'start': 3355.327, 'duration': 3.102}, {'end': 3367.954, 'text': "So I'm going to add a property here called markForDeletion.", 'start': 3359.029, 'duration': 8.925}], 'summary': 'Refactored code to detect collision and remove hit bricks.', 'duration': 92.47, 'max_score': 3275.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z03275484.jpg'}], 'start': 3073.592, 'title': 'Reusing collision detection code', 'summary': 'Discusses reusing collision detection code to detect collision between the ball and game objects, using specific parameters such as ball position, object position, and size. it also details the process of refactoring the collision detection function for the ball, enabling it to detect and interact with the paddle and bricks, resulting in successful collision and destruction of the bricks.', 'chapters': [{'end': 3233.088, 'start': 3073.592, 'title': 'Collision detection for game objects', 'summary': 'Discusses reusing collision detection code to detect collision between the ball and game objects, using specific parameters such as ball position, object position, and size.', 'duration': 159.496, 'highlights': ['The chapter discusses reusing collision detection code to detect collision between the ball and game objects, using specific parameters such as ball position, object position, and size.', "The code for collision detection is placed in a separate file named 'collision detection' to make it reusable.", 'Parameters for collision detection include the bottom of the ball, top of the ball, top of the game object, left side of the game object, right side of the game object, and bottom of the game object.']}, {'end': 3412.542, 'start': 3233.768, 'title': 'Ball collision refactor', 'summary': 'Details the process of refactoring the collision detection function for the ball, enabling it to detect and interact with the paddle and bricks, resulting in successful collision and destruction of the bricks.', 'duration': 178.774, 'highlights': ['The function detectCollision is refactored to enable collision detection between the ball and the paddle, resulting in successful interaction between the two.', 'The process of enabling collision detection between the ball and the bricks is outlined, including the implementation of markForDeletion property for the bricks upon collision, resulting in successful destruction of the bricks.', "The game's update function is modified to remove the bricks marked for deletion, resulting in successful removal of the destroyed bricks from the game."]}], 'duration': 338.95, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z03073592.jpg', 'highlights': ['The function detectCollision is refactored to enable collision detection between the ball and the paddle, resulting in successful interaction between the two.', 'The process of enabling collision detection between the ball and the bricks is outlined, including the implementation of markForDeletion property for the bricks upon collision, resulting in successful destruction of the bricks.', "The code for collision detection is placed in a separate file named 'collision detection' to make it reusable.", 'Parameters for collision detection include the bottom of the ball, top of the ball, top of the game object, left side of the game object, right side of the game object, and bottom of the game object.', 'The chapter discusses reusing collision detection code to detect collision between the ball and game objects, using specific parameters such as ball position, object position, and size.']}, {'end': 3727.325, 'segs': [{'end': 3600.435, 'src': 'embed', 'start': 3497.832, 'weight': 0, 'content': [{'end': 3500.634, 'text': "Let's go ahead and create here a constant.", 'start': 3497.832, 'duration': 2.802}, {'end': 3505.818, 'text': "And we're going to define all of our states.", 'start': 3504.037, 'duration': 1.781}, {'end': 3508.04, 'text': "So we'll have paused.", 'start': 3506.499, 'duration': 1.541}, {'end': 3511.322, 'text': 'Give that a value of zero.', 'start': 3510.141, 'duration': 1.181}, {'end': 3513.884, 'text': 'Running for when the game is running.', 'start': 3512.443, 'duration': 1.441}, {'end': 3518.881, 'text': 'the menu, and also game over.', 'start': 3516.138, 'duration': 2.743}, {'end': 3522.505, 'text': 'All right.', 'start': 3518.901, 'duration': 3.604}, {'end': 3524.847, 'text': "So we're only going to work with pause and running for today.", 'start': 3522.605, 'duration': 2.242}, {'end': 3532.335, 'text': 'When we start a game, we want to set the game state equal to game state running.', 'start': 3526.229, 'duration': 6.106}, {'end': 3535.498, 'text': "Later, we'll start the game at the menu.", 'start': 3533.917, 'duration': 1.581}, {'end': 3537.861, 'text': "But for now, we're going to keep it the way it's running right now.", 'start': 3535.538, 'duration': 2.323}, {'end': 3545.304, 'text': 'Next, we need to toggle pause.', 'start': 3543.743, 'duration': 1.561}, {'end': 3558.949, 'text': "So if this game state is paused, we're going to set the game state to running.", 'start': 3545.524, 'duration': 13.425}, {'end': 3564.071, 'text': "So if it's paused and they click the pause button, it'll unpause the game.", 'start': 3560.71, 'duration': 3.361}, {'end': 3571.874, 'text': 'Otherwise, we are going to pause the game.', 'start': 3566.652, 'duration': 5.222}, {'end': 3578.722, 'text': "Now right now it's not doing anything because we're not telling the game to stop running when we hit the pause button.", 'start': 3573.959, 'duration': 4.763}, {'end': 3593.331, 'text': "So inside our update function, let's just say if this game state is paused, we're not going to update anything.", 'start': 3578.742, 'duration': 14.589}, {'end': 3598.154, 'text': 'So right there I just hit the escape key and the game is frozen.', 'start': 3595.372, 'duration': 2.782}, {'end': 3600.435, 'text': 'Hit it again and it starts running again.', 'start': 3598.734, 'duration': 1.701}], 'summary': 'Creating game states, defining paused and running, toggling pause, and updating game state.', 'duration': 102.603, 'max_score': 3497.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z03497832.jpg'}, {'end': 3681.09, 'src': 'embed', 'start': 3638.39, 'weight': 3, 'content': [{'end': 3644.773, 'text': "Let's do an RGBA so we can do black but with 50% opacity so you can see through it.", 'start': 3638.39, 'duration': 6.383}, {'end': 3648.095, 'text': "And let's fill it.", 'start': 3647.475, 'duration': 0.62}, {'end': 3650.056, 'text': 'So there we go.', 'start': 3649.536, 'duration': 0.52}, {'end': 3652.317, 'text': "But we only want this to show when we're paused.", 'start': 3650.216, 'duration': 2.101}, {'end': 3660.241, 'text': "So let's just do if this game state is paused.", 'start': 3652.637, 'duration': 7.604}, {'end': 3671.245, 'text': 'And now if I pause the game, it shades it gray.', 'start': 3668.123, 'duration': 3.122}, {'end': 3673.186, 'text': 'Unpause it, and it goes back to white.', 'start': 3671.885, 'duration': 1.301}, {'end': 3675.667, 'text': "Let's add a little bit of text as well.", 'start': 3674.346, 'duration': 1.321}, {'end': 3681.09, 'text': "Let's create a font of 30 pixels Arial.", 'start': 3678.168, 'duration': 2.922}], 'summary': 'Using rgba to create a black color with 50% opacity, conditional display based on game state, and adding 30-pixel arial text.', 'duration': 42.7, 'max_score': 3638.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z03638390.jpg'}], 'start': 3417.005, 'title': 'Pausing game and game states', 'summary': "Covers implementing game pausing using the escape key, creating game states, and toggling between paused and running game states. it also demonstrates creating a display to show the game is paused, including shading the screen with 50% opacity and adding a 'paused' text.", 'chapters': [{'end': 3600.435, 'start': 3417.005, 'title': 'Pausing game and game states', 'summary': 'Introduces the implementation of pausing the game using the escape key, creating game states, and explaining the functionality of toggling between paused and running game states.', 'duration': 183.43, 'highlights': ['Introduction of game states including paused and running.', 'Implementation of pausing the game using the escape key.', 'Explanation of the functionality of toggling between paused and running game states.']}, {'end': 3727.325, 'start': 3605.353, 'title': 'Game pausing display', 'summary': "Demonstrates how to create a display to show that the game is paused, including shading the screen with 50% opacity and adding a 'paused' text when the game is paused.", 'duration': 121.972, 'highlights': ['Creating a shaded rectangle to cover the whole screen with 50% opacity when the game is paused.', "Adding a 'paused' text at the center of the screen when the game is paused.", "Applying conditional statements to control the display based on the game's state."]}], 'duration': 310.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z03417005.jpg', 'highlights': ['Introduction of game states including paused and running.', 'Implementation of pausing the game using the escape key.', 'Explanation of the functionality of toggling between paused and running game states.', 'Creating a shaded rectangle to cover the whole screen with 50% opacity when the game is paused.', "Adding a 'paused' text at the center of the screen when the game is paused.", "Applying conditional statements to control the display based on the game's state."]}, {'end': 4573.816, 'segs': [{'end': 3811.313, 'src': 'embed', 'start': 3731.686, 'weight': 3, 'content': [{'end': 3737.527, 'text': 'So the next thing we need to do is add a menu screen here, so that the game will not just start right away,', 'start': 3731.686, 'duration': 5.841}, {'end': 3740.708, 'text': 'but the user will be able to hit the space bar and start the game.', 'start': 3737.527, 'duration': 3.181}, {'end': 3744.209, 'text': 'So we already have our game state menu set up here.', 'start': 3741.788, 'duration': 2.421}, {'end': 3747.389, 'text': "So let's start the game.", 'start': 3745.969, 'duration': 1.42}, {'end': 3749.89, 'text': "When we start the game, we'll start it at menu.", 'start': 3747.409, 'duration': 2.481}, {'end': 3753.857, 'text': 'Next, we need to go down to our update.', 'start': 3751.215, 'duration': 2.642}, {'end': 3764.243, 'text': "We don't want to update anything if it is paused or if this game state is at the menu.", 'start': 3754.797, 'duration': 9.446}, {'end': 3771.187, 'text': "Let's change these to triple equals.", 'start': 3769.065, 'duration': 2.122}, {'end': 3774.488, 'text': 'There we go.', 'start': 3774.048, 'duration': 0.44}, {'end': 3778.851, 'text': 'Next in our draw function.', 'start': 3777.73, 'duration': 1.121}, {'end': 3782.679, 'text': 'We have our pause state drawing here.', 'start': 3780.558, 'duration': 2.121}, {'end': 3785.019, 'text': "Let's make a new one for the menu.", 'start': 3783.379, 'duration': 1.64}, {'end': 3791.942, 'text': "Let's update these comparators.", 'start': 3785.039, 'duration': 6.903}, {'end': 3796.103, 'text': "Let's make it a solid black.", 'start': 3794.382, 'duration': 1.721}, {'end': 3811.313, 'text': 'And in our text, instead of pause, we will say press spacebar to start There we go.', 'start': 3799.004, 'duration': 12.309}], 'summary': 'Adding a menu screen to the game to allow user to start with spacebar.', 'duration': 79.627, 'max_score': 3731.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z03731686.jpg'}, {'end': 3941.892, 'src': 'embed', 'start': 3879.647, 'weight': 2, 'content': [{'end': 3886.549, 'text': 'The last thing we need to do here is when we start the game is we need to change the game state to running.', 'start': 3879.647, 'duration': 6.902}, {'end': 3890.67, 'text': "Let's refresh.", 'start': 3890.07, 'duration': 0.6}, {'end': 3902.706, 'text': "Alright, now what is also calling this start here? Let's go look at our index.js file.", 'start': 3896.181, 'duration': 6.525}, {'end': 3906.909, 'text': "Ah yes, we're immediately calling the game start when we load the page.", 'start': 3903.046, 'duration': 3.863}, {'end': 3908.39, 'text': "Let's remove that.", 'start': 3907.75, 'duration': 0.64}, {'end': 3912.613, 'text': 'Now we have an error on our draw function.', 'start': 3910.632, 'duration': 1.981}, {'end': 3917.357, 'text': 'The issue is that the game objects has not been initialized yet.', 'start': 3914.294, 'duration': 3.063}, {'end': 3920.379, 'text': "So let's do that here.", 'start': 3919.638, 'duration': 0.741}, {'end': 3924.322, 'text': 'Set it equal to an empty array.', 'start': 3923.061, 'duration': 1.261}, {'end': 3928.789, 'text': 'All right, we now have our menu screen.', 'start': 3927.349, 'duration': 1.44}, {'end': 3933.73, 'text': 'If I hit space, the game will start, and everything works the way we expect it.', 'start': 3928.809, 'duration': 4.921}, {'end': 3938.591, 'text': "If I hit space again, though, you'll notice that it actually rebuilds the level.", 'start': 3933.75, 'duration': 4.841}, {'end': 3941.892, 'text': "So let's fix that real quick.", 'start': 3940.672, 'duration': 1.22}], 'summary': 'Fixing game initialization and level rebuild issue in code.', 'duration': 62.245, 'max_score': 3879.647, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z03879647.jpg'}, {'end': 4025.566, 'src': 'embed', 'start': 3989.831, 'weight': 6, 'content': [{'end': 3991.891, 'text': "Now let's go down to our update function.", 'start': 3989.831, 'duration': 2.06}, {'end': 4004.654, 'text': 'If this dot lives equals zero, this dot game state will be equal to game over.', 'start': 3994.432, 'duration': 10.222}, {'end': 4007.494, 'text': 'So we run out of lives, we end the game.', 'start': 4005.814, 'duration': 1.68}, {'end': 4012.275, 'text': "And we don't want to update anything else if it is game over.", 'start': 4009.715, 'duration': 2.56}, {'end': 4018.862, 'text': 'So there we go.', 'start': 4018.362, 'duration': 0.5}, {'end': 4022.204, 'text': 'Once we hit game over, the update will stop running.', 'start': 4019.563, 'duration': 2.641}, {'end': 4025.566, 'text': 'Now we just need to draw our game over screen.', 'start': 4023.165, 'duration': 2.401}], 'summary': 'Update function checks if lives=0, sets game over state, and stops update.', 'duration': 35.735, 'max_score': 3989.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z03989831.jpg'}, {'end': 4190.87, 'src': 'embed', 'start': 4143.981, 'weight': 1, 'content': [{'end': 4148.384, 'text': "Now we're going to lose a life, but it's immediately going to game over, even though we have three lives set here.", 'start': 4143.981, 'duration': 4.403}, {'end': 4151.486, 'text': "That's because the ball is never being reset.", 'start': 4149.225, 'duration': 2.261}, {'end': 4160.453, 'text': "Let's grab this here.", 'start': 4158.952, 'duration': 1.501}, {'end': 4162.514, 'text': "I'm going to pull this out.", 'start': 4160.473, 'duration': 2.041}, {'end': 4166.136, 'text': "And I'm going to create a function called reset.", 'start': 4163.935, 'duration': 2.201}, {'end': 4176.465, 'text': "So that'll reset our position and speed.", 'start': 4174.743, 'duration': 1.722}, {'end': 4184.587, 'text': 'So down here, when we lose a life, we will call reset.', 'start': 4178.104, 'duration': 6.483}, {'end': 4190.87, 'text': "Let's try it out.", 'start': 4190.27, 'duration': 0.6}], 'summary': 'Game over occurs due to ball not being reset, creating function to reset position and speed.', 'duration': 46.889, 'max_score': 4143.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z04143981.jpg'}, {'end': 4389.892, 'src': 'embed', 'start': 4345.973, 'weight': 0, 'content': [{'end': 4348.134, 'text': "Now let's check to see if all the bricks are gone.", 'start': 4345.973, 'duration': 2.161}, {'end': 4364.205, 'text': 'So inside of our update, we can say if this.bricks.length equals 0, new level will need to be loaded in here.', 'start': 4350.996, 'duration': 13.209}, {'end': 4367.508, 'text': "Let's take a look.", 'start': 4366.887, 'duration': 0.621}, {'end': 4372.471, 'text': 'Once the brick is destroyed, our console is logging, so that is working.', 'start': 4369.429, 'duration': 3.042}, {'end': 4379.549, 'text': "Now, how do we actually load the new level? Well, let's create a new level real quick.", 'start': 4374.847, 'duration': 4.702}, {'end': 4389.892, 'text': "I'm just going to make it a duplicate of level 1.", 'start': 4381.89, 'duration': 8.002}], 'summary': 'Checking if all bricks are gone, loading new level if true, and creating a duplicate of level 1.', 'duration': 43.919, 'max_score': 4345.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z04345973.jpg'}], 'start': 3731.686, 'title': 'Game development progress', 'summary': 'Details adding a menu screen, updating game state, and enabling level progression, culminating in a demonstration of completing a level and transitioning to the next level.', 'chapters': [{'end': 3811.313, 'start': 3731.686, 'title': 'Adding menu screen and game state', 'summary': "Discusses adding a menu screen to the game to allow the user to start the game by pressing the space bar, updating the game state, and modifying the draw function to display 'press spacebar to start' instead of 'pause'.", 'duration': 79.627, 'highlights': ['The chapter discusses adding a menu screen to the game to allow the user to start the game by pressing the space bar.', 'Updating the game state to not update anything if it is paused or at the menu.', "Modifying the draw function to display 'press spacebar to start' instead of 'pause'."]}, {'end': 4573.816, 'start': 3813.735, 'title': 'Game development progress', 'summary': 'Details the process of triggering the start of the game, initializing game components, handling game states, and enabling level progression through brick destruction, culminating in a demonstration of completing a level and transitioning to the next level.', 'duration': 760.081, 'highlights': ['The game state needs to be changed to running when starting the game, and the index.js file should not immediately call the game start when the page loads.', 'The game logic should prevent the rebuilding of the level when the space bar is hit again after the game has started.', 'The game over state is handled by setting the lives to zero, changing the game state, and stopping the update function from running.', 'The process of resetting the ball and handling the game over state when lives are lost is demonstrated, ensuring the game continues with the correct number of lives.', 'The functionality for completing a level and transitioning to the next level is achieved by checking for the destruction of all bricks and incrementing the current level to load the next level.']}], 'duration': 842.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3EMxBkqC4z0/pics/3EMxBkqC4z03731686.jpg', 'highlights': ['The functionality for completing a level and transitioning to the next level is achieved by checking for the destruction of all bricks and incrementing the current level to load the next level.', 'The process of resetting the ball and handling the game over state when lives are lost is demonstrated, ensuring the game continues with the correct number of lives.', 'The game state needs to be changed to running when starting the game, and the index.js file should not immediately call the game start when the page loads.', 'Updating the game state to not update anything if it is paused or at the menu.', "Modifying the draw function to display 'press spacebar to start' instead of 'pause'.", 'The game logic should prevent the rebuilding of the level when the space bar is hit again after the game has started.', 'The game over state is handled by setting the lives to zero, changing the game state, and stopping the update function from running.', 'The chapter discusses adding a menu screen to the game to allow the user to start the game by pressing the space bar.']}], 'highlights': ['The functionality for completing a level and transitioning to the next level is achieved by checking for the destruction of all bricks and incrementing the current level to load the next level.', 'The game loop is refactored to efficiently update and draw game objects', 'The process of creating brick objects and populating the game world with a bunch of bricks is detailed, showcasing the ease of building multiple bricks using a loop and an array.', 'Demonstration of implementing the game loop with delta time for smooth paddle movement.', 'Refactoring the process into its own class by creating a new file called ball.js, exporting a default class of ball, and implementing a constructor and a draw function.', 'Introduction of game states including paused and running.', 'The function detectCollision is refactored to enable collision detection between the ball and the paddle, resulting in successful interaction between the two.', 'Demonstration of using CTX.clearRect to clear the canvas starting at 0, 0.', 'The canvas is set with a width of 800 pixels and a height of 600 pixels, providing a designated area for game rendering.', 'The process of obtaining the canvas context is detailed, emphasizing the use of a two-dimensional context for drawing on the canvas.']}