title
Learn JavaScript by Building 7 Games - Full Course

description
Learn JavaScript by building 7 retro games. ✏️ Ania Kubów created this course. Check out her channel: https://www.youtube.com/aniakubow 💻 GitHub Links: Rock Paper Scissors: https://github.com/kubowania/rock-paper-scissors-x3 Memory Game: https://github.com/kubowania/memory-game Whac-a-mole: https://github.com/kubowania/whac-a-mole Breakout: https://github.com/kubowania/breakout Frogger: https://github.com/kubowania/Frogger Connect Four: https://github.com/kubowania/connect-four Space Invaders: https://github.com/kubowania/space-invaders ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Introduction ⌨️ (0:01:56) Rock Paper Scissors ⌨️ (0:18:42) Memory Game ⌨️ (1:04:37) Whac-a-mole ⌨️ (1:30:39) Breakout ⌨️ (2:31:10) Frogger ⌨️ (3:40:02) Connect Four ⌨️ (4:08:23) Space Invaders 🎉 Thanks to our Champion and Sponsor supporters: 👾 Raymond Odero 👾 Agustín Kussrow 👾 aldo ferretti 👾 Otis Morgan 👾 DeezMaster -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'Learn JavaScript by Building 7 Games - Full Course', 'heatmap': [{'end': 877.674, 'start': 525.863, 'weight': 1}, {'end': 2276.312, 'start': 2098.569, 'weight': 0.96}], 'summary': 'Learn javascript by building 7 classic games including rock paper scissors, memory game, whack-a-mole, breakout, frogger, connect four, and space invaders. the tutorial provides a comprehensive overview of javascript game development and is suitable for those familiar with javascript fundamentals.', 'chapters': [{'end': 100.807, 'segs': [{'end': 29.017, 'src': 'embed', 'start': 0.762, 'weight': 0, 'content': [{'end': 6.485, 'text': 'Hey everyone, and welcome to this tutorial on learning JavaScript through making seven classic games.', 'start': 0.762, 'duration': 5.723}, {'end': 10.847, 'text': "My name is Anu Kubo, and I'm a software developer and course creator on YouTube.", 'start': 7.145, 'duration': 3.702}, {'end': 18.572, 'text': "In this course, I'll be teaching you how to use JavaScript methods and properties in order to build seven games in order of difficulty.", 'start': 11.488, 'duration': 7.084}, {'end': 29.017, 'text': 'this will be rock paper scissors, memory game, whack-a-mole 2d, breakout, frogger, connect four and space invaders.', 'start': 19.292, 'duration': 9.725}], 'summary': 'Anu kubo teaches javascript by building 7 classic games of increasing difficulty, including rock-paper-scissors, memory game, whack-a-mole 2d, breakout, frogger, connect four, and space invaders.', 'duration': 28.255, 'max_score': 0.762, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk762.jpg'}, {'end': 79.922, 'src': 'embed', 'start': 45.071, 'weight': 1, 'content': [{'end': 46.532, 'text': 'Now, who is this course for?', 'start': 45.071, 'duration': 1.461}, {'end': 53.758, 'text': 'This course is for anyone who has covered the fundamentals of JavaScript in theory and would like to use it in practice.', 'start': 47.033, 'duration': 6.725}, {'end': 61.063, 'text': 'So in other words, if you are familiar with what a function is, a variable is, what loops look like and so on, this is the course for you.', 'start': 54.158, 'duration': 6.905}, {'end': 67.748, 'text': 'However, if you have never touched JavaScript before and would like to have a go anyway, please do give it a go and see how you get on.', 'start': 61.604, 'duration': 6.144}, {'end': 72.372, 'text': 'I will be taking things super slow and explaining as much as I can along the way.', 'start': 67.768, 'duration': 4.604}, {'end': 79.922, 'text': 'Now, it is important to stress that these games are just to learn JavaScript and will be the bare bones of the game.', 'start': 73.3, 'duration': 6.622}], 'summary': 'Course for those familiar with javascript basics, emphasizing practical application and slow, thorough instruction.', 'duration': 34.851, 'max_score': 45.071, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk45071.jpg'}, {'end': 106.752, 'src': 'embed', 'start': 80.562, 'weight': 2, 'content': [{'end': 85.243, 'text': 'This means that I will be giving you the most basic level of code for the game to work.', 'start': 80.562, 'duration': 4.681}, {'end': 87.224, 'text': "I'm doing this for two reasons.", 'start': 85.723, 'duration': 1.501}, {'end': 94.285, 'text': 'Reason one being that it would be too much to build a game with all the real features of the official games, as well as tests for them.', 'start': 87.744, 'duration': 6.541}, {'end': 100.807, 'text': 'And reason two is that I want to give you the opportunity to take the game, build on top of them, add features, add levels,', 'start': 94.685, 'duration': 6.122}, {'end': 103.409, 'text': 'style them up and truly make them your own.', 'start': 101.207, 'duration': 2.202}, {'end': 106.752, 'text': 'Now, some of you might have already seen this video before.', 'start': 104.13, 'duration': 2.622}], 'summary': 'Providing basic code for game with opportunity to customize and build on top.', 'duration': 26.19, 'max_score': 80.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk80562.jpg'}], 'start': 0.762, 'title': 'Learning javascript through building 7 games', 'summary': 'Covers a tutorial on learning javascript by creating 7 classic games such as rock paper scissors, memory game, whack-a-mole 2d, breakout, frogger, connect four, and space invaders. it is suitable for those familiar with javascript fundamentals.', 'chapters': [{'end': 100.807, 'start': 0.762, 'title': 'Learn javascript through building 7 games', 'summary': 'Covers a tutorial on learning javascript through making seven classic games, including rock paper scissors, memory game, whack-a-mole 2d, breakout, frogger, connect four, and space invaders, and is suitable for those familiar with javascript fundamentals.', 'duration': 100.045, 'highlights': ['Anu Kubo, a software developer and course creator, teaches how to use JavaScript methods and properties to build seven games in order of difficulty.', 'The course is designed for individuals familiar with JavaScript fundamentals and seeking practical application, but beginners are also encouraged to participate as the instructor will explain concepts thoroughly.', 'The games will be built at a basic level to facilitate learning and provide the opportunity for participants to enhance and extend the games with additional features and levels.']}], 'duration': 100.045, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk762.jpg', 'highlights': ['Anu Kubo teaches JavaScript methods to build 7 games', 'Course designed for those familiar with JavaScript fundamentals', 'Games built at a basic level to facilitate learning']}, {'end': 1109.508, 'segs': [{'end': 185.787, 'src': 'embed', 'start': 120.781, 'weight': 0, 'content': [{'end': 129.372, 'text': 'I will be showing you how to make a game that checks for a win, lose or draw against a computer that randomly selects either rock paper or scissors.', 'start': 120.781, 'duration': 8.591}, {'end': 132.015, 'text': 'If you pick rock against scissors, you win.', 'start': 130.133, 'duration': 1.882}, {'end': 133.777, 'text': 'But against paper, it will lose.', 'start': 132.456, 'duration': 1.321}, {'end': 139.224, 'text': 'If you pick scissors and the computer chooses rock, you lose, but will win against paper.', 'start': 134.378, 'duration': 4.846}, {'end': 144.13, 'text': 'And if you pick paper, well, you guessed it, you will lose against scissors but win against rock.', 'start': 139.625, 'duration': 4.505}, {'end': 147.415, 'text': 'If you choose the same answer to the computer, it is a draw.', 'start': 144.731, 'duration': 2.684}, {'end': 153.062, 'text': 'By the end of this tutorial, you have used all of these following JavaScript methods and properties.', 'start': 147.975, 'duration': 5.087}, {'end': 158.859, 'text': "Okay, so let's get to it with our first example.", 'start': 155.197, 'duration': 3.662}, {'end': 169.926, 'text': 'Now, this approach, as I mentioned, is going to be a little bit more beginner friendly, I think we really sort of take stuff step by step.', 'start': 159.48, 'duration': 10.446}, {'end': 171.927, 'text': "And we don't use switch statements.", 'start': 170.046, 'duration': 1.881}, {'end': 183.124, 'text': 'we use if else or if statements as well as just use numbers more than anything, as well as HTML rather than just purely JavaScript.', 'start': 171.927, 'duration': 11.197}, {'end': 185.787, 'text': 'So hopefully you enjoyed this tutorial.', 'start': 183.705, 'duration': 2.082}], 'summary': 'Tutorial on creating a rock-paper-scissors game using javascript methods and properties, emphasizing a beginner-friendly approach.', 'duration': 65.006, 'max_score': 120.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk120781.jpg'}, {'end': 232.518, 'src': 'embed', 'start': 209.311, 'weight': 4, 'content': [{'end': 216.217, 'text': 'So because my app js file is in the root of my project, all I have to do is simply name the file.', 'start': 209.311, 'duration': 6.906}, {'end': 225.235, 'text': "Obviously, it's a JavaScript file because of the JS extension, we are telling our code editor to treat this as a JavaScript file.", 'start': 217.065, 'duration': 8.17}, {'end': 232.518, 'text': 'So make sure that the script tag is at the end of your body.', 'start': 226.897, 'duration': 5.621}], 'summary': 'App js file in root, named, treated as javascript, script tag at end of body', 'duration': 23.207, 'max_score': 209.311, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk209311.jpg'}, {'end': 278.53, 'src': 'embed', 'start': 251.943, 'weight': 8, 'content': [{'end': 259.204, 'text': 'So you can put the script tag at the bottom, or you can use a DOM content loaded event listener, the choice is up to you.', 'start': 251.943, 'duration': 7.261}, {'end': 268.647, 'text': "Okay, so the first thing that I'm going to do like I said I am going to be working with HTML and CSS in this video is I'm just going to put some h2 tags.", 'start': 260.204, 'duration': 8.443}, {'end': 271.608, 'text': 'So this is my first h2 tag.', 'start': 269.328, 'duration': 2.28}, {'end': 278.53, 'text': "And I'm just going to put compute computer computer choice about our computer choice.", 'start': 271.688, 'duration': 6.842}], 'summary': 'Demonstrating use of script tag and working with html and css, including adding h2 tags.', 'duration': 26.587, 'max_score': 251.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk251943.jpg'}, {'end': 399.083, 'src': 'embed', 'start': 371.265, 'weight': 1, 'content': [{'end': 378.089, 'text': 'Great Now the next thing I want to do is do some logic so that if I click on rock, rock will show up here.', 'start': 371.265, 'duration': 6.824}, {'end': 381.731, 'text': 'And at the same time, a computer choice will be generated.', 'start': 378.509, 'duration': 3.222}, {'end': 385.494, 'text': "And then we can figure out who's won or lost.", 'start': 382.132, 'duration': 3.362}, {'end': 390.617, 'text': "So for this, I'm now going to have to go to my JavaScript file.", 'start': 386.534, 'duration': 4.083}, {'end': 399.083, 'text': "So in here, The first thing I'm gonna do is actually pick out all the elements with these IDs.", 'start': 391.737, 'duration': 7.346}], 'summary': "Developing a logic to generate computer's choice and determine the winner in a rock-paper-scissors game using javascript.", 'duration': 27.818, 'max_score': 371.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk371265.jpg'}, {'end': 877.674, 'src': 'heatmap', 'start': 525.863, 'weight': 1, 'content': [{'end': 531.928, 'text': 'So const possible choices, I picked out all the buttons, so I can use them.', 'start': 525.863, 'duration': 6.065}, {'end': 535.85, 'text': "Now I'm going to grab the buttons possible choices.", 'start': 532.489, 'duration': 3.361}, {'end': 545.894, 'text': 'And for each button, or I can call it a possible choice, whatever you want pos possible choice.', 'start': 536.23, 'duration': 9.664}, {'end': 551.29, 'text': "I want to I'm just going to minimize this because we don't really need that.", 'start': 548.007, 'duration': 3.283}, {'end': 558.215, 'text': "For each possible choice, I'm going to grab each possible choice and use add event listener to listen up for a click.", 'start': 551.67, 'duration': 6.545}, {'end': 563.98, 'text': 'So if I click any of the buttons, I want essentially something to happen.', 'start': 558.756, 'duration': 5.224}, {'end': 571.786, 'text': "Okay, so I want this, we can pass through a function, I'm literally just going to pass through a function like so.", 'start': 564.581, 'duration': 7.205}, {'end': 577.231, 'text': 'And then what I want to happen is, well, I want to pass through the event.', 'start': 573.348, 'duration': 3.883}, {'end': 585.209, 'text': 'So E for event, and then I want to actually get the target ID.', 'start': 578.226, 'duration': 6.983}, {'end': 588.31, 'text': 'So whatever I click, I want to get the ID.', 'start': 585.749, 'duration': 2.561}, {'end': 592.671, 'text': 'And I want to save that as the user choice.', 'start': 589.15, 'duration': 3.521}, {'end': 594.692, 'text': 'But I want to save it globally.', 'start': 593.192, 'duration': 1.5}, {'end': 599.074, 'text': "Okay, so I'm just going to put let user choice so we can access it wherever.", 'start': 594.872, 'duration': 4.202}, {'end': 605.416, 'text': "So whatever he taught the target ideas, I'm saving it to user choice, I'm just going to save it here.", 'start': 599.814, 'duration': 5.602}, {'end': 607.277, 'text': 'So I can use it in my file.', 'start': 605.696, 'duration': 1.581}, {'end': 610.712, 'text': 'So that is what I am storing.', 'start': 608.871, 'duration': 1.841}, {'end': 616.016, 'text': 'So the next thing I could do is actually get the user choice.', 'start': 611.072, 'duration': 4.944}, {'end': 624.681, 'text': "maybe we should rename this because user choice display, because we now have two user choice that you can't have that display.", 'start': 616.016, 'duration': 8.665}, {'end': 627.663, 'text': "So now I'm going to get the user choice display.", 'start': 625.402, 'duration': 2.261}, {'end': 634.968, 'text': "And using the property of in HTML, HTML, I'm once again, just going to assign it the user choice.", 'start': 627.683, 'duration': 7.285}, {'end': 638.526, 'text': "Okay, So let's see if that works.", 'start': 634.988, 'duration': 3.538}, {'end': 643.209, 'text': 'Click scissors, click paper, click rock.', 'start': 638.926, 'duration': 4.283}, {'end': 646.292, 'text': "Nice Let's carry on.", 'start': 644.15, 'duration': 2.142}, {'end': 650.034, 'text': "I'm just gonna actually put a space there.", 'start': 646.312, 'duration': 3.722}, {'end': 651.936, 'text': 'Oops, not there.', 'start': 651.315, 'duration': 0.621}, {'end': 656.099, 'text': 'What am I doing? You computer choice space space results space.', 'start': 652.016, 'duration': 4.083}, {'end': 662.774, 'text': 'Okay So we are displaying the user choice.', 'start': 657.72, 'duration': 5.054}, {'end': 666.235, 'text': 'The next thing that I said I want to do is generate a computer choice.', 'start': 663.134, 'duration': 3.101}, {'end': 673.178, 'text': "So let's write a function that's called generate computer choice.", 'start': 666.915, 'duration': 6.263}, {'end': 678.421, 'text': "Okay, what's that function going to look like generate computer choice.", 'start': 673.198, 'duration': 5.223}, {'end': 696.01, 'text': 'So what I actually want to happen here is I want to get a random number, right? So to I can use const const random number.', 'start': 679.041, 'duration': 16.969}, {'end': 704.517, 'text': "And then I'm going to use math, random, and then multiply it by I can use the number three.", 'start': 697.11, 'duration': 7.407}, {'end': 707.86, 'text': "Sure If that's what I want.", 'start': 705.538, 'duration': 2.322}, {'end': 710.722, 'text': 'I can also use possible choices.', 'start': 708.44, 'duration': 2.282}, {'end': 719.746, 'text': "Let's Okay, that is the same as just simply putting the number three.", 'start': 712.323, 'duration': 7.423}, {'end': 722.847, 'text': "But for beginners, I'll just keep it as three for now.", 'start': 720.226, 'duration': 2.621}, {'end': 733.991, 'text': "Again, like maybe I'll just put or you can use possible choices, length is that will return a three.", 'start': 723.967, 'duration': 10.024}, {'end': 746.846, 'text': "Okay, So, now that we've got a random number, I actually need to wrap this in math floor to round down that random number,", 'start': 734.011, 'duration': 12.835}, {'end': 748.227, 'text': "because that'll give me a random number.", 'start': 746.846, 'duration': 1.381}, {'end': 751.749, 'text': "Okay, and then we want to make sure that it's a full integer.", 'start': 748.667, 'duration': 3.082}, {'end': 758.534, 'text': "Let's check that random number.", 'start': 753.09, 'duration': 5.444}, {'end': 765.88, 'text': "So that will give me a random number that's actually from zero to two, as we count in indexes.", 'start': 760.236, 'duration': 5.644}, {'end': 770.482, 'text': 'So I could just get this and add one just for readability if I wanted to.', 'start': 766.3, 'duration': 4.182}, {'end': 777.887, 'text': "So now let's check this 1322.", 'start': 770.903, 'duration': 6.984}, {'end': 781.949, 'text': 'So always be either one or two or three, right? So there we go.', 'start': 777.887, 'duration': 4.062}, {'end': 800.401, 'text': "So now if random number deeply equals one, let's say that computer choice equals rock, I'm just making that up, it could be scissors.", 'start': 786.452, 'duration': 13.949}, {'end': 806.324, 'text': "Let's computer choice.", 'start': 802.562, 'duration': 3.762}, {'end': 821.641, 'text': "And then if random number equals to say his or And if random number equals three, let's say paper.", 'start': 808.326, 'duration': 13.315}, {'end': 832.744, 'text': "Okay So and then let's actually get the computer choice.", 'start': 822.762, 'duration': 9.982}, {'end': 840.707, 'text': 'So computer choice display in HTML, and just show the computer choice.', 'start': 832.844, 'duration': 7.863}, {'end': 846.844, 'text': 'Now, There we go.', 'start': 845.328, 'duration': 1.516}, {'end': 851.101, 'text': 'Great Cool.', 'start': 848.45, 'duration': 2.651}, {'end': 857.264, 'text': "Okay, so we're randomly generating computer choice and random regenerating a choice for us.", 'start': 852.341, 'duration': 4.923}, {'end': 862.126, 'text': "As I said, I've done it this way, as I think it's beginner friendly.", 'start': 858.584, 'duration': 3.542}, {'end': 865.968, 'text': 'However, there is a much neater way we could do all of this.', 'start': 862.526, 'duration': 3.442}, {'end': 871.21, 'text': "that wouldn't involve saying equals one equals two, equals three, which I'm really excited to show you.", 'start': 865.968, 'duration': 5.242}, {'end': 876.353, 'text': 'But I think as a beginner, this probably might make a lot more sense and is more readable.', 'start': 871.291, 'duration': 5.062}, {'end': 877.674, 'text': 'But you know, let me know.', 'start': 876.753, 'duration': 0.921}], 'summary': 'Creating a game to pick and display choices, including computer-generated ones.', 'duration': 351.811, 'max_score': 525.863, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk525863.jpg'}, {'end': 607.277, 'src': 'embed', 'start': 551.67, 'weight': 5, 'content': [{'end': 558.215, 'text': "For each possible choice, I'm going to grab each possible choice and use add event listener to listen up for a click.", 'start': 551.67, 'duration': 6.545}, {'end': 563.98, 'text': 'So if I click any of the buttons, I want essentially something to happen.', 'start': 558.756, 'duration': 5.224}, {'end': 571.786, 'text': "Okay, so I want this, we can pass through a function, I'm literally just going to pass through a function like so.", 'start': 564.581, 'duration': 7.205}, {'end': 577.231, 'text': 'And then what I want to happen is, well, I want to pass through the event.', 'start': 573.348, 'duration': 3.883}, {'end': 585.209, 'text': 'So E for event, and then I want to actually get the target ID.', 'start': 578.226, 'duration': 6.983}, {'end': 588.31, 'text': 'So whatever I click, I want to get the ID.', 'start': 585.749, 'duration': 2.561}, {'end': 592.671, 'text': 'And I want to save that as the user choice.', 'start': 589.15, 'duration': 3.521}, {'end': 594.692, 'text': 'But I want to save it globally.', 'start': 593.192, 'duration': 1.5}, {'end': 599.074, 'text': "Okay, so I'm just going to put let user choice so we can access it wherever.", 'start': 594.872, 'duration': 4.202}, {'end': 605.416, 'text': "So whatever he taught the target ideas, I'm saving it to user choice, I'm just going to save it here.", 'start': 599.814, 'duration': 5.602}, {'end': 607.277, 'text': 'So I can use it in my file.', 'start': 605.696, 'duration': 1.581}], 'summary': 'Using add event listener to capture user choice globally.', 'duration': 55.607, 'max_score': 551.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk551670.jpg'}, {'end': 832.744, 'src': 'embed', 'start': 777.887, 'weight': 6, 'content': [{'end': 781.949, 'text': 'So always be either one or two or three, right? So there we go.', 'start': 777.887, 'duration': 4.062}, {'end': 800.401, 'text': "So now if random number deeply equals one, let's say that computer choice equals rock, I'm just making that up, it could be scissors.", 'start': 786.452, 'duration': 13.949}, {'end': 806.324, 'text': "Let's computer choice.", 'start': 802.562, 'duration': 3.762}, {'end': 821.641, 'text': "And then if random number equals to say his or And if random number equals three, let's say paper.", 'start': 808.326, 'duration': 13.315}, {'end': 832.744, 'text': "Okay So and then let's actually get the computer choice.", 'start': 822.762, 'duration': 9.982}], 'summary': 'Computer choice is determined by a random number between one and three, representing rock, paper, or scissors.', 'duration': 54.857, 'max_score': 777.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk777887.jpg'}], 'start': 101.207, 'title': 'Creating a rock-paper-scissors game using javascript', 'summary': 'Introduces a beginner-friendly javascript tutorial on creating a rock, paper, scissors game, setting up a basic html and javascript project, creating logic for the game, and covering the game creation process, providing a comprehensive overview of javascript game development.', 'chapters': [{'end': 185.787, 'start': 101.207, 'title': 'Javascript game tutorial', 'summary': 'Introduces a beginner-friendly javascript tutorial on creating a rock, paper, scissors game, outlining the game rules and the use of javascript methods and properties.', 'duration': 84.58, 'highlights': ['The tutorial covers creating a rock, paper, scissors game, demonstrating win, lose, or draw scenarios and the usage of JavaScript methods and properties.', 'The tutorial emphasizes a beginner-friendly approach, utilizing if-else statements and numbers, and integrating HTML with JavaScript for a step-by-step learning experience.']}, {'end': 370.165, 'start': 186.147, 'title': 'Setting up a basic html and javascript project', 'summary': 'Outlines the process of setting up a basic html and javascript project, including creating html elements, linking javascript files, and positioning script tags for code execution.', 'duration': 184.018, 'highlights': ['Creating HTML elements for computer choice, user choice, result, and buttons for rock, paper, and scissors.', 'Linking the app.js file to the index.html file and positioning the script tag at the end of the body for code execution.', 'Options for executing JavaScript code by positioning the script tag at the bottom or using a DOM content loaded event listener.']}, {'end': 577.231, 'start': 371.265, 'title': 'Creating logic for rock-paper-scissors game', 'summary': 'Discusses setting up logic in javascript to handle user and computer choices for a rock-paper-scissors game, including selecting elements by id, storing choices as constants, and adding event listeners for user interaction.', 'duration': 205.966, 'highlights': ['The chapter discusses setting up logic in JavaScript to handle user and computer choices for a rock-paper-scissors game', 'Selecting elements by ID and storing choices as constants', 'Adding event listeners for user interaction']}, {'end': 1109.508, 'start': 578.226, 'title': 'Rock paper scissors game', 'summary': 'Covers the creation of a beginner-friendly rock paper scissors game, including the storage of user choices, generation of computer choices, and determining the game results based on user and computer choices.', 'duration': 531.282, 'highlights': ["The user choice is stored globally as 'user choice' to be accessed throughout the file.", "A function 'generate computer choice' is created to randomly generate the computer's choice between rock, paper, and scissors.", "A function 'get result' is written to determine the game result based on the user and computer choices, displaying the outcome as win, lose, or draw."]}], 'duration': 1008.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk101207.jpg', 'highlights': ['The tutorial covers creating a rock, paper, scissors game, demonstrating win, lose, or draw scenarios and the usage of JavaScript methods and properties.', 'Creating HTML elements for computer choice, user choice, result, and buttons for rock, paper, and scissors.', 'The chapter discusses setting up logic in JavaScript to handle user and computer choices for a rock-paper-scissors game', 'The tutorial emphasizes a beginner-friendly approach, utilizing if-else statements and numbers, and integrating HTML with JavaScript for a step-by-step learning experience.', 'Linking the app.js file to the index.html file and positioning the script tag at the end of the body for code execution.', "The user choice is stored globally as 'user choice' to be accessed throughout the file.", "A function 'generate computer choice' is created to randomly generate the computer's choice between rock, paper, and scissors.", 'Adding event listeners for user interaction', 'Options for executing JavaScript code by positioning the script tag at the bottom or using a DOM content loaded event listener.', "A function 'get result' is written to determine the game result based on the user and computer choices, displaying the outcome as win, lose, or draw."]}, {'end': 2301.951, 'segs': [{'end': 1180.551, 'src': 'embed', 'start': 1153.733, 'weight': 0, 'content': [{'end': 1159.874, 'text': "I'm using web storm, which is an ID that I'm going to use in order to start my project.", 'start': 1153.733, 'duration': 6.141}, {'end': 1164.115, 'text': 'Of course, feel free to use VS code or whatever code editor you wish.', 'start': 1160.274, 'duration': 3.841}, {'end': 1167.696, 'text': "So in web storm, I'm just going to create a new project.", 'start': 1164.855, 'duration': 2.841}, {'end': 1178.858, 'text': "So go ahead and click here, it's going to be an empty project, which I am going to choose to call memory game, just like so and click Create.", 'start': 1167.716, 'duration': 11.142}, {'end': 1180.551, 'text': 'And great.', 'start': 1180.071, 'duration': 0.48}], 'summary': 'Creating a new project called memory game using web storm.', 'duration': 26.818, 'max_score': 1153.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk1153733.jpg'}, {'end': 1345.892, 'src': 'embed', 'start': 1310.418, 'weight': 3, 'content': [{'end': 1313.759, 'text': 'Okay, make sure that is in the head tags like so.', 'start': 1310.418, 'duration': 3.341}, {'end': 1319.4, 'text': "Okay, so first things first, let's start off with some HTML.", 'start': 1314.959, 'duration': 4.441}, {'end': 1323.973, 'text': 'Now, in this game, like I said, this is a JavaScript tutorial.', 'start': 1320.31, 'duration': 3.663}, {'end': 1330.379, 'text': "So my HTML is gonna be super basic, we're going to be adding most of our elements through JavaScript.", 'start': 1324.053, 'duration': 6.326}, {'end': 1333.622, 'text': "Okay, so I'm going to show you how to do that now.", 'start': 1330.819, 'duration': 2.803}, {'end': 1337.065, 'text': 'First off, actually, we do need to link up our style sheet.', 'start': 1334.042, 'duration': 3.023}, {'end': 1345.892, 'text': 'So go ahead and use the link tag like so thank you tab nine, and the href is going to be styles CSS.', 'start': 1337.145, 'duration': 8.747}], 'summary': 'Javascript tutorial includes basic html with styles.css link.', 'duration': 35.474, 'max_score': 1310.418, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk1310418.jpg'}, {'end': 1397.073, 'src': 'embed', 'start': 1371.567, 'weight': 2, 'content': [{'end': 1376.35, 'text': "So it's just the root of our project, the same location as our index HTML file.", 'start': 1371.567, 'duration': 4.783}, {'end': 1379.372, 'text': "So that's all I really needed to do here.", 'start': 1376.65, 'duration': 2.722}, {'end': 1383.034, 'text': "Great And now let's link up our script.", 'start': 1380.172, 'duration': 2.862}, {'end': 1387.317, 'text': "So to do this, I'm going to use the script tag, just like so.", 'start': 1383.334, 'duration': 3.983}, {'end': 1395.132, 'text': "And I'm going to use source app j s, in order to link up our Oops, JavaScript.", 'start': 1387.697, 'duration': 7.435}, {'end': 1397.073, 'text': 'So there we go.', 'start': 1395.592, 'duration': 1.481}], 'summary': "Link the javascript file 'app.js' to the root of the project.", 'duration': 25.506, 'max_score': 1371.567, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk1371567.jpg'}, {'end': 1683.687, 'src': 'embed', 'start': 1643.283, 'weight': 1, 'content': [{'end': 1649.385, 'text': "So we've got our fries object or cheeseburger object, we also need the hot dog object.", 'start': 1643.283, 'duration': 6.102}, {'end': 1663.714, 'text': 'So name, hot dog, image, images, hot dog PNG.', 'start': 1649.925, 'duration': 13.789}, {'end': 1673.04, 'text': "And we are making this array as a reminder, remember, to create a grid with we're going to use this to create a grid with all of these images on it.", 'start': 1664.115, 'duration': 8.925}, {'end': 1675.281, 'text': "So we've got our hot dog.", 'start': 1673.06, 'duration': 2.221}, {'end': 1677.983, 'text': 'The next thing I want to do is ice cream.', 'start': 1675.782, 'duration': 2.201}, {'end': 1679.944, 'text': 'So ice cream.', 'start': 1678.684, 'duration': 1.26}, {'end': 1683.687, 'text': 'Ice cream.', 'start': 1682.026, 'duration': 1.661}], 'summary': 'Creating objects for fries, cheeseburger, hot dog, and ice cream.', 'duration': 40.404, 'max_score': 1643.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk1643283.jpg'}, {'end': 1918.215, 'src': 'embed', 'start': 1882.86, 'weight': 4, 'content': [{'end': 1892.302, 'text': "So first off, like I said, let's go in here and let's grab the div with the ID of grid and we're going to grab it by using the ID.", 'start': 1882.86, 'duration': 9.442}, {'end': 1901.366, 'text': "So what I'm going to do here is I'm going to use document query selector.", 'start': 1893.362, 'duration': 8.004}, {'end': 1907.849, 'text': "And I'm going to search for the ID of grid.", 'start': 1903.028, 'duration': 4.821}, {'end': 1911.311, 'text': "So this hash here means we're looking for an ID of grid.", 'start': 1908.329, 'duration': 2.982}, {'end': 1918.215, 'text': "And we're going to go into our document and use query selector to search for the ID.", 'start': 1911.571, 'duration': 6.644}], 'summary': 'Using document query selector to grab div with id grid.', 'duration': 35.355, 'max_score': 1882.86, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk1882860.jpg'}, {'end': 1998.062, 'src': 'embed', 'start': 1972.783, 'weight': 5, 'content': [{'end': 1978.107, 'text': 'And a function essentially does something, and we have called this function create board so that if we need, we can reuse it,', 'start': 1972.783, 'duration': 5.324}, {'end': 1979.808, 'text': 'or it just makes everything more readable.', 'start': 1978.107, 'duration': 1.701}, {'end': 1988.654, 'text': 'So what I want to do is essentially for each item in my array, I want to create an element.', 'start': 1980.729, 'duration': 7.925}, {'end': 1994.119, 'text': 'So to do this, I can use for each or I can use a for loop.', 'start': 1989.455, 'duration': 4.664}, {'end': 1998.062, 'text': "I'm going to use a for loop as I think maybe that's a bit more beginner friendly.", 'start': 1994.319, 'duration': 3.743}], 'summary': "Creating a function 'create board' to iterate through an array and generate elements using a for loop.", 'duration': 25.279, 'max_score': 1972.783, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk1972783.jpg'}, {'end': 2276.312, 'src': 'heatmap', 'start': 2098.569, 'weight': 0.96, 'content': [{'end': 2101.411, 'text': "And now I call this function because, don't forget,", 'start': 2098.569, 'duration': 2.842}, {'end': 2110.256, 'text': 'we need to call the function in order for the function to release all of his wonderfulness and essentially, you know, execute the code in it.', 'start': 2101.411, 'duration': 8.845}, {'end': 2112.418, 'text': "So I've called the function now.", 'start': 2111.277, 'duration': 1.141}, {'end': 2122.188, 'text': "So let's go back here and refresh this page and you will see that I'm creating an image tag each time with the index number all the way to nine.", 'start': 2112.478, 'duration': 9.71}, {'end': 2125.832, 'text': "So that is what I'm doing so far in my function.", 'start': 2122.929, 'duration': 2.903}, {'end': 2128.595, 'text': 'So to the image tag.', 'start': 2126.413, 'duration': 2.182}, {'end': 2130.636, 'text': 'Well, I want to get the image.', 'start': 2129.055, 'duration': 1.581}, {'end': 2133.338, 'text': "So we've stored this as card in our JavaScript.", 'start': 2130.776, 'duration': 2.562}, {'end': 2136.06, 'text': "And I'm going to use another JavaScript method.", 'start': 2133.678, 'duration': 2.382}, {'end': 2138.682, 'text': 'The method is called set attribute.', 'start': 2136.08, 'duration': 2.602}, {'end': 2149.629, 'text': "And we're going to set the source attribute to my image as well as for now, actually, I'm just going to give it a blank card.", 'start': 2139.022, 'duration': 10.607}, {'end': 2152.21, 'text': "So we're going to go into our images directory.", 'start': 2150.289, 'duration': 1.921}, {'end': 2153.852, 'text': "I'm going to get the blank card.", 'start': 2152.23, 'duration': 1.622}, {'end': 2156.773, 'text': 'So blank P and G.', 'start': 2154.312, 'duration': 2.461}, {'end': 2165.115, 'text': "So now I'm going to console log out the card after we've add the source attribute with image blank PNG.", 'start': 2158.129, 'duration': 6.986}, {'end': 2171.259, 'text': "And we're going to look in source.", 'start': 2165.875, 'duration': 5.384}, {'end': 2175.823, 'text': 'And there you go, you will see the path to the blank images file.', 'start': 2171.94, 'duration': 3.883}, {'end': 2179.726, 'text': "So that's what we have done.", 'start': 2176.643, 'duration': 3.083}, {'end': 2189.358, 'text': "Okay, so we've done that we also want to add, I'm also going to add a data ID so that each card has an ID that is unique.", 'start': 2180.896, 'duration': 8.462}, {'end': 2196.099, 'text': "So data ID, and that's just going to be I so we can keep track of each one.", 'start': 2189.378, 'duration': 6.721}, {'end': 2198.52, 'text': "So now let's go ahead and have a look.", 'start': 2196.619, 'duration': 1.901}, {'end': 2207.842, 'text': 'And if we refresh this, you will see this source and the data ID has been added to my card or in other words, my image tag.', 'start': 2198.76, 'duration': 9.082}, {'end': 2211.282, 'text': 'So Great.', 'start': 2209.022, 'duration': 2.26}, {'end': 2213.983, 'text': "And then of course, we're still printing out the number to the side.", 'start': 2211.382, 'duration': 2.601}, {'end': 2216.504, 'text': "So, now that we've done that, we can see it.", 'start': 2214.863, 'duration': 1.641}, {'end': 2217.804, 'text': 'we need to actually put it in something.', 'start': 2216.504, 'duration': 1.3}, {'end': 2219.705, 'text': 'we want to put it in the grid display.', 'start': 2217.804, 'duration': 1.901}, {'end': 2222.386, 'text': 'we want to put it in between these two tags.', 'start': 2219.705, 'duration': 2.681}, {'end': 2225.887, 'text': "Okay, so that's essentially what we're going to do with JavaScript, however.", 'start': 2222.986, 'duration': 2.901}, {'end': 2230.168, 'text': "So what I'm going to do is get the grid display.", 'start': 2226.547, 'duration': 3.621}, {'end': 2241.34, 'text': "And I'm going to append the card to it, we can use a pen, we can use a pen child.", 'start': 2231.788, 'duration': 9.552}, {'end': 2243.721, 'text': "Okay, there's actually two methods to our disposal.", 'start': 2241.4, 'duration': 2.321}, {'end': 2254.725, 'text': 'So now that we have added the 12 cards into our div with the ID of grid.', 'start': 2244.381, 'duration': 10.344}, {'end': 2258.367, 'text': "Amazing Of course, you won't see it here.", 'start': 2255.746, 'duration': 2.621}, {'end': 2266.21, 'text': "Okay, we have done we've added this in JavaScript, and it is being displayed here.", 'start': 2258.387, 'duration': 7.823}, {'end': 2271.03, 'text': 'Okay, think of this as sort of just more of a starting point that you want to start out with.', 'start': 2267.409, 'duration': 3.621}, {'end': 2273.291, 'text': "And then we're adding stuff with JavaScript.", 'start': 2271.31, 'duration': 1.981}, {'end': 2276.312, 'text': "Okay, and that's being added through this script tag.", 'start': 2273.631, 'duration': 2.681}], 'summary': 'Creating and adding 12 image cards with unique ids through javascript.', 'duration': 177.743, 'max_score': 2098.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk2098569.jpg'}, {'end': 2171.259, 'src': 'embed', 'start': 2139.022, 'weight': 6, 'content': [{'end': 2149.629, 'text': "And we're going to set the source attribute to my image as well as for now, actually, I'm just going to give it a blank card.", 'start': 2139.022, 'duration': 10.607}, {'end': 2152.21, 'text': "So we're going to go into our images directory.", 'start': 2150.289, 'duration': 1.921}, {'end': 2153.852, 'text': "I'm going to get the blank card.", 'start': 2152.23, 'duration': 1.622}, {'end': 2156.773, 'text': 'So blank P and G.', 'start': 2154.312, 'duration': 2.461}, {'end': 2165.115, 'text': "So now I'm going to console log out the card after we've add the source attribute with image blank PNG.", 'start': 2158.129, 'duration': 6.986}, {'end': 2171.259, 'text': "And we're going to look in source.", 'start': 2165.875, 'duration': 5.384}], 'summary': 'Setting source attribute to image blank png and logging the card.', 'duration': 32.237, 'max_score': 2139.022, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk2139022.jpg'}], 'start': 1109.608, 'title': 'Building memory game', 'summary': 'Introduces building a memory game with javascript, covering setting up the project, creating html structure, linking css and javascript files, and populating an array to create a grid with images. it also covers using javascript to create a game grid with 12 cards using document query selector and the for loop method.', 'chapters': [{'end': 1882.3, 'start': 1109.608, 'title': 'Building memory game with javascript', 'summary': 'Introduces the process of building a memory game using javascript, starting with setting up the project in webstorm, creating html structure, linking css and javascript files, and populating an array to create a grid with images for the game.', 'duration': 772.692, 'highlights': ['The chapter introduces the process of building a memory game using JavaScript, starting with setting up the project in WebStorm.', 'Populating an array to create a grid with images for the game.', 'Linking CSS and JavaScript files to the HTML document for styling and functionality.', 'Creating HTML structure with basic elements and utilizing JavaScript to dynamically add elements to the game.']}, {'end': 2301.951, 'start': 1882.86, 'title': 'Creating game grid with javascript', 'summary': 'Covers the process of using javascript to create a game grid with 12 cards using the document query selector and the for loop method, allowing for the creation of image tags with unique data ids and source attributes.', 'duration': 419.091, 'highlights': ['Using document query selector to grab the div with the ID of grid', 'Creating an image tag for each item in the array using a for loop', 'Setting the source attribute of the image tag using the set attribute method']}], 'duration': 1192.343, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk1109608.jpg', 'highlights': ['Introduces building a memory game using JavaScript in WebStorm', 'Populating an array to create a grid with game images', 'Linking CSS and JavaScript files for styling and functionality', 'Creating HTML structure and dynamically adding elements with JavaScript', 'Using document query selector to grab the grid div', 'Creating an image tag for each array item using a for loop', 'Setting the source attribute of the image tag using set attribute method']}, {'end': 3849.987, 'segs': [{'end': 2335.54, 'src': 'embed', 'start': 2302.071, 'weight': 8, 'content': [{'end': 2307.994, 'text': 'Add more features, add more levels, perhaps add, you know, like level two will have many more cards.', 'start': 2302.071, 'duration': 5.923}, {'end': 2309.574, 'text': 'I mean, that is totally an option.', 'start': 2308.054, 'duration': 1.52}, {'end': 2313.136, 'text': "What I'm gonna do is actually use display flex.", 'start': 2310.495, 'duration': 2.641}, {'end': 2316.44, 'text': "Well, actually, let's give it a width first.", 'start': 2314.096, 'duration': 2.344}, {'end': 2323.01, 'text': "Let's make it 400 pixels and height 300 pixels.", 'start': 2316.68, 'duration': 6.33}, {'end': 2327.176, 'text': "This is because I'm just going off of the size of the cards I pre-made.", 'start': 2323.47, 'duration': 3.706}, {'end': 2335.54, 'text': 'So now our grid All right, we need to.', 'start': 2328.037, 'duration': 7.503}], 'summary': 'Plan to add more features and levels, with level two having many more cards. using display flex with a width of 400 pixels and height of 300 pixels based on the size of pre-made cards.', 'duration': 33.469, 'max_score': 2302.071, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk2302071.jpg'}, {'end': 2428.361, 'src': 'embed', 'start': 2403.908, 'weight': 7, 'content': [{'end': 2413.913, 'text': "Okay, so I'm going to get the array and use the property of length to find out exactly how many elements are in our array and how many times we need to loop.", 'start': 2403.908, 'duration': 10.005}, {'end': 2416.414, 'text': 'So now, there we go.', 'start': 2414.473, 'duration': 1.941}, {'end': 2422.136, 'text': 'We have all of our cards, all 12 cards.', 'start': 2417.133, 'duration': 5.003}, {'end': 2424.498, 'text': 'So this is looking good.', 'start': 2422.877, 'duration': 1.621}, {'end': 2428.361, 'text': "Maybe I'm just going to zoom in a little bit so you can see everything a little bit better.", 'start': 2424.538, 'duration': 3.823}], 'summary': 'Using the length property to loop through an array of 12 cards.', 'duration': 24.453, 'max_score': 2403.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk2403908.jpg'}, {'end': 2528.738, 'src': 'embed', 'start': 2465.289, 'weight': 0, 'content': [{'end': 2469.811, 'text': "So I'm going to shut this down now and get rid of the index HTML file as well.", 'start': 2465.289, 'duration': 4.522}, {'end': 2472.552, 'text': "And let's just focus on our JavaScript.", 'start': 2470.151, 'duration': 2.401}, {'end': 2478.321, 'text': 'So wonderful, we have created our board.', 'start': 2473.539, 'duration': 4.782}, {'end': 2487.784, 'text': "And now, once we've created our board, I'm actually going to write a function that allows us to flip the card when we click it.", 'start': 2478.341, 'duration': 9.443}, {'end': 2496.968, 'text': "So let's go ahead and write our function for this function, flip card.", 'start': 2489.105, 'duration': 7.863}, {'end': 2500.301, 'text': "So once again, there's our function.", 'start': 2498.939, 'duration': 1.362}, {'end': 2502.164, 'text': "That's what a function looks like.", 'start': 2500.341, 'duration': 1.823}, {'end': 2510.335, 'text': "And what I'm going to do is essentially think of which card I clicked on.", 'start': 2502.905, 'duration': 7.43}, {'end': 2517.815, 'text': 'So to do this, I actually need to add an event listener to each card as well.', 'start': 2513.214, 'duration': 4.601}, {'end': 2525.898, 'text': "So right here, I'm going to get the card and I'm going to use add event listener of the JavaScript method that will allow us to listen out for events.", 'start': 2518.315, 'duration': 7.583}, {'end': 2528.738, 'text': 'So in this case, I am listening out for a click.', 'start': 2526.398, 'duration': 2.34}], 'summary': 'Creating a javascript function to flip cards on a board.', 'duration': 63.449, 'max_score': 2465.289, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk2465289.jpg'}, {'end': 2609.091, 'src': 'embed', 'start': 2577.661, 'weight': 3, 'content': [{'end': 2581.842, 'text': "The next thing I'm actually going to show you how to do is on the click.", 'start': 2577.661, 'duration': 4.181}, {'end': 2586.903, 'text': 'Well, I actually want to get the card I clicked data ID.', 'start': 2581.962, 'duration': 4.941}, {'end': 2589.103, 'text': "So let's go ahead and do that now.", 'start': 2586.923, 'duration': 2.18}, {'end': 2591.924, 'text': "So I'm going to use the this keyword.", 'start': 2589.763, 'duration': 2.161}, {'end': 2598.405, 'text': 'The this keyword essentially will let us use whatever element we clicked.', 'start': 2592.564, 'duration': 5.841}, {'end': 2603.167, 'text': 'Okay and get its get attribute.', 'start': 2599.205, 'duration': 3.962}, {'end': 2609.091, 'text': "So I'm going to use get attribute to get its data ID.", 'start': 2603.467, 'duration': 5.624}], 'summary': 'Demonstrating how to retrieve data id on click using this keyword.', 'duration': 31.43, 'max_score': 2577.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk2577661.jpg'}, {'end': 2832.951, 'src': 'embed', 'start': 2805.962, 'weight': 10, 'content': [{'end': 2809.803, 'text': "I can use const because you know, we're not gonna be changing the array.", 'start': 2805.962, 'duration': 3.841}, {'end': 2811.343, 'text': "We're just gonna be pushing things into it.", 'start': 2809.823, 'duration': 1.52}, {'end': 2813.044, 'text': 'So it can be a const.', 'start': 2811.403, 'duration': 1.641}, {'end': 2817.686, 'text': 'In fact, you know, some people would argue and say that for best practice, it should be a const.', 'start': 2813.164, 'duration': 4.522}, {'end': 2824.148, 'text': "So I'm going to get the array and I'm going to use the JavaScript message method of push to push an item into that array.", 'start': 2818.066, 'duration': 6.082}, {'end': 2826.009, 'text': 'And what I want to push through is just the name.', 'start': 2824.188, 'duration': 1.821}, {'end': 2828.609, 'text': 'Okay So there we go.', 'start': 2826.029, 'duration': 2.58}, {'end': 2832.951, 'text': 'And if I console log the cars chosen now.', 'start': 2828.629, 'duration': 4.322}], 'summary': "Using 'const' to push items into an array in javascript.", 'duration': 26.989, 'max_score': 2805.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk2805962.jpg'}, {'end': 2966.315, 'src': 'embed', 'start': 2936.095, 'weight': 5, 'content': [{'end': 2938.056, 'text': "So for this, I'm going to use set timeout.", 'start': 2936.095, 'duration': 1.961}, {'end': 2943.726, 'text': "And I'm just going to pass through a function that I want to check.", 'start': 2939.884, 'duration': 3.842}, {'end': 2952.669, 'text': 'So set timer as a timing event or yes, a JavaScript method that will essentially call a function after a certain amount of time has passed.', 'start': 2943.766, 'duration': 8.903}, {'end': 2956.231, 'text': 'So I want the first parameter you need to pass through is the function.', 'start': 2953.07, 'duration': 3.161}, {'end': 2962.253, 'text': "So we're going to write a function called check match.", 'start': 2956.411, 'duration': 5.842}, {'end': 2966.315, 'text': "And the second is going to be the time that I won't pass before we call this function.", 'start': 2962.774, 'duration': 3.541}], 'summary': "Using settimeout to call the function 'check match' after a specified time.", 'duration': 30.22, 'max_score': 2936.095, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk2936095.jpg'}, {'end': 3108.032, 'src': 'embed', 'start': 3083.494, 'weight': 12, 'content': [{'end': 3090.339, 'text': "So in fact, right before we do this, I'm gonna write something that will get every single card on my grid.", 'start': 3083.494, 'duration': 6.845}, {'end': 3099.667, 'text': "And I'm gonna do this with document query selector, but I'm gonna choose query selector or to look for all the cards.", 'start': 3090.399, 'duration': 9.268}, {'end': 3108.032, 'text': "So essentially all the, let's say all the image elements that live inside my div with the ID of grid.", 'start': 3099.927, 'duration': 8.105}], 'summary': 'Using document query selector to retrieve all image elements inside a div with the id of grid.', 'duration': 24.538, 'max_score': 3083.494, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk3083494.jpg'}, {'end': 3195.244, 'src': 'embed', 'start': 3150.523, 'weight': 2, 'content': [{'end': 3160.348, 'text': 'I want to get the cards and I need to go into the cards and find the cards by their IDs.', 'start': 3150.523, 'duration': 9.825}, {'end': 3173.593, 'text': "So, just like we're saving the names of our chosen cards here, I'm actually going to also make another array const,", 'start': 3160.868, 'duration': 12.725}, {'end': 3187.86, 'text': "and let's call this cards chosen IDs and make this an empty array too.", 'start': 3173.593, 'duration': 14.267}, {'end': 3195.244, 'text': "So when we push the card and we're pushing in the name, but I'm also going to push its ID in.", 'start': 3188.46, 'duration': 6.784}], 'summary': 'Creating an array to store chosen card ids while pushing card names.', 'duration': 44.721, 'max_score': 3150.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk3150523.jpg'}, {'end': 3428.516, 'src': 'embed', 'start': 3399.896, 'weight': 6, 'content': [{'end': 3411.039, 'text': "So all I'm going to do is cards one and I'm going to push in the content of the cards chosen array,", 'start': 3399.896, 'duration': 11.143}, {'end': 3415.921, 'text': 'which will either be something like hamburger and fries, okay, or whatever.', 'start': 3411.039, 'duration': 4.882}, {'end': 3416.561, 'text': 'two matches.', 'start': 3415.921, 'duration': 0.64}, {'end': 3418.922, 'text': "I guess, if it's matched, there'll be hamburger hamburger.", 'start': 3416.561, 'duration': 2.361}, {'end': 3420.972, 'text': 'So there we go.', 'start': 3419.932, 'duration': 1.04}, {'end': 3424.614, 'text': 'We are recording how many cards we have won, how many matches we have.', 'start': 3421.052, 'duration': 3.562}, {'end': 3428.516, 'text': 'Great And of course we then need to start again.', 'start': 3425.454, 'duration': 3.062}], 'summary': 'Recording card matches, tracking wins, and resetting for new games.', 'duration': 28.62, 'max_score': 3399.896, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk3399896.jpg'}], 'start': 2302.071, 'title': 'Memory card game logic', 'summary': "Covers creating a board and implementing a function to flip cards upon clicking, using event listeners to detect clicks, obtaining and storing the card's data id and name, adding the card to an array for matching purposes, setting attributes, utilizing settimeout method, and checking for a match in a javascript function. additionally, it explains saving card ids, matching cards, recording matches, and displaying results.", 'chapters': [{'end': 2465.269, 'start': 2302.071, 'title': 'Adding features and styling grid', 'summary': 'Discusses adding more features such as levels and cards, and styling a grid with a width of 400 pixels and height of 300 pixels, utilizing display flex and flex wrap to ensure all cards wrap over each other nicely.', 'duration': 163.198, 'highlights': ['Styling the grid with a width of 400 pixels and height of 300 pixels, utilizing display flex and flex wrap to ensure all cards wrap over each other nicely.', 'Looping through an array to get the length and ensure all 12 cards are displayed, instead of just looping 10 times.', 'Discussing the option of adding more levels with many more cards to the game.']}, {'end': 2824.148, 'start': 2465.289, 'title': 'Javascript card flip game', 'summary': "Covers creating a board and implementing a function to flip cards upon clicking, using event listeners to detect clicks, obtaining and storing the card's data id and name, and adding the card to an array for matching purposes.", 'duration': 358.859, 'highlights': ['Creating a board and implementing a function to flip cards upon clicking', "Using event listeners to detect clicks and obtain the card's data ID", "Storing the card's name in an array for matching purposes"]}, {'end': 3150.443, 'start': 2824.188, 'title': 'Memory card game logic', 'summary': 'Covers the logic for a memory card game, including adding items to an array, setting attributes, using settimeout method, and checking for a match in a javascript function.', 'duration': 326.255, 'highlights': ['Adding items to an array and clearing it', 'Setting attributes using setAttribute method', 'Using settimeout method for timing events', 'Checking for a match in a JavaScript function', 'Selecting elements using document querySelector']}, {'end': 3849.987, 'start': 3150.523, 'title': 'Memory card game logic', 'summary': 'Explains the logic for a memory card game, including saving card ids, matching cards, recording matches, and displaying results.', 'duration': 699.464, 'highlights': ['The logic for saving card IDs and names is explained, with the use of arrays to store chosen card details.', 'The process of matching and manipulating card elements based on their IDs is demonstrated, including changing the background color and removing event listeners.', 'The method for recording and resetting the number of matches is outlined, including pushing matched card content into an array and resetting the chosen card array.']}], 'duration': 1547.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk2302071.jpg', 'highlights': ['Creating a board and implementing a function to flip cards upon clicking', "Using event listeners to detect clicks and obtain the card's data ID", 'The logic for saving card IDs and names is explained, with the use of arrays to store chosen card details', 'Setting attributes using setAttribute method', 'The process of matching and manipulating card elements based on their IDs is demonstrated, including changing the background color and removing event listeners', 'Using settimeout method for timing events', 'The method for recording and resetting the number of matches is outlined, including pushing matched card content into an array and resetting the chosen card array', 'Looping through an array to get the length and ensure all 12 cards are displayed, instead of just looping 10 times', 'Discussing the option of adding more levels with many more cards to the game', 'Styling the grid with a width of 400 pixels and height of 300 pixels, utilizing display flex and flex wrap to ensure all cards wrap over each other nicely', 'Adding items to an array and clearing it', 'Checking for a match in a JavaScript function', 'Selecting elements using document querySelector']}, {'end': 5462.217, 'segs': [{'end': 3915.499, 'src': 'embed', 'start': 3887.982, 'weight': 0, 'content': [{'end': 3894.464, 'text': 'This game will involve us having to build a grid that randomly displays a mole that we have to click with our mouse in order to get a point.', 'start': 3887.982, 'duration': 6.482}, {'end': 3897.725, 'text': 'We have to get as many points as possible in the time we define.', 'start': 3895.045, 'duration': 2.68}, {'end': 3902.667, 'text': 'By the end of this tutorial, you will have used all of the following JavaScript methods and properties.', 'start': 3898.306, 'duration': 4.361}, {'end': 3905.648, 'text': "So what are we waiting for? Let's get to it.", 'start': 3903.327, 'duration': 2.321}, {'end': 3908.417, 'text': 'Okay, so first things.', 'start': 3906.937, 'duration': 1.48}, {'end': 3915.499, 'text': 'first, here is my file setup, in which I have some standard HTML boilerplate,', 'start': 3908.417, 'duration': 7.082}], 'summary': 'Build a game grid to click on randomly appearing moles to score points using javascript methods and properties.', 'duration': 27.517, 'max_score': 3887.982, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk3887982.jpg'}, {'end': 4033.169, 'src': 'embed', 'start': 4004.241, 'weight': 3, 'content': [{'end': 4011.665, 'text': "While we are here, I'm also going to add a h2 tag for the score.", 'start': 4004.241, 'duration': 7.424}, {'end': 4014.827, 'text': 'So I actually want my score to show up here.', 'start': 4012.265, 'duration': 2.562}, {'end': 4021.09, 'text': "I'm going to hardcore code it as zero and just give this idea of score so we can pick it out later with our JavaScript.", 'start': 4014.827, 'duration': 6.263}, {'end': 4029.268, 'text': 'I also want to have another h2 tag that is going to tell us how much time we have left.', 'start': 4022.085, 'duration': 7.183}, {'end': 4033.169, 'text': 'So I want the game to count down from 60 seconds.', 'start': 4030.088, 'duration': 3.081}], 'summary': 'Add h2 tags for score and time remaining, set score to zero, and countdown from 60 seconds.', 'duration': 28.928, 'max_score': 4004.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk4004241.jpg'}, {'end': 4249.654, 'src': 'embed', 'start': 4220.728, 'weight': 4, 'content': [{'end': 4229.05, 'text': 'We now get the nine divs stacks over each other, what we need is for them to snake over each other so that can fit in.', 'start': 4220.728, 'duration': 8.322}, {'end': 4235.191, 'text': 'And I can do so by adding display flex to my grid.', 'start': 4229.07, 'duration': 6.121}, {'end': 4241.192, 'text': 'So now if I refresh it, see all the squares will try fit into my grid.', 'start': 4235.771, 'duration': 5.421}, {'end': 4245.713, 'text': "So if I go on grid, there's the grid, and they're all trying to fit in it.", 'start': 4242.192, 'duration': 3.521}, {'end': 4249.654, 'text': 'I want them to stack over each other like a snake.', 'start': 4246.833, 'duration': 2.821}], 'summary': 'Using display flex in grid to stack squares like a snake.', 'duration': 28.926, 'max_score': 4220.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk4220728.jpg'}, {'end': 4520.379, 'src': 'embed', 'start': 4492.937, 'weight': 1, 'content': [{'end': 4497.298, 'text': "Even though we've hard coded it, we need to tell our JavaScript the result that we start with a zero.", 'start': 4492.937, 'duration': 4.361}, {'end': 4500.919, 'text': "And we'll do the time a little bit later.", 'start': 4498.138, 'duration': 2.781}, {'end': 4508.481, 'text': "Let's actually focus on getting the game to work.", 'start': 4502.86, 'duration': 5.621}, {'end': 4517.499, 'text': "So I'm going to write a function called random square.", 'start': 4509.781, 'duration': 7.718}, {'end': 4520.379, 'text': 'So we want to get a random square to put our mole.', 'start': 4517.599, 'duration': 2.78}], 'summary': 'Javascript code needs to start with zero, focus on getting the game to work, and create a function for random square placement.', 'duration': 27.442, 'max_score': 4492.937, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk4492937.jpg'}, {'end': 5095.22, 'src': 'embed', 'start': 5060.266, 'weight': 2, 'content': [{'end': 5065.748, 'text': 'Oops So clear out hit position equals null again.', 'start': 5060.266, 'duration': 5.482}, {'end': 5067.965, 'text': 'Okay, cool.', 'start': 5066.124, 'duration': 1.841}, {'end': 5072.287, 'text': 'I can just spell that right hit position.', 'start': 5070.366, 'duration': 1.921}, {'end': 5074.447, 'text': 'So this is looking good.', 'start': 5073.267, 'duration': 1.18}, {'end': 5076.328, 'text': 'So amazing.', 'start': 5074.567, 'duration': 1.761}, {'end': 5079.209, 'text': "So that's what happens if we hit a mole.", 'start': 5076.368, 'duration': 2.841}, {'end': 5080.63, 'text': "Let's see if that has worked.", 'start': 5079.249, 'duration': 1.381}, {'end': 5092.918, 'text': "Now we've got that working, we are adding a score each time we hit it, the last thing we need to do is actually get our timer to stop working.", 'start': 5084.83, 'duration': 8.088}, {'end': 5095.22, 'text': "So let's do that.", 'start': 5093.598, 'duration': 1.622}], 'summary': 'Code debugging and testing successful; added scoring system and working on timer functionality.', 'duration': 34.954, 'max_score': 5060.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk5060266.jpg'}], 'start': 3852.898, 'title': 'Developing whack-a-mole game with css grid and javascript', 'summary': 'Covers building a whack-a-mole game using html, css, and javascript, including creating a grid layout, implementing a 60-second countdown, using css grid for square placement, and developing javascript logic for mole movement and scoring.', 'chapters': [{'end': 4219.003, 'start': 3852.898, 'title': 'Building a whack-a-mole game', 'summary': 'Demonstrates building a game of whack-a-mole involving a grid with randomly displayed moles to click on within a defined time, using basic html and css with the score displayed and a 60-second countdown, ready for javascript integration.', 'duration': 366.105, 'highlights': ['The game involves building a grid that randomly displays a mole to click on within a defined time to earn points.', 'Basic HTML and CSS setup includes the grid, score display, and a 60-second countdown.', 'Instructions for styling the grid using CSS, including setting dimensions and adding borders.']}, {'end': 4756.142, 'start': 4220.728, 'title': 'Css grid layout and javascript logic', 'summary': 'Discusses using css grid and javascript to create a grid layout for squares to fit in and implementing logic to select random squares and remove the mole class, with the code displaying a random square id from 1 to 9.', 'duration': 535.414, 'highlights': ['Using display flex and flex wrap to create a grid layout for squares to fit in', 'Assigning a class of mole to a square and selecting all squares and the mole using JavaScript', 'Implementing a function to select a random square and remove the mole class if it exists']}, {'end': 4917.952, 'start': 4756.202, 'title': 'Implementing timer for random square movement', 'summary': 'Details the implementation of a timer using the javascript set interval method to move a mole to a random square every 500 milliseconds and provides the option to attach it to a button for user interaction.', 'duration': 161.75, 'highlights': ['The function utilizes the JavaScript set interval method to move the mole to a random square at an interval of 500 milliseconds.', 'The option to attach the function to a button is provided for user interaction.', 'The random square with the mole lights up every 500 milliseconds upon page load.']}, {'end': 5462.217, 'start': 4919.874, 'title': 'Whack-a-mole game development', 'summary': 'Details the development of a whack-a-mole game, including functionality such as scoring points for hitting the mole, implementing a timer, and adding visual elements like the mole image, with a focus on javascript programming.', 'duration': 542.343, 'highlights': ['Implementing functionality to score points for hitting the mole', 'Adding a countdown timer for the game', 'Incorporating the mole image into the game']}], 'duration': 1609.319, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk3852898.jpg', 'highlights': ['The game involves building a grid that randomly displays a mole to click on within a defined time to earn points.', 'The function utilizes the JavaScript set interval method to move the mole to a random square at an interval of 500 milliseconds.', 'Implementing functionality to score points for hitting the mole', 'Basic HTML and CSS setup includes the grid, score display, and a 60-second countdown.', 'Using display flex and flex wrap to create a grid layout for squares to fit in']}, {'end': 6966.669, 'segs': [{'end': 5493.462, 'src': 'embed', 'start': 5462.217, 'weight': 1, 'content': [{'end': 5467.179, 'text': 'I would love for you to take this game, style it up, give it extra levels and share it with us on Twitter.', 'start': 5462.217, 'duration': 4.962}, {'end': 5469.221, 'text': "I can't wait to see what you built.", 'start': 5467.6, 'duration': 1.621}, {'end': 5472.47, 'text': "Okay, so let's get to it.", 'start': 5470.129, 'duration': 2.341}, {'end': 5476.253, 'text': 'The first thing that I want to show you is my setup for the game.', 'start': 5473.131, 'duration': 3.122}, {'end': 5481.576, 'text': "So as always, I've created an index HTML file or some boilerplate.", 'start': 5476.873, 'duration': 4.703}, {'end': 5487.219, 'text': "So I've simply given our project a title, I've linked our style sheet.", 'start': 5482.016, 'duration': 5.203}, {'end': 5493.462, 'text': 'So this cell CSS file to the HTML file, making sure that the path is correct.', 'start': 5487.699, 'duration': 5.763}], 'summary': 'Enhance and share the game with extra levels on twitter.', 'duration': 31.245, 'max_score': 5462.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk5462217.jpg'}, {'end': 5580.5, 'src': 'embed', 'start': 5548.571, 'weight': 2, 'content': [{'end': 5554.413, 'text': "So like that, which I'm now going to style up in my cell CSS file.", 'start': 5548.571, 'duration': 5.842}, {'end': 5561.856, 'text': 'So I am picking up the class of grid and I am telling my CSS file to class by using this dot.', 'start': 5554.953, 'duration': 6.903}, {'end': 5568.758, 'text': "So let's make our grid I don't know 600 pixels and a height of 300 pixels.", 'start': 5563.436, 'duration': 5.322}, {'end': 5573.14, 'text': "And I'm just going to give it a border of solid black.", 'start': 5569.359, 'duration': 3.781}, {'end': 5576.256, 'text': 'one pixel so we can see it.', 'start': 5574.815, 'duration': 1.441}, {'end': 5580.5, 'text': 'So go over here, copy the path.', 'start': 5577.177, 'duration': 3.323}], 'summary': 'Styling grid class with 600x300 pixels, solid border', 'duration': 31.929, 'max_score': 5548.571, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk5548571.jpg'}, {'end': 5709.999, 'src': 'embed', 'start': 5678.52, 'weight': 8, 'content': [{'end': 5680.241, 'text': 'So not on here, I want to use on the block.', 'start': 5678.52, 'duration': 1.721}, {'end': 5688.447, 'text': "So I'm essentially using my JavaScript going to be adding left margin and bottom margin to all the blocks to position them.", 'start': 5681.584, 'duration': 6.863}, {'end': 5700.111, 'text': "So what I mean by this is if I just go left, 50 pixels, refresh, I've moved the block left, 50 pixels from this point right here.", 'start': 5689.067, 'duration': 11.044}, {'end': 5706.194, 'text': "okay, we'll essentially from this, but I want to make this this sort of anchor point of our block.", 'start': 5700.111, 'duration': 6.083}, {'end': 5709.999, 'text': "So I'm going to be using left and bottom to do so.", 'start': 5707.358, 'duration': 2.641}], 'summary': 'Using javascript to position blocks with left and bottom margins.', 'duration': 31.479, 'max_score': 5678.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk5678520.jpg'}, {'end': 5864.385, 'src': 'embed', 'start': 5835.88, 'weight': 0, 'content': [{'end': 5842.685, 'text': "So I'm not making up that exists to put in our newly created block with this style of block.", 'start': 5835.88, 'duration': 6.805}, {'end': 5846.596, 'text': "Okay, so let's go check it out.", 'start': 5844.335, 'duration': 2.261}, {'end': 5847.797, 'text': 'And then we go.', 'start': 5847.256, 'duration': 0.541}, {'end': 5854, 'text': "We've done that with JavaScript, okay, we've deleted the one we hard coded, and we've added that with JavaScript.", 'start': 5848.537, 'duration': 5.463}, {'end': 5855.841, 'text': 'So that is pretty cool.', 'start': 5854.98, 'duration': 0.861}, {'end': 5858.022, 'text': 'But I need 15 of these.', 'start': 5856.981, 'duration': 1.041}, {'end': 5860.203, 'text': 'So I need 15 of these.', 'start': 5858.742, 'duration': 1.461}, {'end': 5864.385, 'text': "And for each one of these, so I'm going to use grid style.", 'start': 5860.503, 'duration': 3.882}], 'summary': 'Created 15 new blocks using javascript and grid style.', 'duration': 28.505, 'max_score': 5835.88, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk5835880.jpg'}, {'end': 5993.801, 'src': 'embed', 'start': 5963.81, 'weight': 7, 'content': [{'end': 5968.954, 'text': "So to do this, I'm going to create a class a block class.", 'start': 5963.81, 'duration': 5.144}, {'end': 5972.497, 'text': 'So create block individual.', 'start': 5969.795, 'duration': 2.702}, {'end': 5976.62, 'text': "And I'm going to use class for this.", 'start': 5972.517, 'duration': 4.103}, {'end': 5980.303, 'text': "So class block, let's start off, we want to deal with a class.", 'start': 5976.84, 'duration': 3.463}, {'end': 5983.119, 'text': 'then for this, I need a constructor.', 'start': 5981.599, 'duration': 1.52}, {'end': 5993.801, 'text': 'So once again, as we discussed in an x and y axis, so x axis, y axis, and this is gonna be the bottom left of our block.', 'start': 5983.739, 'duration': 10.062}], 'summary': 'Creating a block class with x and y axis for bottom left position.', 'duration': 29.991, 'max_score': 5963.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk5963810.jpg'}, {'end': 6628.302, 'src': 'embed', 'start': 6594.008, 'weight': 5, 'content': [{'end': 6600.632, 'text': "I'm pretty happy with this, we've drawn our blocks, let's get to creating a user.", 'start': 6594.008, 'duration': 6.624}, {'end': 6618.743, 'text': "So just like we did before, user, I'm going to store as user, I'm going to get my document, I'm going to create elements, I want to create a div.", 'start': 6601.453, 'duration': 17.29}, {'end': 6622.986, 'text': 'Now user, I want to style class list add.', 'start': 6620.204, 'duration': 2.782}, {'end': 6625.341, 'text': 'And I need to make a.', 'start': 6623.96, 'duration': 1.381}, {'end': 6628.302, 'text': 'essentially, I just want to make it the same as a block.', 'start': 6625.341, 'duration': 2.961}], 'summary': 'Creating a user by storing information and creating elements, including a div and styling class list add.', 'duration': 34.294, 'max_score': 6594.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk6594008.jpg'}, {'end': 6796.603, 'src': 'embed', 'start': 6763.905, 'weight': 6, 'content': [{'end': 6771.209, 'text': "Cool So now if you refresh, that's where our block where our user block will show up.", 'start': 6763.905, 'duration': 7.304}, {'end': 6773.81, 'text': "Okay, so we've done that.", 'start': 6772.67, 'duration': 1.14}, {'end': 6778.913, 'text': "Now let's get to moving our user left and right.", 'start': 6774.611, 'duration': 4.302}, {'end': 6781.295, 'text': "So I'm going to do this.", 'start': 6780.074, 'duration': 1.221}, {'end': 6785.197, 'text': "So we've added our user, move user.", 'start': 6781.315, 'duration': 3.882}, {'end': 6790.72, 'text': "Okay, to move our user, we're going to have to use keys.", 'start': 6787.678, 'duration': 3.042}, {'end': 6796.603, 'text': "So I'm actually gonna write a function called move user and pass through an event.", 'start': 6791.86, 'duration': 4.743}], 'summary': 'Developing user movement functionality using keys and events.', 'duration': 32.698, 'max_score': 6763.905, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk6763905.jpg'}], 'start': 5462.217, 'title': 'Game development setup and block creation', 'summary': 'Covers setting up the game with html, css, and javascript, creating a grid and dynamically generating 15 blocks, demonstrating creating and styling blocks using javascript, and creating a user element with specified positions and movement options.', 'chapters': [{'end': 5835.579, 'start': 5462.217, 'title': 'Game development setup and block creation', 'summary': 'Covers setting up the game with html, css, and javascript, creating a grid and blocks, and using javascript to dynamically generate and position 15 blocks within the grid.', 'duration': 373.362, 'highlights': ['Creating and styling the game setup with HTML and CSS', 'Creating a grid and styling it with CSS', 'Dynamically generating and positioning blocks with JavaScript']}, {'end': 6470.991, 'start': 5835.88, 'title': 'Creating and styling blocks with javascript', 'summary': 'Discusses creating and styling blocks using javascript, demonstrating how to dynamically generate 15 blocks with individual positions on a grid, utilizing a class and constructor to define block properties and leveraging a for loop to create and style multiple blocks.', 'duration': 635.111, 'highlights': ['Demonstration of dynamically generating 15 blocks with individual positions on a grid using JavaScript.', 'Explanation of utilizing a class and constructor to define block properties such as x and y coordinates, width, and height.', 'Utilization of a for loop to create and style multiple blocks with individual positions on the grid.']}, {'end': 6966.669, 'start': 6471.691, 'title': 'Creating user and moving blocks', 'summary': 'Covers creating and positioning blocks on a grid by adding 110 pixels to the left, adjusting grid size to 560, and moving the y-axis to 240. it then details the process of creating and styling a user element, setting its initial position at (230, 10) and enabling left and right movement by 10 pixels.', 'duration': 494.978, 'highlights': ['Creating and positioning blocks on a grid', 'Creating and styling a user element', 'Enabling left and right movement for the user element']}], 'duration': 1504.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk5462217.jpg', 'highlights': ['Demonstration of dynamically generating 15 blocks with individual positions on a grid using JavaScript.', 'Creating and styling the game setup with HTML and CSS', 'Creating a grid and styling it with CSS', 'Utilization of a for loop to create and style multiple blocks with individual positions on the grid', 'Creating and positioning blocks on a grid', 'Creating and styling a user element', 'Enabling left and right movement for the user element', 'Explanation of utilizing a class and constructor to define block properties such as x and y coordinates, width, and height', 'Dynamically generating and positioning blocks with JavaScript']}, {'end': 9083.677, 'segs': [{'end': 6994.801, 'src': 'embed', 'start': 6966.769, 'weight': 1, 'content': [{'end': 6971.714, 'text': 'I think he down makes more sense than listening out for when you take your finger off a key.', 'start': 6966.769, 'duration': 4.945}, {'end': 6976.018, 'text': "And I'm going to put move user, so the function.", 'start': 6973.395, 'duration': 2.623}, {'end': 6980.794, 'text': "So anytime I press a key down on the keyboard, we're going to listen.", 'start': 6976.772, 'duration': 4.022}, {'end': 6982.475, 'text': "I'm going to invoke this function.", 'start': 6980.794, 'duration': 1.681}, {'end': 6986.517, 'text': 'And then see if the key is our left.', 'start': 6983.695, 'duration': 2.822}, {'end': 6994.06, 'text': "And if it is, we're going to move the x axis of our current position 10.", 'start': 6986.957, 'duration': 7.103}, {'end': 6994.801, 'text': "So let's do this.", 'start': 6994.06, 'duration': 0.741}], 'summary': 'A function is invoked when a key is pressed to move left on the x-axis by 10 units.', 'duration': 28.032, 'max_score': 6966.769, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk6966769.jpg'}, {'end': 7562.359, 'src': 'embed', 'start': 7519.975, 'weight': 3, 'content': [{'end': 7528.642, 'text': 'The next thing I want to do is only make the one I want to change the direction of a ball if it hits a wall.', 'start': 7519.975, 'duration': 8.667}, {'end': 7533.793, 'text': "So let's write a function called collisions.", 'start': 7530.191, 'duration': 3.602}, {'end': 7536.714, 'text': "Now let's actually write the function.", 'start': 7535.074, 'duration': 1.64}, {'end': 7540.396, 'text': 'So function check for collisions.', 'start': 7536.754, 'duration': 3.642}, {'end': 7558.746, 'text': "Okay, so first off, let's check for wall collisions.", 'start': 7547.4, 'duration': 11.346}, {'end': 7562.359, 'text': 'as I said, collisions.', 'start': 7559.457, 'duration': 2.902}], 'summary': 'Creating a function to detect wall collisions in a ball game.', 'duration': 42.384, 'max_score': 7519.975, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk7519975.jpg'}, {'end': 8374.816, 'src': 'embed', 'start': 8335.224, 'weight': 2, 'content': [{'end': 8346.868, 'text': 'So for let i equals zero, as long as i is smaller than the blocks length, we increment i like so.', 'start': 8335.224, 'duration': 11.644}, {'end': 8364.01, 'text': "Okay, now I'm gonna have to essentially check if the ball is in between the blocks bottom left x axis and bottom right x axis.", 'start': 8347.888, 'duration': 16.122}, {'end': 8369.653, 'text': 'so the bottom width and also in the height, okay.', 'start': 8364.01, 'duration': 5.643}, {'end': 8374.816, 'text': "so if any, if it's in there, if it's in there, we know it's a collision right?", 'start': 8369.653, 'duration': 5.163}], 'summary': 'Iterate through blocks to check for collision with the ball.', 'duration': 39.592, 'max_score': 8335.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk8335224.jpg'}, {'end': 8959.531, 'src': 'embed', 'start': 8916.723, 'weight': 4, 'content': [{'end': 8918.444, 'text': "And let's check for a win.", 'start': 8916.723, 'duration': 1.721}, {'end': 8921.367, 'text': "So I'm gonna do that.", 'start': 8919.265, 'duration': 2.102}, {'end': 8929.812, 'text': "here So we've just added to the score.", 'start': 8925.928, 'duration': 3.884}, {'end': 8940.403, 'text': "Check for when, if the I guess we're going to check the length of the blocks length.", 'start': 8931.854, 'duration': 8.549}, {'end': 8945.729, 'text': 'So blocks, length, deeply equals zero.', 'start': 8940.463, 'duration': 5.266}, {'end': 8954.707, 'text': "Well, we're going to get the score display, use inner HTML to display you win.", 'start': 8947.782, 'duration': 6.925}, {'end': 8957.129, 'text': "And once again, we're going to stop the game.", 'start': 8955.548, 'duration': 1.581}, {'end': 8959.531, 'text': 'So clear interval, timer ID.', 'start': 8957.169, 'duration': 2.362}], 'summary': 'Added to score, checked block length, displayed win message, and stopped game', 'duration': 42.808, 'max_score': 8916.723, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk8916723.jpg'}, {'end': 9058.877, 'src': 'embed', 'start': 9023.154, 'weight': 0, 'content': [{'end': 9025.295, 'text': 'You can also mess around with the score.', 'start': 9023.154, 'duration': 2.141}, {'end': 9029.659, 'text': 'So for example, if you pass one level, you could increase the speed of the ball.', 'start': 9025.315, 'duration': 4.344}, {'end': 9031.921, 'text': "I'll show you how to do that in a second.", 'start': 9030.32, 'duration': 1.601}, {'end': 9034.303, 'text': 'That could be quite fun.', 'start': 9033.122, 'duration': 1.181}, {'end': 9037.746, 'text': 'You can also make your paddle smaller.', 'start': 9035.284, 'duration': 2.462}, {'end': 9040.248, 'text': "There's so much there's so much you could do.", 'start': 9038.246, 'duration': 2.002}, {'end': 9049.833, 'text': 'So once again, come on, just gonna hit one more.', 'start': 9041.589, 'duration': 8.244}, {'end': 9057.316, 'text': 'So hit that one and then see if I can do this one.', 'start': 9050.013, 'duration': 7.303}, {'end': 9058.877, 'text': 'Come on.', 'start': 9058.037, 'duration': 0.84}], 'summary': 'Tutorial on customizing game elements and experimenting with score, ball speed, and paddle size.', 'duration': 35.723, 'max_score': 9023.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk9023154.jpg'}], 'start': 6966.769, 'title': 'Game development with javascript', 'summary': 'Covers keyboard input for user movement within a 560-pixel wide board, creating and moving a ball, implementing collision detection for wall and block collisions, and creating a simple game with scoring and win condition.', 'chapters': [{'end': 7121.66, 'start': 6966.769, 'title': 'Keyboard input and user movement', 'summary': 'Demonstrates how to use keyboard input to move a user on the x-axis, restricting movement beyond the canvas boundaries, with a board width of 560 pixels, and adjusting the position by 10 pixels per key press.', 'duration': 154.891, 'highlights': ['The function listens for key presses and moves the user based on the pressed key, adjusting the x-axis position by 10 pixels. It includes logic to restrict movement beyond the canvas boundaries.', "An if statement is used to ensure that the user's position does not go off the canvas, with a condition to restrict movement when the x-axis position is larger than 0 or smaller than the board width of 560 pixels."]}, {'end': 7519.455, 'start': 7123.655, 'title': 'Creating and moving a ball', 'summary': 'Describes the process of creating and moving a ball within a grid using javascript, including setting its initial position, styling, and movement intervals.', 'duration': 395.8, 'highlights': ['The chapter details the process of creating a ball within a grid, specifying its dimensions, styling, and position.', 'It explains the process of moving the ball within the grid by adding x and y axis values, and setting intervals for its movement.', "The chapter also addresses the need to change the ball's direction when it hits the walls of the grid, and the use of timer IDs and clearing intervals for managing the ball's movement."]}, {'end': 8243.799, 'start': 7519.975, 'title': 'Ball collision detection', 'summary': 'Discusses implementing collision detection for a ball hitting the walls, including a function to change its direction when the ball hits the wall, and testing the functionality with different wall collisions.', 'duration': 723.824, 'highlights': ["The function check for collisions is written to detect wall collisions and change the ball's direction if it hits the wall, with specific conditions based on the ball's position and board dimensions.", "The change direction function is implemented to modify the ball's movement direction when a collision with the wall occurs, using x and y directions as variables to control the ball's movement.", 'The code is tested to ensure that the ball changes direction upon hitting different walls, and rules are set for changing the direction when the ball hits the top, bottom, left, and right walls of the board.']}, {'end': 8672.164, 'start': 8246.124, 'title': 'Collision detection and block removal', 'summary': 'Explains the process of collision detection and block removal in a game, including checking for collisions with blocks, identifying the block to remove, and updating the game interface.', 'duration': 426.04, 'highlights': ["The chapter details the process of checking for collisions with blocks by iterating through the blocks and comparing the ball's position with the block's coordinates.", 'The transcript explains the removal of the collided block by removing its visual representation and updating the array containing the blocks.']}, {'end': 9083.677, 'start': 8673.325, 'title': 'Creating a simple game with javascript', 'summary': 'Covers the creation of a simple game using javascript, including implementing collision detection, scoring, win condition, and potential game enhancements.', 'duration': 410.352, 'highlights': ["Implementing collision detection for the game, checking for collisions with the paddle and changing the ball's direction accordingly.", 'Adding scoring functionality to the game, incrementing the score when the ball hits the paddle and displaying the score on the HTML page.', "Checking for win condition by evaluating the length of the blocks and displaying 'You win' using inner HTML when all blocks are destroyed."]}], 'duration': 2116.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk6966769.jpg', 'highlights': ['Adding scoring functionality to the game, incrementing the score when the ball hits the paddle and displaying the score on the HTML page.', 'The function listens for key presses and moves the user based on the pressed key, adjusting the x-axis position by 10 pixels. It includes logic to restrict movement beyond the canvas boundaries.', "The chapter details the process of checking for collisions with blocks by iterating through the blocks and comparing the ball's position with the block's coordinates.", "The function check for collisions is written to detect wall collisions and change the ball's direction if it hits the wall, with specific conditions based on the ball's position and board dimensions.", "Checking for win condition by evaluating the length of the blocks and displaying 'You win' using inner HTML when all blocks are destroyed."]}, {'end': 10152.741, 'segs': [{'end': 9246.571, 'src': 'embed', 'start': 9215.322, 'weight': 3, 'content': [{'end': 9220.664, 'text': "So I'm going to actually build the grid in HTML and then add functionality to the grid.", 'start': 9215.322, 'duration': 5.342}, {'end': 9224.565, 'text': 'And my game of Frogger is going to be nine by nine squares.', 'start': 9221.264, 'duration': 3.301}, {'end': 9229.507, 'text': 'Okay, so this is what the game is going to look like as a reminder again,', 'start': 9224.585, 'duration': 4.922}, {'end': 9235.409, 'text': "and I'm going to go ahead and create those 81 squares in the index HTML file.", 'start': 9229.507, 'duration': 5.902}, {'end': 9246.571, 'text': 'So the reason I actually just want to do it in the index HTML is just because each div has is going to have a different class.', 'start': 9236.349, 'duration': 10.222}], 'summary': 'Building a 9x9 grid in html for a game of frogger.', 'duration': 31.249, 'max_score': 9215.322, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk9215322.jpg'}, {'end': 9404.643, 'src': 'embed', 'start': 9368.495, 'weight': 0, 'content': [{'end': 9374.2, 'text': 'One, two, three, four, five, six, seven, eight, nine.', 'start': 9368.495, 'duration': 5.705}, {'end': 9387.608, 'text': "And now just like we did with the logs, we're going to do the same for cars going left and cars going right.", 'start': 9378.82, 'duration': 8.788}, {'end': 9392.372, 'text': 'So obviously we have to look out for the cars.', 'start': 9389.83, 'duration': 2.542}, {'end': 9394.874, 'text': "So I'm actually going to take all of these again.", 'start': 9392.752, 'duration': 2.122}, {'end': 9398.798, 'text': "And this time I'm just going to replace log with car.", 'start': 9396.676, 'duration': 2.122}, {'end': 9400.239, 'text': 'So control C controls.', 'start': 9399.118, 'duration': 1.121}, {'end': 9404.643, 'text': 'So control G control G all the way down.', 'start': 9401.9, 'duration': 2.743}], 'summary': "Analyzing cars' movements, replacing logs with cars for control c and g commands.", 'duration': 36.148, 'max_score': 9368.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk9368495.jpg'}, {'end': 9601.221, 'src': 'embed', 'start': 9569.824, 'weight': 1, 'content': [{'end': 9581.193, 'text': "So I'm gonna put 20 pixels and width 20 pixels so that exactly nine divs fit in my square along the width and the height.", 'start': 9569.824, 'duration': 11.369}, {'end': 9584.775, 'text': 'Okay, so that is all I have done.', 'start': 9581.914, 'duration': 2.861}, {'end': 9590.117, 'text': 'So now if you look in here, and I can actually look at the elements that make up this page.', 'start': 9584.955, 'duration': 5.162}, {'end': 9596.239, 'text': "So there's my body, there's the div with the class of grids.", 'start': 9593.418, 'duration': 2.821}, {'end': 9601.221, 'text': 'And inside you will see all the divs, you will see each day is 20 by 20.', 'start': 9596.299, 'duration': 4.922}], 'summary': 'Set 20x20 pixels for 9 divs inside a square grid.', 'duration': 31.397, 'max_score': 9569.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk9569824.jpg'}, {'end': 9685.585, 'src': 'embed', 'start': 9659.033, 'weight': 5, 'content': [{'end': 9666.577, 'text': 'You will see as I highlight, you will see the corresponding element being highlighted in the inspect tool on the right.', 'start': 9659.033, 'duration': 7.544}, {'end': 9668.018, 'text': 'So great.', 'start': 9667.658, 'duration': 0.36}, {'end': 9669.941, 'text': "We've done that.", 'start': 9669.281, 'duration': 0.66}, {'end': 9672.502, 'text': "Now let's get to adding some more classes.", 'start': 9669.981, 'duration': 2.521}, {'end': 9674.722, 'text': 'So more styling to the classes.', 'start': 9673.242, 'duration': 1.48}, {'end': 9678.163, 'text': "Sorry So let's first off start the ending block.", 'start': 9674.762, 'duration': 3.401}, {'end': 9685.585, 'text': "So, once again, I'm going to grab the class name of ending block and I'm just going to actually give it a background color of.", 'start': 9678.803, 'duration': 6.782}], 'summary': 'Demonstrating how to add classes and styles in coding tutorial.', 'duration': 26.552, 'max_score': 9659.033, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk9659033.jpg'}, {'end': 9819.526, 'src': 'embed', 'start': 9790.415, 'weight': 2, 'content': [{'end': 9792.896, 'text': 'And all the logs here are going to be going right.', 'start': 9790.415, 'duration': 2.481}, {'end': 9794.617, 'text': "So that's what we've done.", 'start': 9793.736, 'duration': 0.881}, {'end': 9798.478, 'text': "Let's do the same for anything with the cars now.", 'start': 9794.757, 'duration': 3.721}, {'end': 9810.66, 'text': "So I'm going to pick out car left So dot car left and dot car right.", 'start': 9800.699, 'duration': 9.961}, {'end': 9819.526, 'text': "And I'm going to give it a background color, maybe of like light gray this time, because this is going to symbolize a road that we need to cross.", 'start': 9811.401, 'duration': 8.125}], 'summary': 'Styling car elements with light gray background for road symbolism.', 'duration': 29.111, 'max_score': 9790.415, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk9790415.jpg'}, {'end': 10036.308, 'src': 'embed', 'start': 10008.246, 'weight': 4, 'content': [{'end': 10011.769, 'text': "I'm going to call it app, which is just showing up here as app JS.", 'start': 10008.246, 'duration': 3.523}, {'end': 10014.011, 'text': 'Thank you WebStorm for doing that for me.', 'start': 10011.849, 'duration': 2.162}, {'end': 10016.332, 'text': "And let's start picking stuff out.", 'start': 10014.511, 'duration': 1.821}, {'end': 10022.378, 'text': "So first things first, let's actually pick out everything in here.", 'start': 10017.253, 'duration': 5.125}, {'end': 10028.581, 'text': "I need to pick out this span element, and I'm going to do so by the ID.", 'start': 10023.596, 'duration': 4.985}, {'end': 10036.308, 'text': "So in my app file, I'm going to use document and a JavaScript method called query selector.", 'start': 10029.181, 'duration': 7.127}], 'summary': 'Creating an app using javascript to pick elements by id.', 'duration': 28.062, 'max_score': 10008.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk10008246.jpg'}], 'start': 9084.158, 'title': 'Building frogger game basics, grid layout, styling, and scripting in html', 'summary': 'Covers building the basics of the frogger game with a 9x9 grid, adding styling, and scripting in html, including creating grid layout, styling with flexbox, and adding styling elements like buttons and displays. it involves 81 squares in total and specific elements selection using javascript query selectors.', 'chapters': [{'end': 9404.643, 'start': 9084.158, 'title': 'Building frogger game basics', 'summary': 'Covers building the basics of the frogger game in an html file, creating a 9x9 grid with logs and cars moving in different directions.', 'duration': 320.485, 'highlights': ['The game of Frogger is going to be nine by nine squares.', 'Creating a 9x9 grid with logs and cars moving in different directions.', 'Demonstrating the process of creating the game basics in an HTML file.']}, {'end': 9819.526, 'start': 9404.663, 'title': 'Creating grid layout and adding styling', 'summary': 'Focuses on creating a grid layout with nine divs, adding a style sheet, and styling the grid, including setting dimensions and using flexbox to ensure the divs fit within the square, with 81 squares in total.', 'duration': 414.863, 'highlights': ['The chapter focuses on creating a grid layout with nine divs, adding a style sheet, and styling the grid, including setting dimensions and using flexbox to ensure the divs fit within the square, with 81 squares in total.', 'Using flexbox to ensure that all the divs fit within the square, with each div having a height and width of 20 pixels, resulting in exactly nine divs fitting in the square along the width and height.', 'Adding classes for starting block, ending block, log left, log right, car left, and car right, with corresponding background colors to symbolize different elements of the grid layout.']}, {'end': 10152.741, 'start': 9820.527, 'title': 'Adding styling and scripting to html', 'summary': 'Discusses adding styling elements such as a start pause button, seconds left display, and result display to html, as well as picking out specific elements using query selectors in a javascript file.', 'duration': 332.214, 'highlights': ['Adding styling elements to HTML', 'Picking specific elements using query selectors in a JavaScript file']}], 'duration': 1068.583, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk9084158.jpg', 'highlights': ['Creating a 9x9 grid with logs and cars moving in different directions', 'Using flexbox to ensure that all the divs fit within the square, with each div having a height and width of 20 pixels, resulting in exactly nine divs fitting in the square along the width and height', 'Adding classes for starting block, ending block, log left, log right, car left, and car right, with corresponding background colors to symbolize different elements of the grid layout', 'Demonstrating the process of creating the game basics in an HTML file', 'Picking specific elements using query selectors in a JavaScript file', 'Adding styling elements to HTML', 'The game of Frogger is going to be nine by nine squares', 'The chapter focuses on creating a grid layout with nine divs, adding a style sheet, and styling the grid, including setting dimensions and using flexbox to ensure the divs fit within the square, with 81 squares in total']}, {'end': 11107.592, 'segs': [{'end': 10221.648, 'src': 'embed', 'start': 10153.181, 'weight': 0, 'content': [{'end': 10158.745, 'text': "Okay, so I'm looking for all of these, and I'm saving them under the const squares.", 'start': 10153.181, 'duration': 5.564}, {'end': 10162.707, 'text': 'So hopefully that makes sense.', 'start': 10161.106, 'duration': 1.601}, {'end': 10164.408, 'text': "Let's carry on.", 'start': 10163.027, 'duration': 1.381}, {'end': 10173.103, 'text': 'so, first off, i just want to add a little green square, which is going to be my frog,', 'start': 10166.718, 'duration': 6.385}, {'end': 10178.948, 'text': 'and i want to essentially add it to the board and then i want to move it with my keyboard.', 'start': 10173.103, 'duration': 5.845}, {'end': 10181.75, 'text': 'so that is the next steps that we are going to do.', 'start': 10178.948, 'duration': 2.802}, {'end': 10189.456, 'text': "so let's get this up and let's write a function called move frog.", 'start': 10181.75, 'duration': 7.706}, {'end': 10197.066, 'text': 'Okay, so this is a function that I am going to write.', 'start': 10194.224, 'duration': 2.842}, {'end': 10199.348, 'text': "And what I'm going to do?", 'start': 10197.847, 'duration': 1.501}, {'end': 10207.795, 'text': 'so each time that I essentially move a key on my keyboard.', 'start': 10199.348, 'duration': 8.447}, {'end': 10209.336, 'text': "so we're going to have to listen.", 'start': 10207.795, 'duration': 1.541}, {'end': 10211.117, 'text': "I'm just going to console log this out for now.", 'start': 10209.336, 'duration': 1.781}, {'end': 10214.32, 'text': 'console log moved.', 'start': 10211.117, 'duration': 3.203}, {'end': 10221.648, 'text': 'I essentially need to listen out for any time that I press a key on my keyboard.', 'start': 10214.32, 'duration': 7.328}], 'summary': 'Creating function to move frog on board using keyboard input', 'duration': 68.467, 'max_score': 10153.181, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk10153181.jpg'}, {'end': 10309.554, 'src': 'embed', 'start': 10276.005, 'weight': 3, 'content': [{'end': 10280.41, 'text': "Right So let's go ahead and do that.", 'start': 10276.005, 'duration': 4.405}, {'end': 10290.072, 'text': "So what I'm going to do is first off, let's go ahead and add a frog to the board.", 'start': 10281.311, 'duration': 8.761}, {'end': 10293.834, 'text': "So I'm going to make a class of frog as well dot frog.", 'start': 10290.132, 'duration': 3.702}, {'end': 10299.718, 'text': "And I'm going to give it the background color of green.", 'start': 10295.976, 'duration': 3.742}, {'end': 10303.701, 'text': "And we're going to add this dynamically in our JavaScript.", 'start': 10300.939, 'duration': 2.762}, {'end': 10309.554, 'text': "So I'm going to use these squares, actually, I'm going to grab all these squares.", 'start': 10304.382, 'duration': 5.172}], 'summary': 'Adding a green frog class dynamically to squares in javascript.', 'duration': 33.549, 'max_score': 10276.005, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk10276005.jpg'}, {'end': 10455.155, 'src': 'embed', 'start': 10420.02, 'weight': 4, 'content': [{'end': 10433.081, 'text': 'So if we move frog, well, I only want to move the frog actually, if we press a certain key.', 'start': 10420.02, 'duration': 13.061}, {'end': 10439.385, 'text': "So I'm actually going to use the switch case for this, this is the JavaScript switch case.", 'start': 10433.581, 'duration': 5.804}, {'end': 10443.287, 'text': "And I'm going to pass through E key.", 'start': 10440.325, 'duration': 2.962}, {'end': 10455.155, 'text': "And if the case is our left, so essentially, what we're doing is passing through the event into our function.", 'start': 10445.048, 'duration': 10.107}], 'summary': 'Using javascript switch case to move frog with e key.', 'duration': 35.135, 'max_score': 10420.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk10420020.jpg'}, {'end': 10780.902, 'src': 'embed', 'start': 10754.071, 'weight': 5, 'content': [{'end': 10757.254, 'text': "And then wherever we end up, we're going to add the frog class again.", 'start': 10754.071, 'duration': 3.183}, {'end': 10759.456, 'text': 'Okay, so hopefully that makes sense.', 'start': 10757.274, 'duration': 2.182}, {'end': 10760.557, 'text': "Let's see if that's worked.", 'start': 10759.516, 'duration': 1.041}, {'end': 10764.463, 'text': 'Wonderful So now we can move around.', 'start': 10761.758, 'duration': 2.705}, {'end': 10774.895, 'text': "Okay, So the next thing we want to do is actually limit our movements, so that if we go into this column here, we can't move anymore,", 'start': 10765.044, 'duration': 9.851}, {'end': 10780.902, 'text': "because otherwise we end up on the square, on the other side, and we don't want this behavior.", 'start': 10774.895, 'duration': 6.007}], 'summary': 'Adding frog class, limiting movements to avoid undesirable behavior.', 'duration': 26.831, 'max_score': 10754.071, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk10754071.jpg'}, {'end': 10935.383, 'src': 'embed', 'start': 10906.174, 'weight': 6, 'content': [{'end': 10907.255, 'text': "So we don't do this.", 'start': 10906.174, 'duration': 1.081}, {'end': 10919.329, 'text': 'Okay, same as if we are here, this this square has the index nine, and nine modulus nine does equal zero.', 'start': 10907.796, 'duration': 11.533}, {'end': 10920.531, 'text': 'So this is not true.', 'start': 10919.53, 'duration': 1.001}, {'end': 10921.491, 'text': "So we don't do this.", 'start': 10920.591, 'duration': 0.9}, {'end': 10931.04, 'text': "Okay However, if we're here, then this statement is true, because the remainder will not be zero.", 'start': 10922.252, 'duration': 8.788}, {'end': 10935.383, 'text': 'So then we execute this so we are able to move left.', 'start': 10931.4, 'duration': 3.983}], 'summary': 'Executing the statement if the remainder is not zero allows movement left.', 'duration': 29.209, 'max_score': 10906.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk10906174.jpg'}, {'end': 11107.592, 'src': 'embed', 'start': 11071.084, 'weight': 7, 'content': [{'end': 11091.346, 'text': 'if current index plus with this time, is larger than width multiplied by width, then we can move down,', 'start': 11071.084, 'duration': 20.262}, {'end': 11095.928, 'text': "because essentially we're checking that we're in any one of these squares minus the last row.", 'start': 11091.346, 'duration': 4.582}, {'end': 11101.83, 'text': 'again, get out your pens and papers and pads and just literally just try it out yourself.', 'start': 11095.928, 'duration': 5.902}, {'end': 11107.592, 'text': "Just go into any of these and be like, I'm an index square with index whatever and see how that works.", 'start': 11101.87, 'duration': 5.722}], 'summary': 'Check if current index plus time exceeds width squared to move down.', 'duration': 36.508, 'max_score': 11071.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk11071084.jpg'}], 'start': 10153.181, 'title': 'Implementing frog movement', 'summary': 'Covers adding a frog to the board, implementing keyboard controls for movement, and using modulus operator to limit movements within the grid. it introduces javascript for dynamic frog addition, switch case for key movements, and logic for movement restrictions within a grid.', 'chapters': [{'end': 10247.875, 'start': 10153.181, 'title': 'Adding frog and keyboard movement', 'summary': "Covers the process of adding a green square as a frog to the board and implementing keyboard controls for moving the frog, using the 'move frog' function and 'add event listener' to track keyboard inputs.", 'duration': 94.694, 'highlights': ["The function 'move frog' is created to handle the movement of the frog using keyboard inputs, with 'console log moved' used for testing purposes.", "The process of listening for keyboard inputs is implemented using 'document add event listener' to track the 'key up' event, enabling control of the frog's movement.", 'Explanation of the creation of a green square as the frog and the intention to add it to the board is provided, laying the foundation for its subsequent movement using keyboard controls.']}, {'end': 10774.895, 'start': 10248.095, 'title': 'Creating frog movement in javascript', 'summary': 'Introduces the process of dynamically adding a frog to the board, using switch case to handle key movements, and incorporating logic to limit movements within the grid.', 'duration': 526.8, 'highlights': ['The process of dynamically adding a frog to the board is explained, involving the creation of a class for the frog and the use of squares array to position it on the grid.', 'The utilization of switch case in JavaScript is demonstrated to handle key movements, including moving left, right, up, and down, with corresponding console logs for each movement.', 'The logic to limit movements within the grid is detailed, including subtracting and adding the grid width to the current index for moving up and down, and removing the frog from the current index before repositioning it.', 'The need to limit movements within the grid is emphasized, as demonstrated by the issue of leaving a long trail of frogs behind and the inability to move into certain areas of the grid.']}, {'end': 11107.592, 'start': 10774.895, 'title': 'Using modulus for movement logic', 'summary': 'Explains how to use the modulus operator to determine movement restrictions within a grid, including conditions for moving left, right, up, and down, based on the current index and the grid width.', 'duration': 332.697, 'highlights': ['The chapter explains how to use the modulus operator to determine movement restrictions within a grid.', 'Conditions for moving left, right, up, and down are based on the current index and the grid width.', 'The explanation includes detailed examples and step-by-step instructions for each movement condition.']}], 'duration': 954.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk10153181.jpg', 'highlights': ["The function 'move frog' handles frog movement using keyboard inputs, with 'console log moved' for testing.", "Document 'add event listener' tracks 'key up' event for frog movement control.", 'Creation of a green square as the frog is explained, laying the foundation for its movement.', 'Dynamically adding a frog to the board involves creating a class for the frog and using squares array.', 'Switch case in JavaScript handles key movements for left, right, up, and down.', 'Logic to limit movements within the grid is detailed, including repositioning the frog.', 'Explanation of using the modulus operator to determine movement restrictions within a grid.', 'Conditions for moving left, right, up, and down are based on the current index and grid width.']}, {'end': 13135.499, 'segs': [{'end': 11688.301, 'src': 'embed', 'start': 11655.598, 'weight': 2, 'content': [{'end': 11660.081, 'text': "It's obviously hard to see it on here, because they're all the same color, but this has now changed to this,", 'start': 11655.598, 'duration': 4.483}, {'end': 11664.525, 'text': 'which means we need to change this L2 to an L3, and so on, and so on, and so on.', 'start': 11660.081, 'duration': 4.444}, {'end': 11665.966, 'text': "So we're going to do all of that.", 'start': 11664.545, 'duration': 1.421}, {'end': 11672.911, 'text': "So case, in fact, I'm just going to copy this.", 'start': 11670.429, 'duration': 2.482}, {'end': 11681.233, 'text': 'If it contains L2, then remove L2 and add class L3.', 'start': 11675.066, 'duration': 6.167}, {'end': 11683.736, 'text': 'And same for L3.', 'start': 11681.974, 'duration': 1.762}, {'end': 11688.301, 'text': 'If it contains L3, remove L3 and add L4.', 'start': 11683.836, 'duration': 4.465}], 'summary': 'Converting l2 to l3 and l3 to l4 in the code.', 'duration': 32.703, 'max_score': 11655.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk11655598.jpg'}, {'end': 12010.148, 'src': 'embed', 'start': 11974.732, 'weight': 1, 'content': [{'end': 11976.212, 'text': "And now let's make the cars rotate.", 'start': 11974.732, 'duration': 1.48}, {'end': 11982.354, 'text': 'So I need to go from this one to here to here to here, and then change from here to here to here.', 'start': 11976.232, 'duration': 6.122}, {'end': 11983.634, 'text': 'And same for these.', 'start': 11983.014, 'duration': 0.62}, {'end': 11986.635, 'text': "So let's do it, I'm going to go in here.", 'start': 11984.475, 'duration': 2.16}, {'end': 11991.137, 'text': "And let's write a function.", 'start': 11988.376, 'duration': 2.761}, {'end': 12006.727, 'text': 'I know I have to auto move cars and auto move logs, but we could just auto move elements instead, right?', 'start': 11998.123, 'duration': 8.604}, {'end': 12010.148, 'text': 'So that we can just put everything in that auto move elements.', 'start': 12006.767, 'duration': 3.381}], 'summary': 'Creating a function to rotate cars and elements in the game.', 'duration': 35.416, 'max_score': 11974.732, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk11974732.jpg'}, {'end': 12235.536, 'src': 'embed', 'start': 12196.257, 'weight': 0, 'content': [{'end': 12203.005, 'text': "Great So I think now probably let's decide what makes something safe to go on or not.", 'start': 12196.257, 'duration': 6.748}, {'end': 12210.733, 'text': "So I'm going to write a function to check for a lose.", 'start': 12203.906, 'duration': 6.827}, {'end': 12214.478, 'text': "So let's do that.", 'start': 12211.935, 'duration': 2.543}, {'end': 12223.743, 'text': "So back in here, I'm gonna write a function called lose and let's define what happens.", 'start': 12216.46, 'duration': 7.283}, {'end': 12235.536, 'text': "So what happened if, essentially, let's say, if you hit a car which has the class list c1, then the game's over right,", 'start': 12224.665, 'duration': 10.871}], 'summary': 'Creating a function to check for losing by hitting a specific class, such as c1.', 'duration': 39.279, 'max_score': 12196.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk12196257.jpg'}, {'end': 12638.918, 'src': 'embed', 'start': 12603.508, 'weight': 4, 'content': [{'end': 12606.029, 'text': "Cool And then everything's taken away.", 'start': 12603.508, 'duration': 2.521}, {'end': 12607.189, 'text': 'So great.', 'start': 12606.729, 'duration': 0.46}, {'end': 12609.93, 'text': 'The last thing we need to do is just add the timer.', 'start': 12607.329, 'duration': 2.601}, {'end': 12611.291, 'text': "So let's do it.", 'start': 12609.97, 'duration': 1.321}, {'end': 12612.851, 'text': "Let's add the timer.", 'start': 12611.471, 'duration': 1.38}, {'end': 12615.352, 'text': "So I'm going to start off with the time.", 'start': 12613.352, 'duration': 2}, {'end': 12619.214, 'text': "Let current time and let's say we want to do this.", 'start': 12616.453, 'duration': 2.761}, {'end': 12626.896, 'text': "I'm just going to put five seconds for now, because you know I don't want to wait around loads in order to see if this works,", 'start': 12619.554, 'duration': 7.342}, {'end': 12628.877, 'text': 'but we can change it to something later.', 'start': 12626.896, 'duration': 1.981}, {'end': 12638.918, 'text': "And all I'm going to do is.", 'start': 12629.497, 'duration': 9.421}], 'summary': 'Adding a timer for 5 seconds to the project.', 'duration': 35.41, 'max_score': 12603.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk12603508.jpg'}], 'start': 11108.493, 'title': 'Game development', 'summary': 'Covers debugging movement issues, animating cars and logs, automating element rotation and movement, frog game development, and adding a timer and game controls in game development with javascript and dom manipulation.', 'chapters': [{'end': 11151.202, 'start': 11108.493, 'title': 'Debugging movement issues', 'summary': 'Demonstrates debugging movement issues in the game, with the need to address unresponsive directional inputs and the absence of breakages in the console logs, while preparing to implement moving logs and cars.', 'duration': 42.709, 'highlights': ['The game is experiencing issues with directional inputs, as the right and up arrows are unresponsive, while the down arrow functions fine.', 'No breakages are observed in the console logs, indicating the absence of critical errors.', 'The next step involves implementing moving logs and cars in the game.']}, {'end': 11655.298, 'start': 11153.405, 'title': 'Animating cars and logs', 'summary': 'Discusses the process of animating cars and logs in a game, creating classes for the elements, assigning background colors based on class, and implementing functions to move the logs left and right, demonstrated through code examples.', 'duration': 501.893, 'highlights': ['The chapter discusses the process of animating cars and logs in a game.', 'Creating classes for the elements and assigning background colors based on class.', 'Implementing functions to move the logs left and right, demonstrated through code examples.']}, {'end': 12173.402, 'start': 11655.598, 'title': 'Automated element rotation and movement', 'summary': 'Discusses the automation of element rotation and movement, including changing classes, moving elements, and color adjustments on a webpage, emphasizing the use of javascript and dom manipulation.', 'duration': 517.804, 'highlights': ['The process of changing L2 to L3 and continuing the pattern is described, with the removal and addition of classes being automated to simulate movement on the webpage.', 'The automation of element movement is demonstrated, with the visualization of elements shifting on the webpage using a one-second interval.', 'The process of automating the rotation and movement of cars on the webpage is outlined, involving adjustments to class names and color representation for the cars and roads.']}, {'end': 12603.488, 'start': 12173.922, 'title': 'Frog game development', 'summary': "Explains the development of a frog game, including creating functions to check for losing conditions such as getting hit by a car or falling into the water, as well as winning conditions by reaching the ending block, demonstrating the game's functionality through coding and testing.", 'duration': 429.566, 'highlights': ["The chapter details the creation of a function to check for losing conditions, such as getting hit by a car or falling into the water, and specifies the relevant classes for these conditions, contributing to the game's logic and user experience.", "The development includes the implementation of a function to check for winning conditions by reaching the ending block, with the demonstration of clearing the timer and displaying the 'you win' message, showcasing the game's successful completion.", 'The explanation involves the removal of event listeners and intervals to prevent further movement of the frog once the game ends, ensuring a smooth and controlled user experience.', 'The process also encompasses the continuous checking for losing and winning conditions every one second to maintain real-time feedback and responsiveness, enhancing the overall gameplay.', "The chapter illustrates the practical testing of the game's functionality through coding, with demonstrations of losing and winning scenarios, validating the effectiveness and accuracy of the implemented game logic."]}, {'end': 13135.499, 'start': 12603.508, 'title': 'Adding timer and game controls', 'summary': 'Explains the process of adding a timer to the game, implementing game controls such as start, pause, and lose functions, and addressing issues related to timing and game logic.', 'duration': 531.991, 'highlights': ['The chapter explains the process of adding a timer to the game', 'Implementing game controls such as start, pause, and lose functions', 'Addressing issues related to timing and game logic']}], 'duration': 2027.006, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk11108493.jpg', 'highlights': ["The chapter details the creation of a function to check for losing conditions, such as getting hit by a car or falling into the water, and specifies the relevant classes for these conditions, contributing to the game's logic and user experience.", 'The process of automating the rotation and movement of cars on the webpage is outlined, involving adjustments to class names and color representation for the cars and roads.', 'The process of changing L2 to L3 and continuing the pattern is described, with the removal and addition of classes being automated to simulate movement on the webpage.', 'The chapter discusses the process of animating cars and logs in a game.', 'The chapter explains the process of adding a timer to the game']}, {'end': 14912.3, 'segs': [{'end': 13244.618, 'src': 'embed', 'start': 13216.517, 'weight': 0, 'content': [{'end': 13218.698, 'text': "We're going to take a different approach with this game.", 'start': 13216.517, 'duration': 2.181}, {'end': 13220.979, 'text': 'We have been working with a lot of modulus.', 'start': 13218.978, 'duration': 2.001}, {'end': 13229.084, 'text': "This is a different approach in which we are just going to define which indexes create a match or don't create a match of four.", 'start': 13221.42, 'duration': 7.664}, {'end': 13234.675, 'text': "So I'm excited to share this alternative solution to to what you have been doing previously.", 'start': 13229.634, 'duration': 5.041}, {'end': 13241.677, 'text': 'So what are we waiting for? These are the JavaScript methods and properties that you will learn in this section.', 'start': 13235.336, 'duration': 6.341}, {'end': 13244.618, 'text': "Okay, so let's do it.", 'start': 13242.917, 'duration': 1.701}], 'summary': 'Introducing a new game approach using modulus to define matching indexes in javascript.', 'duration': 28.101, 'max_score': 13216.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk13216517.jpg'}, {'end': 13460.964, 'src': 'embed', 'start': 13427.531, 'weight': 1, 'content': [{'end': 13431.552, 'text': "And this is just a solution that I thought of, of course, like, you don't have to use it.", 'start': 13427.531, 'duration': 4.021}, {'end': 13435.113, 'text': 'But this is just the way that I would solve it in order to build our game.', 'start': 13431.693, 'duration': 3.42}, {'end': 13439.314, 'text': "So what's that seven times seven is 49.", 'start': 13436.474, 'duration': 2.84}, {'end': 13444.896, 'text': "Let's do it, I'm gonna make a div that I'm gonna give the class of grid.", 'start': 13439.314, 'duration': 5.582}, {'end': 13447.96, 'text': 'because this is where all the magic is going to happen.', 'start': 13445.319, 'duration': 2.641}, {'end': 13449.26, 'text': 'This is going to be our game grid.', 'start': 13448, 'duration': 1.26}, {'end': 13451.761, 'text': "Okay, so let's call it a class.", 'start': 13450.341, 'duration': 1.42}, {'end': 13460.964, 'text': "Now, any div that I'm going to put in here, I essentially want to be or represent the little squares on my connect for game.", 'start': 13452.561, 'duration': 8.403}], 'summary': 'Proposing a solution for building a game grid with 49 squares.', 'duration': 33.433, 'max_score': 13427.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk13427531.jpg'}, {'end': 14352.318, 'src': 'embed', 'start': 14290.865, 'weight': 2, 'content': [{'end': 14292.047, 'text': 'I can click here.', 'start': 14290.865, 'duration': 1.182}, {'end': 14299.497, 'text': "it will just tell me I can't go there, even though I can, because it's sort of like executing this and then executing that anyway.", 'start': 14292.047, 'duration': 7.45}, {'end': 14305.841, 'text': "So that's why I did else if else Cool.", 'start': 14299.537, 'duration': 6.304}, {'end': 14309.764, 'text': "Okay, so we've done that part of the logic.", 'start': 14306.802, 'duration': 2.962}, {'end': 14313.467, 'text': 'The last thing I need to do is check the board for wins.', 'start': 14309.804, 'duration': 3.663}, {'end': 14316.269, 'text': "So I'm going to do that with a function.", 'start': 14314.107, 'duration': 2.162}, {'end': 14319.251, 'text': 'This I do actually want to execute every time we click.', 'start': 14316.89, 'duration': 2.361}, {'end': 14324.755, 'text': "So there's no need for else if it's we just want to check the board every time we click on a square.", 'start': 14319.712, 'duration': 5.043}, {'end': 14331.48, 'text': "So now let's write our function I'm going to do up here, of course, because we need to write it.", 'start': 14326.116, 'duration': 5.364}, {'end': 14336.212, 'text': 'We need to write the function before we use the function.', 'start': 14334.349, 'duration': 1.863}, {'end': 14343.585, 'text': 'So function check board, like so.', 'start': 14336.232, 'duration': 7.353}, {'end': 14352.318, 'text': "Now, this might not be like the most, I guess it's a lazy way to check for wins.", 'start': 14344.526, 'duration': 7.792}], 'summary': 'Creating a function to check the board for wins after executing specific logic.', 'duration': 61.453, 'max_score': 14290.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk14290865.jpg'}], 'start': 13135.519, 'title': 'Building connect four game', 'summary': 'Demonstrates building a connect four game using a different approach, focuses on defining indexes for matches, creating game grid with 49 divs, adding game logic for valid moves, and creating win-checking functions for a simple and functional game.', 'chapters': [{'end': 13234.675, 'start': 13135.519, 'title': 'Building connect four game', 'summary': "Demonstrates the basics of building a connect four game using a different approach, focusing on defining indexes that create a match or don't create a match of four, with an emphasis on improvement and application of learning.", 'duration': 99.156, 'highlights': ["The chapter emphasizes the basics of building a Connect Four game with a different approach to defining indexes that create a match or don't create a match of four.", 'The instructor encourages the audience to improve the game by adding levels or the ability to start a new game without refreshing.', 'The demonstration includes the concept of result tracking and the elimination of unnecessary elements like collecting points.', 'The instructor successfully wins the game, showcasing the practical application of the demonstrated concepts.']}, {'end': 13688.093, 'start': 13235.336, 'title': 'Creating connect four game grid', 'summary': 'Covers setting up the project with html, linking css and javascript files, creating a game grid with 49 divs, and styling the grid to fit the squares in a snake-like pattern.', 'duration': 452.757, 'highlights': ['Setting up project with HTML, linking CSS and JavaScript files', 'Creating a game grid with 49 divs', 'Styling the grid to fit the squares in a snake-like pattern']}, {'end': 14290.865, 'start': 13688.494, 'title': 'Creating connect four game logic', 'summary': 'Explains the process of creating a connect four game, including adding classes and ids to html elements, handling user interaction through on-click events, and implementing game logic to determine valid moves for players.', 'duration': 602.371, 'highlights': ['Adding classes and IDs to HTML elements', 'Handling user interaction through on-click events', 'Implementing game logic to determine valid moves for players']}, {'end': 14912.3, 'start': 14290.865, 'title': 'Building connect four game', 'summary': 'Details the process of building a connect four game, including creating a function to check for wins and utilizing a for loop to iterate through winning arrays, resulting in a simple and functional game.', 'duration': 621.435, 'highlights': ['A function is created to check the board for wins, simplifying the logic and ensuring it executes every time a square is clicked.', "Winning combinations are determined and stored in a 'winning arrays' array, providing a basis for checking the board for wins.", 'Utilizing a for loop, the script iterates through the winning arrays to check if any player has a winning array, demonstrating a systematic approach to checking for wins.', "The process of checking squares for a specific class (e.g., 'player one') is detailed, providing a clear method for determining a win condition."]}], 'duration': 1776.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk13135519.jpg', 'highlights': ['Demonstrates building a Connect Four game with a different approach to defining indexes for matches', 'Creating a game grid with 49 divs and styling it in a snake-like pattern', 'Implementing game logic to determine valid moves for players and handling user interaction through on-click events', 'Creating win-checking functions using a systematic approach and simplifying the logic for checking wins']}, {'end': 17488.993, 'segs': [{'end': 14944.021, 'src': 'embed', 'start': 14913.161, 'weight': 0, 'content': [{'end': 14918.604, 'text': 'Later In this next section, we are going to be building space invaders.', 'start': 14913.161, 'duration': 5.443}, {'end': 14924.768, 'text': 'This game is a classic, another retro classic in which you, as the little guy right here,', 'start': 14919.124, 'duration': 5.644}, {'end': 14928.15, 'text': 'have to shoot all the space invaders coming down before they get to you.', 'start': 14924.768, 'duration': 3.382}, {'end': 14930.832, 'text': 'Okay, so a lot of timing events here.', 'start': 14928.731, 'duration': 2.101}, {'end': 14932.353, 'text': "It's a grid based game.", 'start': 14931.132, 'duration': 1.221}, {'end': 14937.336, 'text': 'So a lot of stuff that you would have already covered is going to come up a lot of modulus work and so on.', 'start': 14932.413, 'duration': 4.923}, {'end': 14944.021, 'text': 'So these are the JavaScript methods and properties that you will be covering in this section.', 'start': 14937.877, 'duration': 6.144}], 'summary': 'Building space invaders game using javascript methods and properties.', 'duration': 30.86, 'max_score': 14913.161, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk14913161.jpg'}, {'end': 15178.035, 'src': 'embed', 'start': 15147.148, 'weight': 1, 'content': [{'end': 15156.121, 'text': 'So now if I look in here, see, you will see 225 divs have been created and put inside my grid.', 'start': 15147.148, 'duration': 8.973}, {'end': 15156.841, 'text': "Let's carry on.", 'start': 15156.141, 'duration': 0.7}, {'end': 15160.183, 'text': "Okay, next up, let's actually get the invaders.", 'start': 15156.861, 'duration': 3.322}, {'end': 15161.604, 'text': 'So alien invaders.', 'start': 15160.263, 'duration': 1.341}, {'end': 15164.785, 'text': "And then I'm just going to make an array.", 'start': 15161.624, 'duration': 3.161}, {'end': 15176.031, 'text': "And then exactly just indexes to figure out which indexes I want to essentially put the aliens is I'm going to make it three rows of them.", 'start': 15164.805, 'duration': 11.226}, {'end': 15178.035, 'text': '17, 18, 19, 20, 21, 22, 22, 23, 24.', 'start': 15177.783, 'duration': 0.252}], 'summary': '225 divs created and put inside grid, 3 rows of alien invaders.', 'duration': 30.887, 'max_score': 15147.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk15147148.jpg'}, {'end': 15425.04, 'src': 'embed', 'start': 15396.326, 'weight': 2, 'content': [{'end': 15400.609, 'text': "So let's actually start moving the shooter.", 'start': 15396.326, 'duration': 4.283}, {'end': 15407.654, 'text': 'So function function move shooter.', 'start': 15401.99, 'duration': 5.664}, {'end': 15415.454, 'text': "Okay, so for this, I'm going to be using keys on my keyboard.", 'start': 15411.351, 'duration': 4.103}, {'end': 15416.855, 'text': "So I'm going to pass through an event.", 'start': 15415.474, 'duration': 1.381}, {'end': 15420.297, 'text': 'The first thing I want to do is actually remove the shooter.', 'start': 15417.275, 'duration': 3.022}, {'end': 15422.539, 'text': "So we've got draw shoes.", 'start': 15420.697, 'duration': 1.842}, {'end': 15423.119, 'text': "No, we don't.", 'start': 15422.599, 'duration': 0.52}, {'end': 15425.04, 'text': "Okay, I'm just going to remove the shooter.", 'start': 15423.139, 'duration': 1.901}], 'summary': 'Developing a game: discussing moving the shooter using keyboard keys.', 'duration': 28.714, 'max_score': 15396.326, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk15396326.jpg'}, {'end': 15618.212, 'src': 'embed', 'start': 15559.517, 'weight': 4, 'content': [{'end': 15560.718, 'text': "So let's test that out.", 'start': 15559.517, 'duration': 1.201}, {'end': 15573.224, 'text': "Okay, so pressing left, and that is not working width is not defined, right? We didn't define width, or silly of us, let width of the grid be 15.", 'start': 15562.222, 'duration': 11.002}, {'end': 15580.865, 'text': "Okay, so now it's going to move and it's going to stop because it hits the edge, move is going right, right, right, right, right.", 'start': 15573.224, 'duration': 7.641}, {'end': 15581.885, 'text': 'And then it stops.', 'start': 15581.205, 'duration': 0.68}, {'end': 15583.286, 'text': 'Okay, so that works.', 'start': 15582.145, 'duration': 1.141}, {'end': 15584.486, 'text': "Let's carry on.", 'start': 15583.706, 'duration': 0.78}, {'end': 15586.406, 'text': 'Now we need to move the invaders.', 'start': 15584.886, 'duration': 1.52}, {'end': 15591.127, 'text': 'So function move invaders.', 'start': 15587.106, 'duration': 4.021}, {'end': 15602.356, 'text': "So now, actually, that worked for here we define the right sorry, the left edge and we've defined the right edge.", 'start': 15594.368, 'duration': 7.988}, {'end': 15604.458, 'text': "I'm actually going to define and store it now.", 'start': 15602.356, 'duration': 2.102}, {'end': 15606.941, 'text': 'So left edge equals.', 'start': 15604.518, 'duration': 2.423}, {'end': 15610.965, 'text': "And this I'm going to go into alien invaders array that we made.", 'start': 15607.622, 'duration': 3.343}, {'end': 15618.212, 'text': 'And if the first of the alien invaders is modulus width, and that deeply equals zero.', 'start': 15611.345, 'duration': 6.867}], 'summary': 'Testing and defining grid width as 15, moving invaders within defined edges.', 'duration': 58.695, 'max_score': 15559.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk15559517.jpg'}, {'end': 15862.161, 'src': 'embed', 'start': 15830.702, 'weight': 13, 'content': [{'end': 15837.901, 'text': "if it's at the right edge first, if right edge is true, if one of our last invader isn't the right edge, Okay,", 'start': 15830.702, 'duration': 7.199}, {'end': 15844.265, 'text': 'well then we need to essentially make all of them go down.', 'start': 15837.901, 'duration': 6.364}, {'end': 15852.731, 'text': "So I'm going to write a for loop again, for let i equals zero, which make it go down and change direction.", 'start': 15844.626, 'duration': 8.105}, {'end': 15860, 'text': 'So I invaders length And then I plus plus.', 'start': 15852.831, 'duration': 7.169}, {'end': 15862.161, 'text': "So we're going to loop over that.", 'start': 15860.02, 'duration': 2.141}], 'summary': "Adjust invaders' movement to go down if not at right edge.", 'duration': 31.459, 'max_score': 15830.702, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk15830702.jpg'}, {'end': 16156.315, 'src': 'embed', 'start': 16104.718, 'weight': 5, 'content': [{'end': 16109.462, 'text': "Okay, so now if we go all the way to the bottom, I mean, I don't have time for this is rushed.", 'start': 16104.718, 'duration': 4.744}, {'end': 16112.985, 'text': "I'm just gonna put this to 100.", 'start': 16109.482, 'duration': 3.503}, {'end': 16113.986, 'text': 'So there we go.', 'start': 16112.985, 'duration': 1.001}, {'end': 16118.69, 'text': 'And we should get console logs and game over as soon as we hit here, because both will be in the same square.', 'start': 16114.006, 'duration': 4.684}, {'end': 16120.071, 'text': 'Yes, game over.', 'start': 16119.33, 'duration': 0.741}, {'end': 16120.751, 'text': 'Great, cool.', 'start': 16120.131, 'duration': 0.62}, {'end': 16121.792, 'text': 'And everything stops.', 'start': 16120.951, 'duration': 0.841}, {'end': 16124.134, 'text': 'Brilliant So that is looking good.', 'start': 16122.192, 'duration': 1.942}, {'end': 16131.16, 'text': "So instead of this, I'm actually gonna get a results display in HTML.", 'start': 16124.534, 'duration': 6.626}, {'end': 16135.087, 'text': 'equals game over.', 'start': 16132.006, 'duration': 3.081}, {'end': 16140.669, 'text': 'Now I actually need to define what is a results display.', 'start': 16137.048, 'duration': 3.621}, {'end': 16151.693, 'text': "So const result display equals document query selector and I'm going to search for something with results or a class with results.", 'start': 16141.129, 'duration': 10.564}, {'end': 16152.994, 'text': 'I could do an ID.', 'start': 16151.693, 'duration': 1.301}, {'end': 16154.495, 'text': 'that is totally up to me.', 'start': 16152.994, 'duration': 1.501}, {'end': 16156.315, 'text': "it really doesn't matter.", 'start': 16154.495, 'duration': 1.82}], 'summary': "Setting the result display to 'game over' and implementing console logs for game over.", 'duration': 51.597, 'max_score': 16104.718, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk16104718.jpg'}, {'end': 16560.296, 'src': 'embed', 'start': 16524.052, 'weight': 11, 'content': [{'end': 16527.133, 'text': 'Our next part is going to be all about shooting the aliens.', 'start': 16524.052, 'duration': 3.081}, {'end': 16532.595, 'text': "So I'm just going to move that up there and write a function called shoot.", 'start': 16527.793, 'duration': 4.802}, {'end': 16543.204, 'text': 'Okay, so for this, I need a laser ID, just like we have the IDs for other ones, we need a laser ID now.', 'start': 16536.078, 'duration': 7.126}, {'end': 16546.725, 'text': 'And then let current laser index.', 'start': 16543.804, 'duration': 2.921}, {'end': 16560.296, 'text': 'So wherever the current laser index, wherever the current shooter is on our board, that is where our laser is going to start from.', 'start': 16547.407, 'duration': 12.889}], 'summary': 'Creating a function to shoot aliens with a laser on the game board.', 'duration': 36.244, 'max_score': 16524.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk16524052.jpg'}, {'end': 16961.404, 'src': 'embed', 'start': 16907.821, 'weight': 7, 'content': [{'end': 16917.668, 'text': 'source function is going to be squares, current laser index class list.', 'start': 16907.821, 'duration': 9.847}, {'end': 16924.435, 'text': "I want to remove the boom after, let's say, 300 milliseconds.", 'start': 16917.668, 'duration': 6.767}, {'end': 16928.298, 'text': 'Okay, so now the boom is going to disappear after 300 milliseconds.', 'start': 16924.455, 'duration': 3.843}, {'end': 16943.868, 'text': "So it's disappearing.", 'start': 16928.318, 'duration': 15.55}, {'end': 16945.869, 'text': 'Not very well, though.', 'start': 16943.888, 'duration': 1.981}, {'end': 16956.401, 'text': "Okay, and then I'm going to clear interval laser ID.", 'start': 16950.037, 'duration': 6.364}, {'end': 16961.404, 'text': "So I'm going to stop to see if that works.", 'start': 16956.641, 'duration': 4.763}], 'summary': 'The boom disappears after 300 milliseconds, but not very well. attempting to clear interval laser id to stop it.', 'duration': 53.583, 'max_score': 16907.821, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk16907821.jpg'}, {'end': 17020.36, 'src': 'embed', 'start': 16987.196, 'weight': 8, 'content': [{'end': 16991.62, 'text': "Okay, so let's actually get rid of the invader from our array.", 'start': 16987.196, 'duration': 4.424}, {'end': 16994.122, 'text': "So it doesn't get redrawn const.", 'start': 16991.64, 'duration': 2.482}, {'end': 17002.789, 'text': "alien removal equals let's get the alien invaders array.", 'start': 16996.158, 'duration': 6.631}, {'end': 17009.471, 'text': "And then I'm going to use JavaScript method code index of to pass through the laser index.", 'start': 17003.269, 'duration': 6.202}, {'end': 17011.713, 'text': 'So the square where all the collisions happens?', 'start': 17009.491, 'duration': 2.222}, {'end': 17020.36, 'text': 'okay, whatever square that is the aliens going to be, whatever square that is, the aliens can be removed from the aliens array based on that.', 'start': 17011.713, 'duration': 8.647}], 'summary': 'Remove invader from array using javascript indexof method.', 'duration': 33.164, 'max_score': 16987.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk16987196.jpg'}, {'end': 17328.328, 'src': 'embed', 'start': 17249.491, 'weight': 6, 'content': [{'end': 17256.334, 'text': "And then I can just simply go if, and I'm just going to use the aliens removed array length to do this.", 'start': 17249.491, 'duration': 6.843}, {'end': 17277.339, 'text': 'So if alien aliens removed length deeply equals the invaders alien invaders length, well, then we know that we have one.', 'start': 17256.935, 'duration': 20.404}, {'end': 17289.799, 'text': "So I'm just gonna put you win, and then clear interval invaders ID.", 'start': 17278.9, 'duration': 10.899}, {'end': 17291.94, 'text': 'Okay, so that should do it.', 'start': 17290.359, 'duration': 1.581}, {'end': 17294.521, 'text': 'I guess we sort of need to add a score too.', 'start': 17291.96, 'duration': 2.561}, {'end': 17304.586, 'text': "So each time we remove an alien, I'm going to put results plus plus, and then let results I'm gonna start with zero.", 'start': 17294.821, 'duration': 9.765}, {'end': 17307.183, 'text': 'to add a score.', 'start': 17306.403, 'duration': 0.78}, {'end': 17312.284, 'text': "And then we're going to also display so we're going to add one to the results.", 'start': 17307.603, 'duration': 4.681}, {'end': 17320.626, 'text': "If we move on, I'm going to get the results display in HTML, want to put results.", 'start': 17312.684, 'duration': 7.942}, {'end': 17323.827, 'text': "Okay, so let's check that out.", 'start': 17322.247, 'duration': 1.58}, {'end': 17328.328, 'text': "Okay, so we're getting scores.", 'start': 17323.847, 'duration': 4.481}], 'summary': 'Code checks for alien removal and updates score in real time.', 'duration': 78.837, 'max_score': 17249.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk17249491.jpg'}], 'start': 14913.161, 'title': 'Building space invaders game', 'summary': "Covers building a space invaders game using javascript, creating a grid, placing invaders, drawing a shooter, implementing shooter movement, defining grid width, edges, moving invaders, 'game over' condition, shooting aliens, collision handling, alien removal, boom animation, win condition, scoring, and game demonstration.", 'chapters': [{'end': 15559.497, 'start': 14913.161, 'title': 'Building space invaders game', 'summary': 'Covers the process of building a space invaders game using javascript, including creating a grid, placing invaders, drawing a shooter, and implementing the functionality to move the shooter using keyboard inputs.', 'duration': 646.336, 'highlights': ['The chapter covers the process of building a Space Invaders game using JavaScript', 'Creating a grid and placing invaders', 'Drawing and positioning the shooter', 'Implementing functionality to move the shooter using keyboard inputs']}, {'end': 16056.08, 'start': 15559.517, 'title': 'Javascript game logic', 'summary': 'Covers defining grid width, left and right edges, creating a function to move invaders, and implementing logic to make invaders move left, right, and down on the grid.', 'duration': 496.563, 'highlights': ['Defining grid width as 15 and implementing logic to move invaders left, right, and down', 'Creating a function to move invaders and defining left and right edges using modulus', 'Implementing logic to change the direction of invaders when reaching the left or right edge']}, {'end': 16758.192, 'start': 16056.701, 'title': 'Game over and shooting aliens', 'summary': "Discusses the implementation of the 'game over' condition and shooting the aliens, with a focus on identifying the game over condition and moving the laser to shoot the alien invaders.", 'duration': 701.491, 'highlights': ["Implementing the 'game over' condition", 'Defining the results display in HTML', 'Handling shooting aliens']}, {'end': 17488.993, 'start': 16758.792, 'title': 'Space invaders game development', 'summary': 'Covers the development of a space invaders game, including collision handling, alien removal, boom animation, win condition check, and scoring mechanism, with a demonstration of the completed game.', 'duration': 730.201, 'highlights': ['The win condition is checked by comparing the length of the array of removed aliens with the total number of aliens, triggering a win message and stopping the game if the conditions match.', "A boom animation is added by creating a red square at the laser's position and removing it after 300 milliseconds using setTimeout.", "Alien removal from the array is implemented by using the index of the laser's square, and the removed aliens are stored in an array for further processing and drawing.", 'Scoring mechanism is introduced by incrementing the score upon each alien removal and displaying the score in the game interface.']}], 'duration': 2575.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ec8vSKJuZTk/pics/ec8vSKJuZTk14913161.jpg', 'highlights': ['Covers building a Space Invaders game using JavaScript', 'Creating a grid and placing invaders', 'Drawing and positioning the shooter', 'Implementing functionality to move the shooter using keyboard inputs', 'Defining grid width as 15 and implementing logic to move invaders left, right, and down', "Implementing the 'game over' condition", 'The win condition is checked by comparing the length of the array of removed aliens with the total number of aliens, triggering a win message and stopping the game if the conditions match', "A boom animation is added by creating a red square at the laser's position and removing it after 300 milliseconds using setTimeout", "Alien removal from the array is implemented by using the index of the laser's square, and the removed aliens are stored in an array for further processing and drawing", 'Scoring mechanism is introduced by incrementing the score upon each alien removal and displaying the score in the game interface', 'Defining the results display in HTML', 'Handling shooting aliens', 'Creating a function to move invaders and defining left and right edges using modulus', 'Implementing logic to change the direction of invaders when reaching the left or right edge']}], 'highlights': ['Anu Kubo teaches JavaScript methods to build 7 games', 'Course designed for those familiar with JavaScript fundamentals', 'Creating a grid and placing invaders', 'Demonstrates building a Connect Four game with a different approach to defining indexes for matches', 'Creating a board and implementing a function to flip cards upon clicking', 'The tutorial covers creating a rock, paper, scissors game, demonstrating win, lose, or draw scenarios and the usage of JavaScript methods and properties', 'The game involves building a grid that randomly displays a mole to click on within a defined time to earn points', 'Demonstration of dynamically generating 15 blocks with individual positions on a grid using JavaScript', 'Adding scoring functionality to the game, incrementing the score when the ball hits the paddle and displaying the score on the HTML page', 'Covers building a Space Invaders game using JavaScript', 'Introduces building a memory game using JavaScript in WebStorm', "The function 'move frog' handles frog movement using keyboard inputs, with 'console log moved' for testing"]}