title
Javascript Rock Paper Scissors Game Tutorial | Web Development Tutorial

description
Check out my courses and become more creative! https://developedbyed.com Javascript Rock Paper Scissors Game Tutorial | Web Development Tutorial Today we are going to learn how to make a rock paper and scissors game in javascript similar to the one on freecodecamp but with a bit more movement and animation! We are going to cover the rock paper scissor game with vanilla javascript, by creating small functions to abstract our code based on what it does. This project is great if you want to practice your vanilla javascript skills by building a rock paper scissors game. Inspired from freecodecamp rock paper scissor javascript game. 📔 Materials used in this video: Rock Paper Scissor Icons: https://github.com/DevEdwin/rock-paper-scissor 🛴 Follow me on: Twitter: https://twitter.com/deved94 Github: https://github.com/DevEdwin

detail
{'title': 'Javascript Rock Paper Scissors Game Tutorial | Web Development Tutorial', 'heatmap': [{'end': 881.601, 'start': 834.617, 'weight': 0.907}, {'end': 1169.313, 'start': 1131.96, 'weight': 0.762}, {'end': 1458.276, 'start': 1392.05, 'weight': 0.725}, {'end': 2589.931, 'start': 2488.369, 'weight': 1}, {'end': 3206.554, 'start': 3169.2, 'weight': 0.761}], 'summary': 'The tutorial covers building a rock, paper, and scissors game ui with javascript, html, and css, adding styling, javascript manipulation, game functions, event listeners, coding, and game creation, resulting in a functional and visually appealing game interface, including transitions, delays, and game logic.', 'chapters': [{'end': 348.799, 'segs': [{'end': 57.033, 'src': 'embed', 'start': 29.004, 'weight': 2, 'content': [{'end': 34.89, 'text': "what's up, computer, bring your i7 back home, because we are better.", 'start': 29.004, 'duration': 5.886}, {'end': 36.913, 'text': "Okay, anyway, let's get started.", 'start': 35.15, 'duration': 1.763}, {'end': 38.354, 'text': "Let's start building this thing out.", 'start': 36.993, 'duration': 1.361}, {'end': 42.519, 'text': "I have, I'm gonna attach in the description, a folder.", 'start': 39.115, 'duration': 3.404}, {'end': 50.829, 'text': 'I made these three, I just cut out these three rock, paper, scissors PNGs that you can use in your folder.', 'start': 42.699, 'duration': 8.13}, {'end': 54.031, 'text': "uh, which i'm gonna attach it.", 'start': 51.91, 'duration': 2.121}, {'end': 57.033, 'text': 'so we have it attached here in the assets.', 'start': 54.031, 'duration': 3.002}], 'summary': 'Creating a folder with rock, paper, scissors pngs for use in the assets.', 'duration': 28.029, 'max_score': 29.004, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN429004.jpg'}, {'end': 202.386, 'src': 'embed', 'start': 153.474, 'weight': 0, 'content': [{'end': 158.018, 'text': "And here I'm going to create two classes, one for the player and one for the computer.", 'start': 153.474, 'duration': 4.544}, {'end': 162.202, 'text': "So I'm going to do player score for this one like so.", 'start': 158.178, 'duration': 4.024}, {'end': 164.324, 'text': "And here I'm going to just add a H2.", 'start': 162.583, 'duration': 1.741}, {'end': 168.468, 'text': "I'm going to name this player and I'm going to add a P with zero.", 'start': 164.504, 'duration': 3.964}, {'end': 175.392, 'text': "And here I'm going to make another one computer score, which is kind of going to be the same thing.", 'start': 169.549, 'duration': 5.843}, {'end': 180.374, 'text': "So H2 computer, and then we're going to add a P again with zero.", 'start': 175.552, 'duration': 4.822}, {'end': 183.436, 'text': 'Okay, so we have our scoreboard done.', 'start': 180.975, 'duration': 2.461}, {'end': 187.718, 'text': 'So outside of our scoreboard, we need to make the two pages.', 'start': 183.836, 'duration': 3.882}, {'end': 191.059, 'text': 'So we make the one where you start the game and the actual game.', 'start': 187.758, 'duration': 3.301}, {'end': 193.961, 'text': "So let's make an intro div here.", 'start': 191.44, 'duration': 2.521}, {'end': 198.164, 'text': "And here I just want to add, let's just add a title.", 'start': 194.641, 'duration': 3.523}, {'end': 200.565, 'text': 'Rock, paper, and scissors.', 'start': 198.324, 'duration': 2.241}, {'end': 202.386, 'text': 'Like so.', 'start': 201.866, 'duration': 0.52}], 'summary': 'Creating classes for player and computer with scoreboard and game pages.', 'duration': 48.912, 'max_score': 153.474, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN4153474.jpg'}, {'end': 305.971, 'src': 'embed', 'start': 256.113, 'weight': 3, 'content': [{'end': 258.015, 'text': "So I'm gonna make a class of hands.", 'start': 256.113, 'duration': 1.902}, {'end': 260.337, 'text': 'You know, the ones that go like this.', 'start': 258.654, 'duration': 1.683}, {'end': 264.261, 'text': "Yep I'm gonna add two images here.", 'start': 261.098, 'duration': 3.163}, {'end': 266.122, 'text': 'So the ones we have in the folder.', 'start': 264.381, 'duration': 1.741}, {'end': 271.487, 'text': "So by default, I'm gonna start both of them as paper, not paper, rock, as rock.", 'start': 266.443, 'duration': 5.044}, {'end': 275.03, 'text': "And I'm just going to copy paste this one down here.", 'start': 272.288, 'duration': 2.742}, {'end': 278.653, 'text': 'And one of them is going to be the player hand.', 'start': 275.47, 'duration': 3.183}, {'end': 286.579, 'text': 'So the one above is going to be the player hand and the one below is going to be the computer hand.', 'start': 279.293, 'duration': 7.286}, {'end': 293.504, 'text': "And the thing we need to do with this one is actually we're going to have to rotate it because they're both like this.", 'start': 287.319, 'duration': 6.185}, {'end': 295.745, 'text': 'So we need one to be rotated.', 'start': 294.184, 'duration': 1.561}, {'end': 297.366, 'text': "So they're facing each other.", 'start': 295.965, 'duration': 1.401}, {'end': 305.971, 'text': "Good So other than that, after our hands class here, we're going to need a class with the options.", 'start': 298.447, 'duration': 7.524}], 'summary': 'Creating a class of hands with two images, defaulting as rock, and rotating one for player and computer hands.', 'duration': 49.858, 'max_score': 256.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN4256113.jpg'}], 'start': 4.502, 'title': 'Building rock paper scissors game ui', 'summary': 'Covers building a rock, paper, and scissors game ui, including a scoreboard, an intro screen, and a match section with options for rock, paper, and scissors using javascript, html, and css.', 'chapters': [{'end': 108.07, 'start': 4.502, 'title': 'Building rock paper scissors game', 'summary': 'Covers the process of building a rock paper scissors game using javascript, html, and css, including setting up the project, attaching assets, and creating the game interface.', 'duration': 103.568, 'highlights': ['Building a rock paper scissors game using JavaScript, HTML, and CSS The chapter focuses on putting JavaScript skills to the test by building a rock paper scissors game, including the use of HTML and CSS.', 'Setting up the project and attaching assets The chapter describes the process of setting up the project by attaching assets, including rock, paper, and scissors images, and creating the necessary files like app.js, index.html, and style.css.', 'Creating the game interface The chapter demonstrates the creation of the game interface, including attaching the style.css and script.js to the HTML file, and setting up the project for further development.']}, {'end': 348.799, 'start': 108.59, 'title': 'Building rock, paper, scissors game ui', 'summary': "Involves building the ui for a rock, paper, and scissors game, including a scoreboard with player and computer scores, an intro screen with a 'let's play' button, and a match section with options for rock, paper, and scissors.", 'duration': 240.209, 'highlights': ["Creating a scoreboard with separate classes for player and computer scores, with initial values set to zero and incrementing based on the game outcome. The creation of a scoreboard with separate classes for player and computer scores, with initial values set to zero and incrementing based on the game outcome, provides a clear visual representation of the game's progress.", "Designing an intro screen with a title 'Rock, Paper, and Scissors' and a 'Let's play' button. The design of an intro screen with a title 'Rock, Paper, and Scissors' and a 'Let's play' button sets the stage for engaging the user and initiating the game.", "Setting up a match section with a title 'Choose an option' and images of hands representing the player and computer choices. The setup of a match section with a title 'Choose an option' and images of hands representing the player and computer choices enhances the user experience by providing a visual interface for making selections and displaying outcomes."]}], 'duration': 344.297, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN44502.jpg', 'highlights': ['Building a rock paper scissors game using JavaScript, HTML, and CSS', 'Creating a scoreboard with separate classes for player and computer scores, with initial values set to zero and incrementing based on the game outcome', "Designing an intro screen with a title 'Rock, Paper, and Scissors' and a 'Let's play' button", "Setting up a match section with a title 'Choose an option' and images of hands representing the player and computer choices", 'Setting up the project and attaching assets', 'Creating the game interface']}, {'end': 903.751, 'segs': [{'end': 645.332, 'src': 'embed', 'start': 610.366, 'weight': 4, 'content': [{'end': 614.227, 'text': "We're gonna add the intro h1, so our big title here.", 'start': 610.366, 'duration': 3.861}, {'end': 618.568, 'text': 'Gonna change the font size to 50 pixels.', 'start': 614.247, 'duration': 4.321}, {'end': 620.528, 'text': 'There we go, looking good.', 'start': 619.468, 'duration': 1.06}, {'end': 626.59, 'text': 'And the button, intro button, I had, I think I had a green color on this.', 'start': 620.788, 'duration': 5.802}, {'end': 629.711, 'text': 'So I have a width of 150 pixels.', 'start': 626.99, 'duration': 2.721}, {'end': 630.711, 'text': 'There we go.', 'start': 630.251, 'duration': 0.46}, {'end': 634.252, 'text': 'And a height of 50 pixels.', 'start': 630.991, 'duration': 3.261}, {'end': 636.527, 'text': 'Like so.', 'start': 636.047, 'duration': 0.48}, {'end': 639.769, 'text': "And then we're going to remove the background.", 'start': 637.188, 'duration': 2.581}, {'end': 640.949, 'text': "I'm going to say none.", 'start': 639.789, 'duration': 1.16}, {'end': 645.332, 'text': 'Good And we can even remove the border.', 'start': 642.01, 'duration': 3.322}], 'summary': 'Styling changes made: font size set to 50px, button width 150px, height 50px, background removed, border removed.', 'duration': 34.966, 'max_score': 610.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN4610366.jpg'}, {'end': 842.26, 'src': 'embed', 'start': 806.578, 'weight': 0, 'content': [{'end': 807.079, 'text': 'There we go.', 'start': 806.578, 'duration': 0.501}, {'end': 809.781, 'text': 'So this is why we have I should have done that sooner.', 'start': 807.099, 'duration': 2.682}, {'end': 810.823, 'text': 'Ah, damn it.', 'start': 810.122, 'duration': 0.701}, {'end': 813.586, 'text': 'Okay, so 50.', 'start': 811.463, 'duration': 2.123}, {'end': 816.749, 'text': 'Good So we have these and we need to take everything here.', 'start': 813.586, 'duration': 3.163}, {'end': 820.293, 'text': 'And what we need to do is just basically display flex them.', 'start': 817.65, 'duration': 2.643}, {'end': 824.998, 'text': 'So these are if you remember, I believe they were the hands.', 'start': 820.974, 'duration': 4.024}, {'end': 826.54, 'text': 'So we have the match.', 'start': 825.539, 'duration': 1.001}, {'end': 831.696, 'text': 'the winner, which we styled right now, then we have the hands and the options.', 'start': 827.335, 'duration': 4.361}, {'end': 834.557, 'text': 'Okay So actually we can do it with both.', 'start': 832.076, 'duration': 2.481}, {'end': 842.26, 'text': "I think let's just do hands and options so we can select both of them and display flex.", 'start': 834.617, 'duration': 7.643}], 'summary': 'Discussion about styling elements with display flex, including 50 elements.', 'duration': 35.682, 'max_score': 806.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN4806578.jpg'}, {'end': 881.601, 'src': 'heatmap', 'start': 834.617, 'weight': 0.907, 'content': [{'end': 842.26, 'text': "I think let's just do hands and options so we can select both of them and display flex.", 'start': 834.617, 'duration': 7.643}, {'end': 843.96, 'text': 'Oh, there we go.', 'start': 843.34, 'duration': 0.62}, {'end': 848.461, 'text': "Then let's do justify content space around.", 'start': 844.92, 'duration': 3.541}, {'end': 849.422, 'text': "Let's see how that looks.", 'start': 848.481, 'duration': 0.941}, {'end': 850.522, 'text': 'Yeah, that looks good.', 'start': 849.802, 'duration': 0.72}, {'end': 853.603, 'text': 'And then align items center.', 'start': 851.162, 'duration': 2.441}, {'end': 856.893, 'text': 'Alright, looks good.', 'start': 855.552, 'duration': 1.341}, {'end': 860.894, 'text': 'And you know what? For the buttons, we can also do this up here.', 'start': 857.533, 'duration': 3.361}, {'end': 865.816, 'text': 'So we can just do match and button.', 'start': 861.654, 'duration': 4.162}, {'end': 867.656, 'text': 'Oh, there we go.', 'start': 866.916, 'duration': 0.74}, {'end': 870.937, 'text': 'See, we just made our lives way easier.', 'start': 868.937, 'duration': 2}, {'end': 873.138, 'text': 'Perfect Nice.', 'start': 871.438, 'duration': 1.7}, {'end': 881.601, 'text': "Do we need anything else? What we need to also do is switch this one because it's in the bad position.", 'start': 873.638, 'duration': 7.963}], 'summary': 'Using css, the speaker adjusted the layout, adding flex, space around, align items, and matching buttons for improved design and functionality.', 'duration': 46.984, 'max_score': 834.617, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN4834617.jpg'}], 'start': 349.579, 'title': 'Web and game interface styling', 'summary': 'Involves adding basic styling to a css stylesheet, including removing margins and adding a height of 100 vh to a section. it also covers the process of styling and positioning elements for a game interface, including adding background colors, adjusting font sizes, and centering elements, with a focus on creating a visually appealing and functional design.', 'chapters': [{'end': 428.452, 'start': 349.579, 'title': 'Web development css styling', 'summary': 'Involves adding basic styling to a css stylesheet, including removing margins and adding a height of 100 vh to a section.', 'duration': 78.873, 'highlights': ['Adding basic styling to a CSS stylesheet by removing margins, padding, and setting box sizing to border box.', 'Setting a height of 100 VH to a section for visual presentation.']}, {'end': 903.751, 'start': 428.593, 'title': 'Styling and positioning elements for game interface', 'summary': 'Covers the process of styling and positioning elements for a game interface, including adding background colors, adjusting font sizes, and centering elements, with a focus on creating a visually appealing and functional design.', 'duration': 475.158, 'highlights': ['Adding background colors and adjusting font sizes The speaker demonstrates adding background colors and adjusting font sizes to create a visually appealing design.', 'Centering elements and adjusting spacing The speaker explains how to center elements and add spacing by using display flex and justify content, creating a visually balanced layout.', "Positioning elements and transforming for centering The speaker details the process of positioning elements using 'position: absolute' and transforming for centering, ensuring precise placement on the interface."]}], 'duration': 554.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN4349579.jpg', 'highlights': ['Adding basic styling to a CSS stylesheet by removing margins, padding, and setting box sizing to border box.', 'Setting a height of 100 VH to a section for visual presentation.', 'Adding background colors and adjusting font sizes to create a visually appealing design.', 'Centering elements and adjusting spacing using display flex and justify content for a visually balanced layout.', "Positioning elements using 'position: absolute' and transforming for centering, ensuring precise placement on the interface."]}, {'end': 1118.044, 'segs': [{'end': 969.058, 'src': 'embed', 'start': 927.998, 'weight': 0, 'content': [{'end': 934.02, 'text': "So to fade this thing out, we're going to just create, well, we're going to have a div with a specific class.", 'start': 927.998, 'duration': 6.022}, {'end': 935.861, 'text': 'So one is going to be fade out.', 'start': 934.06, 'duration': 1.801}, {'end': 940.803, 'text': 'So what we want to do when we fade something out, we want to remove the opacity.', 'start': 936.301, 'duration': 4.502}, {'end': 944.745, 'text': 'And we can do pointer events, none.', 'start': 942.083, 'duration': 2.662}, {'end': 950.068, 'text': 'So what this is going to do is basically you cannot click on an element.', 'start': 945.225, 'duration': 4.843}, {'end': 957.972, 'text': 'So if we add pointer events, none to the whole intro section here, we cannot click on the intro section, basically.', 'start': 950.408, 'duration': 7.564}, {'end': 965.336, 'text': 'So if we have the other section coming in, even though this is because when you again, when you add just opacity zero.', 'start': 958.172, 'duration': 7.164}, {'end': 968.037, 'text': "so let's also add the cursor pointer to the buttons.", 'start': 965.336, 'duration': 2.701}, {'end': 969.058, 'text': "And I'll show you what I mean.", 'start': 968.077, 'duration': 0.981}], 'summary': 'Creating a fade out effect by applying opacity and pointer events to elements.', 'duration': 41.06, 'max_score': 927.998, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN4927998.jpg'}, {'end': 1088.189, 'src': 'embed', 'start': 1057.421, 'weight': 7, 'content': [{'end': 1063.767, 'text': 'and then we open up some brackets and here we are going to write all of our code and all of our additional functions.', 'start': 1057.421, 'duration': 6.346}, {'end': 1070.134, 'text': "So what you're doing basically by this, you're scoping everything inside this function so you don't have global variables.", 'start': 1064.288, 'duration': 5.846}, {'end': 1076.941, 'text': 'The global variables are basically any, if I have a variable here, it can be accessed everywhere else.', 'start': 1070.354, 'duration': 6.587}, {'end': 1080.744, 'text': 'So this is kind of like self containing all your code.', 'start': 1077.321, 'duration': 3.423}, {'end': 1088.189, 'text': "And in here, the first things that we're going to need is I'm going to just get the score of these two.", 'start': 1081.805, 'duration': 6.384}], 'summary': 'Functions help contain code, avoiding global variables. initially, the score of two needs to be obtained.', 'duration': 30.768, 'max_score': 1057.421, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN41057421.jpg'}], 'start': 905.732, 'title': 'Javascript manipulation and function scoping', 'summary': 'Covers javascript class manipulation for element fade effects, including adding and removing classes, adjusting opacity, and pointer events. it also discusses creating functions, scoping, and the use of arrow functions in javascript, with examples of scoring variables and their update.', 'chapters': [{'end': 1017.127, 'start': 905.732, 'title': 'Javascript class manipulation for element fade', 'summary': 'Covers the process of manipulating classes in javascript to achieve element fade effects by adding and removing specific classes, adjusting opacity, and pointer events for interactive elements.', 'duration': 111.395, 'highlights': ["By adding a 'fade out' class with opacity removal and pointer events set to 'none', the intro section becomes unclickable, creating the desired fade effect.", "Adding 'pointer events: none' to an element makes it unclickable, effectively hiding the element from interaction.", "The 'fade in' class is created to set opacity to 1 and enable all pointer events, allowing for the opposite effect of the 'fade out' class.", "Cursor pointer is added to buttons using 'cursor: pointer', enabling clickable behavior and making the buttons visible and interactive.", 'The speaker emphasizes the importance of correctly setting classes and attributes to achieve the desired visual and interactive effects.']}, {'end': 1118.044, 'start': 1017.467, 'title': 'Creating functions and scoping in javascript', 'summary': 'Discusses creating functions, scoping, and the use of arrow functions in javascript to organize code and avoid global variables, with examples of scoring variables and their update.', 'duration': 100.577, 'highlights': ['The chapter demonstrates the use of arrow functions in JavaScript for scoping and organizing code, exemplified by creating a game function with scoped additional functions.', 'The importance of scoping in JavaScript is emphasized to avoid global variables, as illustrated by the use of scoped variables for player and computer scores.', 'The chapter highlights the creation of functions with specific roles, such as comparing hands and updating scores, to organize code effectively in JavaScript.']}], 'duration': 212.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN4905732.jpg', 'highlights': ["By adding a 'fade out' class with opacity removal and pointer events set to 'none', the intro section becomes unclickable, creating the desired fade effect.", "The 'fade in' class is created to set opacity to 1 and enable all pointer events, allowing for the opposite effect of the 'fade out' class.", "Adding 'pointer events: none' to an element makes it unclickable, effectively hiding the element from interaction.", "Cursor pointer is added to buttons using 'cursor: pointer', enabling clickable behavior and making the buttons visible and interactive.", 'The speaker emphasizes the importance of correctly setting classes and attributes to achieve the desired visual and interactive effects.', 'The chapter demonstrates the use of arrow functions in JavaScript for scoping and organizing code, exemplified by creating a game function with scoped additional functions.', 'The importance of scoping in JavaScript is emphasized to avoid global variables, as illustrated by the use of scoped variables for player and computer scores.', 'The chapter highlights the creation of functions with specific roles, such as comparing hands and updating scores, to organize code effectively in JavaScript.']}, {'end': 1400.015, 'segs': [{'end': 1169.313, 'src': 'heatmap', 'start': 1119.212, 'weight': 0, 'content': [{'end': 1126.857, 'text': 'Good Then we are going to create a start game function, which is the only role of it is going to be to fade our beginners.', 'start': 1119.212, 'duration': 7.645}, {'end': 1129.439, 'text': 'Actually, we kind of need to add this back.', 'start': 1127.357, 'duration': 2.082}, {'end': 1131.9, 'text': "So let's go back to our CSS.", 'start': 1130.379, 'duration': 1.521}, {'end': 1135.402, 'text': 'I apologize because we removed the intro screen.', 'start': 1131.96, 'duration': 3.442}, {'end': 1136.923, 'text': 'So this one.', 'start': 1136.323, 'duration': 0.6}, {'end': 1140.386, 'text': "So I'm going to remove the intro like so.", 'start': 1137.624, 'duration': 2.762}, {'end': 1142.027, 'text': 'So we have this on top.', 'start': 1140.946, 'duration': 1.081}, {'end': 1148.731, 'text': "And in my index, I'm going to go to the match and I'm going to add a fade out.", 'start': 1142.767, 'duration': 5.964}, {'end': 1150.457, 'text': 'like this.', 'start': 1150.117, 'duration': 0.34}, {'end': 1152.579, 'text': 'Okay, I apologize, I forgot about this.', 'start': 1150.718, 'duration': 1.861}, {'end': 1160.445, 'text': 'So just remove the intro opacity, and just add fade out class to the match.', 'start': 1153.28, 'duration': 7.165}, {'end': 1163.768, 'text': 'And there we go, we have our introduction screen.', 'start': 1161.146, 'duration': 2.622}, {'end': 1169.313, 'text': "So we're going to have another function, which, which is basically I'm going to create it the same way we did this.", 'start': 1164.148, 'duration': 5.165}], 'summary': 'Creating functions to fade out intro screen and match screen.', 'duration': 22.815, 'max_score': 1119.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN41119212.jpg'}, {'end': 1255.672, 'src': 'embed', 'start': 1224.339, 'weight': 2, 'content': [{'end': 1234.347, 'text': "If I put it up here, it's gonna work, but I'm not gonna need this in here, so in this scope.", 'start': 1224.339, 'duration': 10.008}, {'end': 1241.934, 'text': "So I'm kinda restraining myself and just using everything I need in one function, okay?", 'start': 1235.388, 'duration': 6.546}, {'end': 1245.677, 'text': 'And things like these that I need across multiple functions.', 'start': 1242.274, 'duration': 3.403}, {'end': 1249.04, 'text': "I'm gonna put in this scope here.", 'start': 1245.677, 'duration': 3.363}, {'end': 1254.491, 'text': 'Okay, so we have this, we also need to get the intro screen.', 'start': 1250.188, 'duration': 4.303}, {'end': 1255.672, 'text': "So I'm going to say const.", 'start': 1254.571, 'duration': 1.101}], 'summary': 'Utilizing a single function for scope and reusing code across functions.', 'duration': 31.333, 'max_score': 1224.339, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN41224339.jpg'}, {'end': 1311.021, 'src': 'embed', 'start': 1283.738, 'weight': 3, 'content': [{'end': 1289.421, 'text': "So every time we click on the let's play, we are going to run something in here.", 'start': 1283.738, 'duration': 5.683}, {'end': 1298.818, 'text': 'So every time we click and the other argument is a function, so make sure to remember that and rather than writing, function like,', 'start': 1289.501, 'duration': 9.317}, {'end': 1311.021, 'text': 'so you can use the shorthand method again just arrow function, just parentheses again equal, bigger than and brackets, okay? Like so.', 'start': 1298.818, 'duration': 12.203}], 'summary': 'Explanation on using arrow functions as shorthand methods in javascript.', 'duration': 27.283, 'max_score': 1283.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN41283738.jpg'}], 'start': 1119.212, 'title': 'Javascript game function and event listeners', 'summary': 'Details the creation of a start game function, involving the removal of an intro screen and addition of a fade out class. it covers javascript function scoping and event listeners, demonstrating the use of document.queryselector, const, and addeventlistener to efficiently manage code structure and functionality. additionally, it discusses troubleshooting and executing javascript functions to achieve the fade-out effect for the intro screen and demonstrates the organization of functions within a larger function.', 'chapters': [{'end': 1190.486, 'start': 1119.212, 'title': 'Creating start game function', 'summary': 'Details the process of creating a start game function, involving the removal of an intro screen and addition of a fade out class to the match, emphasizing the need to create variables inside the necessary functions.', 'duration': 71.274, 'highlights': ["The function's sole purpose is to fade out the intro screen and fade in another element.", 'The process involves removing the intro screen and adding a fade out class to the match.', 'Emphasizes the practice of creating variables inside the functions where they are needed.']}, {'end': 1311.021, 'start': 1190.886, 'title': 'Javascript function scoping and event listeners', 'summary': 'Covers javascript function scoping and event listeners, demonstrating the use of document.queryselector, const, and addeventlistener to efficiently manage code structure and functionality.', 'duration': 120.135, 'highlights': ['The use of document.querySelector to efficiently select HTML elements, such as playButton, intro screen, and match screen, optimizing code structure.', 'Demonstrating the importance of scoping by restraining the use of variables to specific functions, ensuring efficient and organized code implementation.', 'The utilization of addEventListener to create interactive functionality, exemplifying the use of arrow functions for concise code syntax.']}, {'end': 1400.015, 'start': 1312.461, 'title': 'Javascript intro screen fade out', 'summary': 'Discusses troubleshooting and executing javascript functions to achieve the fade-out effect for the intro screen and demonstrates the organization of functions within a larger function.', 'duration': 87.554, 'highlights': ['The need to troubleshoot and execute the start game function to enable the fade-out effect for the intro screen.', 'Illustrating the organization of smaller functions within a larger function to ensure their execution at the end.', 'Demonstrating the call of the game function outside the big function to execute the entire code.']}], 'duration': 280.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN41119212.jpg', 'highlights': ['The use of document.querySelector to efficiently select HTML elements, optimizing code structure.', "The function's sole purpose is to fade out the intro screen and fade in another element.", 'Emphasizes the practice of creating variables inside the functions where they are needed.', 'The need to troubleshoot and execute the start game function to enable the fade-out effect for the intro screen.', 'Demonstrating the organization of smaller functions within a larger function to ensure their execution at the end.', 'Demonstrating the call of the game function outside the big function to execute the entire code.']}, {'end': 1901.136, 'segs': [{'end': 1615.403, 'src': 'embed', 'start': 1585.327, 'weight': 1, 'content': [{'end': 1586.688, 'text': 'Yep Player hand, computer hand.', 'start': 1585.327, 'duration': 1.361}, {'end': 1589.071, 'text': "So these are the images that we're getting.", 'start': 1586.708, 'duration': 2.363}, {'end': 1597.161, 'text': 'Good So what do we need to do? Well, we need to also get the computers options.', 'start': 1589.832, 'duration': 7.329}, {'end': 1600.579, 'text': 'Computer options.', 'start': 1598.939, 'duration': 1.64}, {'end': 1602.86, 'text': "Now, what are the computer's options?", 'start': 1600.979, 'duration': 1.881}, {'end': 1615.403, 'text': 'Well, this is kind of going to be randomly generated, because, yeah, what we need to do is just generate a random number between 0, 1, and 2..', 'start': 1602.9, 'duration': 12.503}], 'summary': 'Developing a system to generate random computer options for a game.', 'duration': 30.076, 'max_score': 1585.327, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN41585327.jpg'}, {'end': 1745.744, 'src': 'embed', 'start': 1712.803, 'weight': 0, 'content': [{'end': 1715.166, 'text': "Let's also console log this and see what we get.", 'start': 1712.803, 'duration': 2.363}, {'end': 1717.168, 'text': 'Computer number.', 'start': 1716.207, 'duration': 0.961}, {'end': 1719.291, 'text': "Let's see.", 'start': 1718.83, 'duration': 0.461}, {'end': 1727.189, 'text': 'Do we get the cost? So we get 2, refresh, 2, 3, 0.5.', 'start': 1721.564, 'duration': 5.625}, {'end': 1729.831, 'text': 'All right, you get the idea.', 'start': 1727.189, 'duration': 2.642}, {'end': 1731.972, 'text': "But I don't want this long-ass number.", 'start': 1730.211, 'duration': 1.761}, {'end': 1734.935, 'text': 'I want to have 0, 1, and 2.', 'start': 1732.473, 'duration': 2.462}, {'end': 1745.744, 'text': 'So what we can do is take everything in here and wrap it in parentheses, and we can do math.floor, like so.', 'start': 1734.935, 'duration': 10.809}], 'summary': 'Using console log, obtained cost as 2, refresh as 2, and 0.5. utilized math.floor for desired output.', 'duration': 32.941, 'max_score': 1712.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN41712803.jpg'}, {'end': 1837.708, 'src': 'embed', 'start': 1807.358, 'weight': 2, 'content': [{'end': 1812.619, 'text': 'you can add an arrow function in here, like so, and we are getting the option.', 'start': 1807.358, 'duration': 5.261}, {'end': 1814.98, 'text': 'So each individual button that we can choose.', 'start': 1812.679, 'duration': 2.301}, {'end': 1821.561, 'text': 'And since we only have one parameter, what you can also do is get rid of the parentheses.', 'start': 1815.64, 'duration': 5.921}, {'end': 1825.622, 'text': 'So if you have one, only one in here, you can get rid of the parentheses.', 'start': 1821.721, 'duration': 3.901}, {'end': 1835.327, 'text': 'Okay So in here, Each option is going to be, um, yeah, each button.', 'start': 1825.882, 'duration': 9.445}, {'end': 1837.708, 'text': 'So here we can option.', 'start': 1835.848, 'duration': 1.86}], 'summary': 'Demonstrating the use of arrow functions, highlighting the elimination of parentheses for a single parameter.', 'duration': 30.35, 'max_score': 1807.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN41807358.jpg'}], 'start': 1400.035, 'title': 'Coding and game creation', 'summary': 'Covers adding transitions and delays in coding, including a 0.5-second ease transition to opacity and a delay to match element, as well as creating a rock, paper, scissors game using javascript, involving option selection, image generation, random number generation, and event listener setup.', 'chapters': [{'end': 1485.858, 'start': 1400.035, 'title': 'Adding transitions and delays in coding', 'summary': 'Discusses adding transitions and delays to different elements in a coding project, with a focus on adding a 0.5-second ease transition to the opacity and a small delay to the match element, resulting in a successful implementation.', 'duration': 85.823, 'highlights': ['Adding a 0.5-second ease transition to the opacity of an element in the coding project.', 'Applying a small delay to the match element after the ease transition for a smooth implementation.', 'Successfully achieving the desired transitions and delays in the coding project.']}, {'end': 1901.136, 'start': 1486.578, 'title': 'Creating a rock paper scissors game', 'summary': 'Outlines the process of creating a rock, paper, scissors game using javascript, including selecting options and images, generating a random number, and setting up event listeners for button clicks.', 'duration': 414.558, 'highlights': ['The chapter explains the process of selecting options and images for the rock, paper, scissors game, including using document.querySelector to select buttons and images.', "It details the generation of a random number between 0, 1, and 2 using math.random and math.floor, essential for randomly selecting rock, paper, or scissors for the computer's move.", "The chapter sets up event listeners for button clicks and emphasizes the use of normal functions over arrow functions to ensure the correct binding of the 'this' keyword.", "It provides insights into the importance of using a normal function for event listeners to ensure the correct binding of the 'this' keyword to the selected option."]}], 'duration': 501.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN41400035.jpg', 'highlights': ['Creating a rock, paper, scissors game using javascript, involving option selection, image generation, random number generation, and event listener setup.', 'Applying a small delay to the match element after the ease transition for a smooth implementation.', 'Adding a 0.5-second ease transition to the opacity of an element in the coding project.', 'The chapter explains the process of selecting options and images for the rock, paper, scissors game, including using document.querySelector to select buttons and images.', "It details the generation of a random number between 0, 1, and 2 using math.random and math.floor, essential for randomly selecting rock, paper, or scissors for the computer's move.", "The chapter sets up event listeners for button clicks and emphasizes the use of normal functions over arrow functions to ensure the correct binding of the 'this' keyword.", 'Successfully achieving the desired transitions and delays in the coding project.', "It provides insights into the importance of using a normal function for event listeners to ensure the correct binding of the 'this' keyword to the selected option."]}, {'end': 2475.799, 'segs': [{'end': 2218.155, 'src': 'embed', 'start': 2193.059, 'weight': 2, 'content': [{'end': 2199.76, 'text': "if player choice triple equals with rock, I'm going to do lowercase.", 'start': 2193.059, 'duration': 6.701}, {'end': 2201.462, 'text': 'make sure you do everything lowercase.', 'start': 2199.76, 'duration': 1.702}, {'end': 2204.004, 'text': "since we did everything lowercase, let's do lowercase.", 'start': 2201.462, 'duration': 2.542}, {'end': 2209.808, 'text': 'So if we get the rock, and this is a bit kind of trippy, we need to add another if statement.', 'start': 2204.564, 'duration': 5.244}, {'end': 2218.155, 'text': "Okay, and the reason why we do that is if we check the player if it's rock, and then we compare it to the computer's choices.", 'start': 2210.289, 'duration': 7.866}], 'summary': "If player's choice is rock, convert to lowercase and add another if statement for comparison.", 'duration': 25.096, 'max_score': 2193.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN42193059.jpg'}, {'end': 2377.172, 'src': 'embed', 'start': 2311.977, 'weight': 0, 'content': [{'end': 2317.778, 'text': "And we're kind of gonna repeat this kind of switcheroo in here.", 'start': 2311.977, 'duration': 5.801}, {'end': 2322.74, 'text': 'So I just copy this, everything we have, and we can just copy paste everything.', 'start': 2317.799, 'duration': 4.941}, {'end': 2325.781, 'text': "And here we're gonna also check for the paper.", 'start': 2323.24, 'duration': 2.541}, {'end': 2327.821, 'text': 'So check for paper.', 'start': 2325.801, 'duration': 2.02}, {'end': 2330.662, 'text': 'Not much changes in here.', 'start': 2329.301, 'duration': 1.361}, {'end': 2339.224, 'text': 'So if the player choice is paper, then if computer choice is scissors, then the computer wins.', 'start': 2332.002, 'duration': 7.222}, {'end': 2342.724, 'text': 'And here the player wins.', 'start': 2340.903, 'duration': 1.821}, {'end': 2348.287, 'text': 'And then we can do it again for scissors, check for scissors.', 'start': 2343.344, 'duration': 4.943}, {'end': 2359.756, 'text': 'And here, well, scissors, and if the computer choice is scissors, well not scissors.', 'start': 2349.547, 'duration': 10.209}, {'end': 2361.738, 'text': 'So this is a problem here.', 'start': 2360.116, 'duration': 1.622}, {'end': 2366.402, 'text': 'We need to add rock for the computer choice or paper.', 'start': 2362.298, 'duration': 4.104}, {'end': 2369.665, 'text': 'So this is gonna be the computer choice is either gonna have rock or paper.', 'start': 2366.642, 'duration': 3.023}, {'end': 2372.568, 'text': "So if it's rock, then the computer wins.", 'start': 2370.346, 'duration': 2.222}, {'end': 2377.172, 'text': "If it's paper, well then we win.", 'start': 2374.83, 'duration': 2.342}], 'summary': 'Creating a game logic for paper, scissors, rock with conditional outcomes.', 'duration': 65.195, 'max_score': 2311.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN42311977.jpg'}], 'start': 1901.476, 'title': 'Creating a rock-paper-scissors game', 'summary': "Covers creating a rock-paper-scissors game using javascript, including generating random computer options, comparing choices, and updating the winner's text. it also explains the game logic, detailing conditional statements and outcomes based on player and computer choices.", 'chapters': [{'end': 2193.059, 'start': 1901.476, 'title': 'Creating a rock-paper-scissors game', 'summary': "Covers the process of creating a rock-paper-scissors game using javascript, including generating random computer options, comparing player and computer choices, and updating the winner's text on the webpage.", 'duration': 291.583, 'highlights': ['The chapter covers the process of creating a rock-paper-scissors game using JavaScript.', 'It includes generating random computer options and feeding a random number to represent rock, paper, or scissors.', "The process involves comparing player and computer choices using if statements and updating the winner's text on the webpage."]}, {'end': 2475.799, 'start': 2193.059, 'title': 'Rock, paper, scissors logic', 'summary': 'Explains the logic behind determining the winner in a rock, paper, scissors game using javascript, detailing the conditional statements and outcomes based on player and computer choices.', 'duration': 282.74, 'highlights': ['The logic behind determining the winner in a rock, paper, scissors game is explained using JavaScript, detailing the conditional statements and outcomes based on player and computer choices. The explanation covers the conditional statements and outcomes based on player and computer choices, providing insight into the logic behind determining the winner in a rock, paper, scissors game.', "The code implements conditional statements to compare the player's choice with the computer's choice, determining the winner based on the specific combinations of choices. The code effectively implements conditional statements to compare the player's choice with the computer's choice, determining the winner based on the specific combinations of choices, showcasing the practical application of logical comparisons in JavaScript.", "The process involves updating images based on the user's and computer's selections, enhancing the visual representation of the game. The process involves updating images based on the user's and computer's selections, enhancing the visual representation of the game and providing a more interactive and engaging user experience."]}], 'duration': 574.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN41901476.jpg', 'highlights': ['The chapter covers the process of creating a rock-paper-scissors game using JavaScript.', 'It includes generating random computer options and feeding a random number to represent rock, paper, or scissors.', "The process involves comparing player and computer choices using if statements and updating the winner's text on the webpage.", 'The logic behind determining the winner in a rock, paper, scissors game is explained using JavaScript, detailing the conditional statements and outcomes based on player and computer choices.', "The code implements conditional statements to compare the player's choice with the computer's choice, determining the winner based on the specific combinations of choices.", "The process involves updating images based on the user's and computer's selections, enhancing the visual representation of the game."]}, {'end': 3228.482, 'segs': [{'end': 2599.395, 'src': 'heatmap', 'start': 2488.369, 'weight': 0, 'content': [{'end': 2510.421, 'text': 'we can do computer hand dot source equals to again backticks assets and then what we can do is do the dollar like so and the curly brackets and we can do computer choice.', 'start': 2488.369, 'duration': 22.052}, {'end': 2516.545, 'text': "Okay, this one that's randomly giving us rock, paper, scissors, dot png.", 'start': 2511.322, 'duration': 5.223}, {'end': 2518.346, 'text': "And let's see if this works.", 'start': 2517.146, 'duration': 1.2}, {'end': 2522.949, 'text': "Okay, we're getting randomly generated.", 'start': 2520.928, 'duration': 2.021}, {'end': 2529.373, 'text': 'If we pick paper, goes paper, rock, scissors, and the computer one is randomly generated.', 'start': 2523.189, 'duration': 6.184}, {'end': 2533.937, 'text': 'Good Okay.', 'start': 2530.594, 'duration': 3.343}, {'end': 2537, 'text': 'I think I saw gang sign in there, but Hey, it is what it is.', 'start': 2533.997, 'duration': 3.003}, {'end': 2539.862, 'text': "Okay So let's also check with these.", 'start': 2537.36, 'duration': 2.502}, {'end': 2544.686, 'text': 'So we update the score up here and not the score, the text up here.', 'start': 2540.142, 'duration': 4.544}, {'end': 2546.367, 'text': "So let's see if this works.", 'start': 2545.287, 'duration': 1.08}, {'end': 2548.349, 'text': 'What we need to do is say compare hands.', 'start': 2546.628, 'duration': 1.721}, {'end': 2554.214, 'text': "So we're calling this big function here and we need to feed these two values.", 'start': 2549.39, 'duration': 4.824}, {'end': 2556.316, 'text': 'So the player choice and the computer choice.', 'start': 2554.454, 'duration': 1.862}, {'end': 2562.761, 'text': 'So to do that, we can do this dot text content again, and the computer choice.', 'start': 2556.836, 'duration': 5.925}, {'end': 2567.483, 'text': "Let's see.", 'start': 2567.123, 'duration': 0.36}, {'end': 2570.866, 'text': "So, it's a tie.", 'start': 2569.505, 'duration': 1.361}, {'end': 2571.666, 'text': "That's correct.", 'start': 2571.026, 'duration': 0.64}, {'end': 2573.307, 'text': 'Computer wins.', 'start': 2572.607, 'duration': 0.7}, {'end': 2574.468, 'text': 'I have paper.', 'start': 2573.367, 'duration': 1.101}, {'end': 2576.489, 'text': 'He has scissors.', 'start': 2575.008, 'duration': 1.481}, {'end': 2577.37, 'text': "That's correct.", 'start': 2576.849, 'duration': 0.521}, {'end': 2578.706, 'text': "It's a tie.", 'start': 2578.106, 'duration': 0.6}, {'end': 2581.728, 'text': 'Okay So everything works fine.', 'start': 2579.427, 'duration': 2.301}, {'end': 2583.648, 'text': 'Now there are a few things we need to do.', 'start': 2582.228, 'duration': 1.42}, {'end': 2586.129, 'text': 'We need to add the animation and update the score.', 'start': 2583.768, 'duration': 2.361}, {'end': 2589.931, 'text': 'So to update the score, we can also just do a separate function.', 'start': 2586.59, 'duration': 3.341}, {'end': 2596.014, 'text': 'So the way we did down here with the compare hands, we can just go again outside of all this big thing.', 'start': 2590.011, 'duration': 6.003}, {'end': 2599.395, 'text': 'So the play match, and we can just create another function.', 'start': 2596.094, 'duration': 3.301}], 'summary': 'Developing a computer-based rock, paper, scissors game, testing functionality and verifying outcomes.', 'duration': 19.968, 'max_score': 2488.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN42488369.jpg'}, {'end': 3029.407, 'src': 'embed', 'start': 2952.513, 'weight': 2, 'content': [{'end': 2962.681, 'text': 'So player hand dot style dot and woo style that animation is equal to shake player.', 'start': 2952.513, 'duration': 10.168}, {'end': 2966.083, 'text': 'Two seconds ease.', 'start': 2964.822, 'duration': 1.261}, {'end': 2970.426, 'text': "Let's copy paste this, I'm going to add it to the computer as well.", 'start': 2967.224, 'duration': 3.202}, {'end': 2976.937, 'text': 'Computer hand style animation is computer player.', 'start': 2971.707, 'duration': 5.23}, {'end': 2982.023, 'text': "Is this correct? I'm not sure.", 'start': 2978.479, 'duration': 3.544}, {'end': 2984.446, 'text': 'Shake computer, shake player.', 'start': 2982.464, 'duration': 1.982}, {'end': 2991.876, 'text': 'Computer player, shake computer, and shake player.', 'start': 2986.229, 'duration': 5.647}, {'end': 2996.18, 'text': 'Shake, shake player, shake.', 'start': 2994.198, 'duration': 1.982}, {'end': 2997.22, 'text': 'Okay Oh Jesus.', 'start': 2996.26, 'duration': 0.96}, {'end': 3002.625, 'text': "Okay So now let's see, do we get the animation? Okay.", 'start': 2997.741, 'duration': 4.884}, {'end': 3010.551, 'text': "So that kind of looks weird, but as you can see, everything updates as soon as I hit and yeah, that's not good.", 'start': 3004.286, 'duration': 6.265}, {'end': 3016.656, 'text': "And also if we hit again, it doesn't work anymore because we already added the animation.", 'start': 3011.232, 'duration': 5.424}, {'end': 3021.08, 'text': "So it's not gonna, um, remove it.", 'start': 3017.357, 'duration': 3.723}, {'end': 3029.407, 'text': 'So what we can do is actually, we can remove these animations after they finish.', 'start': 3021.2, 'duration': 8.207}], 'summary': 'Testing animation updates on player and computer hands, encountering issues with removing animations after completion.', 'duration': 76.894, 'max_score': 2952.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN42952513.jpg'}, {'end': 3137.693, 'src': 'embed', 'start': 3108.686, 'weight': 1, 'content': [{'end': 3112.689, 'text': 'So the animation, we need this to go as soon as possible.', 'start': 3108.686, 'duration': 4.003}, {'end': 3116.392, 'text': 'What else do we need to update? Well, we need these to update.', 'start': 3113.35, 'duration': 3.042}, {'end': 3117.794, 'text': 'and this.', 'start': 3117.353, 'duration': 0.441}, {'end': 3122.439, 'text': 'And after how much time? Well, we do the animations for two seconds.', 'start': 3118.054, 'duration': 4.385}, {'end': 3126.483, 'text': "So let's just update everything in here after two seconds.", 'start': 3122.999, 'duration': 3.484}, {'end': 3129.647, 'text': "So I'm going to take everything I want to update after two seconds.", 'start': 3126.503, 'duration': 3.144}, {'end': 3137.693, 'text': "I'm going to copy it cut it actually, I'm going to call something setTimeout, like so.", 'start': 3129.707, 'duration': 7.986}], 'summary': 'Animation updates needed in two seconds for various elements.', 'duration': 29.007, 'max_score': 3108.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN43108686.jpg'}, {'end': 3206.554, 'src': 'heatmap', 'start': 3169.2, 'weight': 0.761, 'content': [{'end': 3172.385, 'text': "So we're going to add 2000 because it's going to take it in milliseconds.", 'start': 3169.2, 'duration': 3.185}, {'end': 3175.433, 'text': "So I'm going to add 2000.", 'start': 3172.825, 'duration': 2.608}, {'end': 3180.417, 'text': "And in here, we're just going to call the function and the updating the images.", 'start': 3175.433, 'duration': 4.984}, {'end': 3181.698, 'text': "Let's take a look.", 'start': 3180.958, 'duration': 0.74}, {'end': 3185.922, 'text': 'And there we go.', 'start': 3182.679, 'duration': 3.243}, {'end': 3188.544, 'text': 'So everything updates right after we are done.', 'start': 3185.982, 'duration': 2.562}, {'end': 3195.709, 'text': "And it's getting hella dark in here, so I don't want to waste any more of your time, but hopefully you enjoyed this.", 'start': 3189.225, 'duration': 6.484}, {'end': 3204.573, 'text': "You can also make another function, if you want, and check when the player score so the P score reaches I don't know 10,", 'start': 3195.949, 'duration': 8.624}, {'end': 3206.554, 'text': 'then you can restart the whole game.', 'start': 3204.573, 'duration': 1.981}], 'summary': 'Added 2000 milliseconds for image updates, and suggested creating a function for player score reaching 10 to restart the game.', 'duration': 37.354, 'max_score': 3169.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN43169200.jpg'}], 'start': 2475.879, 'title': 'Game development and image updates', 'summary': 'Involves developing a rock, paper, scissors game using javascript, adding animations, updating elements, and discussing removing animations, image updates, and game restart functions based on score. it also covers animation duration and settimeout for delaying functions.', 'chapters': [{'end': 2997.22, 'start': 2475.879, 'title': 'Rock, paper, scissors game development', 'summary': "Involves developing a rock, paper, scissors game where the computer generates a random choice, updates the score, and adds animations to the game's elements. the developer uses javascript to implement functionality for updating the score, adding animations, and ensuring elements update after animations.", 'duration': 521.341, 'highlights': ["The developer implements functionality to update the score by creating a separate function called 'update score' to increment the player and computer scores, and then updates the score elements on the screen accordingly.", 'Animations are added to the game elements using keyframes and CSS, with the developer ensuring that the elements update after the animations by setting a timeout on the compare hands function.', "The computer generates a random choice of rock, paper, or scissors for the game, and the player's and computer's choices are compared to determine the winner, with the developer ensuring that the game updates the choices and score after each round."]}, {'end': 3228.482, 'start': 2997.741, 'title': 'Removing animations and updating images', 'summary': "Discusses how to remove animations after they finish, update images after a delay, and add functions to restart the game when the player's score reaches a certain point. it also covers the duration of animations and the use of settimeout for delaying functions.", 'duration': 230.741, 'highlights': ['The chapter discusses how to remove animations after they finish The speaker explains how to remove animations by adding an event listener that runs every time the animation ends, which then removes the animation by setting the style.animation to an empty string.', 'Updating images after a delay is covered The speaker demonstrates using setTimeout to delay the updating of images by 2 seconds, ensuring that everything updates after the specified delay.', "Adding functions to restart the game based on the player's score is mentioned The speaker suggests adding a function to check when the player's score reaches a certain point (e.g., 10) and then restarting the game, providing the option to add more functionality to the game.", 'The duration of animations and the use of setTimeout for delaying functions is explained The speaker explains that the animations run for two seconds and demonstrates using setTimeout with a 2000 millisecond delay to update the images, ensuring they update after the specified time.']}], 'duration': 752.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qWPtKtYEsN4/pics/qWPtKtYEsN42475879.jpg', 'highlights': ["The developer implements functionality to update the score by creating a separate function called 'update score' to increment the player and computer scores, and then updates the score elements on the screen accordingly.", "The computer generates a random choice of rock, paper, or scissors for the game, and the player's and computer's choices are compared to determine the winner, with the developer ensuring that the game updates the choices and score after each round.", 'The chapter discusses how to remove animations after they finish The speaker explains how to remove animations by adding an event listener that runs every time the animation ends, which then removes the animation by setting the style.animation to an empty string.', 'Updating images after a delay is covered The speaker demonstrates using setTimeout to delay the updating of images by 2 seconds, ensuring that everything updates after the specified delay.']}], 'highlights': ['Creating a rock, paper, scissors game using JavaScript, HTML, and CSS', "Designing an intro screen with a title 'Rock, Paper, and Scissors' and a 'Let's play' button", "Setting up a match section with a title 'Choose an option' and images of hands representing the player and computer choices", 'Adding basic styling to a CSS stylesheet by removing margins, padding, and setting box sizing to border box', 'Centering elements and adjusting spacing using display flex and justify content for a visually balanced layout', "By adding a 'fade out' class with opacity removal and pointer events set to 'none', the intro section becomes unclickable, creating the desired fade effect", "The 'fade in' class is created to set opacity to 1 and enable all pointer events, allowing for the opposite effect of the 'fade out' class", 'The chapter demonstrates the use of arrow functions in JavaScript for scoping and organizing code, exemplified by creating a game function with scoped additional functions', 'The use of document.querySelector to efficiently select HTML elements, optimizing code structure', "The function's sole purpose is to fade out the intro screen and fade in another element", 'Creating a rock, paper, scissors game using javascript, involving option selection, image generation, random number generation, and event listener setup', 'Applying a small delay to the match element after the ease transition for a smooth implementation', 'The chapter explains the process of selecting options and images for the rock, paper, scissors game, including using document.querySelector to select buttons and images', 'The chapter covers the process of creating a rock-paper-scissors game using JavaScript', "The developer implements functionality to update the score by creating a separate function called 'update score' to increment the player and computer scores, and then updates the score elements on the screen accordingly", "The computer generates a random choice of rock, paper, or scissors for the game, and the player's and computer's choices are compared to determine the winner, with the developer ensuring that the game updates the choices and score after each round", 'The chapter discusses how to remove animations after they finish The speaker explains how to remove animations by adding an event listener that runs every time the animation ends, which then removes the animation by setting the style.animation to an empty string', 'Updating images after a delay is covered The speaker demonstrates using setTimeout to delay the updating of images by 2 seconds, ensuring that everything updates after the specified delay']}