title
Build Minesweeper with JavaScript

description
We are going to build the Minesweeper game functionality with vanilla JavaScript using recursion Ania's YouTube Channel: https://www.youtube.com/c/AniaKub%C3%B3w Ania's Twitter: https://twitter.com/ania_kubow Code: https://github.com/kubowania/minesweeper 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Course Links: https://www.traversymedia.com Follow Traversy Media: https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia https://www.facebook.com/traversymedia Timestamps: 0:00 - Brad's Intro 0:50 - Ania's Intro 1:11 - Recursion explainer 04:06 - Setting up our HTML 04:10 - Styling our Grid in CSS 07:20 - Setting up our JavaScript usng the DOM EventListener 08:47 - Creating our Board using .createElement() and .appendChild() 16:57 - Adding numbers to the board using Modulus and .contains() 25:21 - Checking what is under a Square usng .getAttribute() .innerHTML and .add() 31:33 - Checking neighbouring squares using recursion and setTimeout 42:56 - Adding flags to squares with a left click 44:46 - Checking for wins

detail
{'title': 'Build Minesweeper with JavaScript', 'heatmap': [{'end': 695.542, 'start': 664.611, 'weight': 0.938}, {'end': 1300.931, 'start': 1266.632, 'weight': 0.718}, {'end': 1357.915, 'start': 1325.8, 'weight': 0.779}, {'end': 1531.305, 'start': 1470.576, 'weight': 0.702}, {'end': 1705.039, 'start': 1641.191, 'weight': 0.736}, {'end': 2514.19, 'start': 2481.092, 'weight': 0.926}], 'summary': 'Features anya cabot building minesweeper in javascript, covering recursion, game file setup, grid creation, edge conditions, game logic, square clicking logic, and game development with emphasis on javascript methods, dom event listeners, grid operations, and game features.', 'chapters': [{'end': 60.672, 'segs': [{'end': 60.672, 'src': 'embed', 'start': 7.042, 'weight': 0, 'content': [{'end': 10.626, 'text': "What's going on guys? So I hope you've been enjoying these guest creators that I've been having on.", 'start': 7.042, 'duration': 3.584}, {'end': 16.532, 'text': "And today we have a special guest, Anya Cabot, and she's going to build the game Minesweeper in JavaScript.", 'start': 10.686, 'duration': 5.846}, {'end': 18.495, 'text': 'So she actually does a lot of games.', 'start': 16.993, 'duration': 1.502}, {'end': 22.839, 'text': 'If you check her channel out, she does like Tetris and Candy Crush type games.', 'start': 18.535, 'duration': 4.304}, {'end': 23.801, 'text': 'She also works with..', 'start': 22.94, 'duration': 0.861}, {'end': 30.565, 'text': "in addition to vanilla javascript, react and react native, and she's a really cool editing and presentation style.", 'start': 24.421, 'duration': 6.144}, {'end': 32.247, 'text': "so it's really unique.", 'start': 30.565, 'duration': 1.682}, {'end': 37.851, 'text': "and the game she's going to create today is minesweeper and she's going to focus a lot on recursion.", 'start': 32.247, 'duration': 5.604}, {'end': 38.971, 'text': "so there's there.", 'start': 37.851, 'duration': 1.12}, {'end': 44.495, 'text': 'there are some advanced elements, uh, in this project that i think a lot of you guys will enjoy.', 'start': 38.971, 'duration': 5.524}, {'end': 48.038, 'text': 'but, uh, her channel is in the description along with the code for this project.', 'start': 44.495, 'duration': 3.543}, {'end': 49.439, 'text': "so let's go ahead and get started.", 'start': 48.038, 'duration': 1.401}, {'end': 52.989, 'text': "Hey, everyone, super excited to be here today on Brad's channel.", 'start': 49.707, 'duration': 3.282}, {'end': 56.851, 'text': 'Brad has been an incredible source of inspiration for me since starting my own YouTube channel.', 'start': 53.209, 'duration': 3.642}, {'end': 60.672, 'text': "So I'm so honored to be here today with all of you.", 'start': 56.911, 'duration': 3.761}], 'summary': 'Anya cabot is a guest creator building minesweeper in javascript with a focus on recursion and advanced elements, showcasing her unique editing and presentation style.', 'duration': 53.63, 'max_score': 7.042, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE7042.jpg'}], 'start': 7.042, 'title': 'Creating minesweeper game in javascript', 'summary': 'Features guest creator anya cabot building the game minesweeper in javascript, highlighting her expertise in creating various games and advanced elements like recursion, and her collaboration with brad and his audience.', 'chapters': [{'end': 60.672, 'start': 7.042, 'title': 'Creating minesweeper game in javascript', 'summary': 'Features guest creator anya cabot building the game minesweeper in javascript, highlighting her expertise in creating various games and advanced elements like recursion, and her collaboration with brad and his audience.', 'duration': 53.63, 'highlights': ['Anya Cabot showcases her expertise in creating various games like Tetris and Candy Crush type games, along with her proficiency in vanilla JavaScript, React, and React Native.', 'Anya Cabot is going to focus a lot on recursion while creating the minesweeper game, incorporating advanced elements that the audience will enjoy.', 'Anya Cabot expresses her excitement and honor to collaborate with Brad and his audience, highlighting the positive impact Brad has had on her own YouTube channel.']}], 'duration': 53.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE7042.jpg', 'highlights': ['Anya Cabot showcases her expertise in creating various games like Tetris and Candy Crush type games, along with her proficiency in vanilla JavaScript, React, and React Native.', 'Anya Cabot is going to focus a lot on recursion while creating the minesweeper game, incorporating advanced elements that the audience will enjoy.', 'Anya Cabot expresses her excitement and honor to collaborate with Brad and his audience, highlighting the positive impact Brad has had on her own YouTube channel.']}, {'end': 507.286, 'segs': [{'end': 118.126, 'src': 'embed', 'start': 89.476, 'weight': 0, 'content': [{'end': 92.137, 'text': 'I think the audience has a question for you.', 'start': 89.476, 'duration': 2.661}, {'end': 101.76, 'text': "What is recursion? Well, in the least amount of words, recursion is a function that calls itself until it can't anymore.", 'start': 92.617, 'duration': 9.143}, {'end': 104.641, 'text': "That calls itself? That's right.", 'start': 102.04, 'duration': 2.601}, {'end': 108.383, 'text': 'Ah, you mean a little bit like this.', 'start': 105.342, 'duration': 3.041}, {'end': 110.704, 'text': 'Here we have an ice cream.', 'start': 109.183, 'duration': 1.521}, {'end': 112.124, 'text': "But I don't like this ice cream.", 'start': 111.084, 'duration': 1.04}, {'end': 112.844, 'text': "It's too small.", 'start': 112.204, 'duration': 0.64}, {'end': 115.845, 'text': 'In fact, I know the exact ice cream that I want.', 'start': 113.264, 'duration': 2.581}, {'end': 118.126, 'text': 'It is blue with a flower on it.', 'start': 116.466, 'duration': 1.66}], 'summary': "Recursion is a function that calls itself until it can't anymore.", 'duration': 28.65, 'max_score': 89.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE89476.jpg'}, {'end': 169.995, 'src': 'embed', 'start': 141.045, 'weight': 1, 'content': [{'end': 143.867, 'text': 'So that was a simple explanation of what recursion is all about.', 'start': 141.045, 'duration': 2.822}, {'end': 145.808, 'text': "But let's have a look at it in code.", 'start': 144.207, 'duration': 1.601}, {'end': 153.192, 'text': 'Here is how we will be using recursion in order to check neighboring squares of any square we click in our minesweeper game.', 'start': 146.328, 'duration': 6.864}, {'end': 159.476, 'text': 'What is happening here is when we click on a square, we have many arguments that can make us break this recursion.', 'start': 153.632, 'duration': 5.844}, {'end': 161.417, 'text': 'As you can see here by the returns.', 'start': 159.876, 'duration': 1.541}, {'end': 169.995, 'text': 'If none of these are met, we then go to another function called check square, where we check our neighboring squares on the board.', 'start': 162.424, 'duration': 7.571}], 'summary': 'Using recursion to check neighboring squares in minesweeper game.', 'duration': 28.95, 'max_score': 141.045, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE141045.jpg'}, {'end': 206.774, 'src': 'embed', 'start': 179.701, 'weight': 2, 'content': [{'end': 184.523, 'text': "For those of you who don't know how to play Minesweeper, it's a simple game where you have to find all the bombs on your grid.", 'start': 179.701, 'duration': 4.822}, {'end': 187.725, 'text': 'If you click a square with a bomb, your game is over.', 'start': 184.843, 'duration': 2.882}, {'end': 191.026, 'text': 'However, if you click an empty square, two things will happen.', 'start': 187.965, 'duration': 3.061}, {'end': 197.469, 'text': 'If the square you click on is next to any bombs, so if any square around it, the eight squares around it have a bomb,', 'start': 191.287, 'duration': 6.182}, {'end': 200.771, 'text': 'that square will show you the total number of bombs surrounding you.', 'start': 197.469, 'duration': 3.302}, {'end': 206.774, 'text': "If the square you click on is not a bomb and is not next to any bombs, so it's just an empty square.", 'start': 200.911, 'duration': 5.863}], 'summary': 'Minesweeper is a game to find bombs on a grid. clicking on a bomb ends the game. clicking on an empty square reveals nearby bomb count.', 'duration': 27.073, 'max_score': 179.701, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE179701.jpg'}, {'end': 289.572, 'src': 'embed', 'start': 249.129, 'weight': 3, 'content': [{'end': 255.23, 'text': "with our script tag linking our JavaScript file to our HTML file using the JavaScript file's relative path.", 'start': 249.129, 'duration': 6.101}, {'end': 258.992, 'text': 'We do the same for our CSS file using the link tag like this.', 'start': 256.07, 'duration': 2.922}, {'end': 266.838, 'text': "As we have both files in the root of our project, the relative path is simply each file's name followed by their file extension.", 'start': 260.072, 'duration': 6.766}, {'end': 274.464, 'text': "If you are not sure what any of this means, I've done a simple explainer video on how to set up your project in your code editor,", 'start': 267.979, 'duration': 6.485}, {'end': 277.046, 'text': 'along with preferences that I choose for writing projects.', 'start': 274.464, 'duration': 2.582}, {'end': 279.848, 'text': "Definitely check this out if you haven't already.", 'start': 277.786, 'duration': 2.062}, {'end': 284.731, 'text': "Now, I'm gonna start by adding a div with a class of grid.", 'start': 281.71, 'duration': 3.021}, {'end': 289.572, 'text': 'This is where all of my game is gonna visually populate, which is pretty cool.', 'start': 285.491, 'duration': 4.081}], 'summary': 'Setting up project by linking javascript and css files, adding grid div for game visualization.', 'duration': 40.443, 'max_score': 249.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE249129.jpg'}, {'end': 473.97, 'src': 'embed', 'start': 444.261, 'weight': 5, 'content': [{'end': 446.322, 'text': 'Flip over to your app.js file.', 'start': 444.261, 'duration': 2.061}, {'end': 452.206, 'text': "Now, the first thing we're going to do is add a DOM event listener to our file.", 'start': 448.243, 'duration': 3.963}, {'end': 459.631, 'text': 'We do so by getting the document and adding an event listener, then passing through DOM content loaded like this.', 'start': 452.806, 'duration': 6.825}, {'end': 465.175, 'text': 'All our code will now be written in between these curly braces and parentheses from now on.', 'start': 460.672, 'duration': 4.503}, {'end': 473.97, 'text': 'we are doing this so that we can make sure all of our HTML file is loaded before reading this JavaScript code.', 'start': 466.601, 'duration': 7.369}], 'summary': 'Add dom event listener in app.js to ensure html file is fully loaded.', 'duration': 29.709, 'max_score': 444.261, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE444261.jpg'}], 'start': 60.852, 'title': 'Understanding recursion and setting up game files in javascript', 'summary': 'Provides an analogy to explain recursion, demonstrates its implementation in minesweeper, and details the setup of javascript and css files for game development, emphasizing the use of popular javascript methods and dom event listeners.', 'chapters': [{'end': 249.129, 'start': 60.852, 'title': 'Understanding recursion in minesweeper', 'summary': 'Explains recursion using a simple analogy of finding an ice cream, then delves into how recursion is implemented in minesweeper game to check neighboring squares. it also outlines the objective and rules of the game, emphasizing the use of popular javascript methods and encouraging interaction with the audience.', 'duration': 188.277, 'highlights': ['Recursion is explained through an analogy of finding a specific ice cream, with a base case and recursive case, demonstrating the concept in a simple and relatable manner. An analogy used to simplify the concept of recursion.', 'The implementation of recursion in the Minesweeper game is demonstrated, showcasing how it checks neighboring squares and handles different scenarios, such as empty squares and squares adjacent to bombs. Explanation of how recursion is used to check neighboring squares in the Minesweeper game.', 'Explanation of the objective and rules of the Minesweeper game, including the actions and outcomes when clicking on squares, emphasizing the use of recursion to strategically place flags and revealing the number of surrounding bombs. Overview of the rules and objectives of the Minesweeper game.', 'Encouragement for the audience to engage and interact, particularly by sharing their finished games and reaching out through social media, fostering a sense of community and collaboration. Encouragement for audience interaction and community engagement.']}, {'end': 507.286, 'start': 249.129, 'title': 'Setting up javascript and css files', 'summary': 'Explains the process of linking javascript and css files to an html file, setting up a grid for a game, and adding styling to the grid, while also outlining the use of dom event listeners and query selectors.', 'duration': 258.157, 'highlights': ['The chapter explains the process of linking JavaScript and CSS files to an HTML file It describes linking JavaScript and CSS files to an HTML file using relative paths.', 'Setting up a grid for a game and adding styling to the grid It outlines setting up a grid for a game, specifying the grid size, using display flex, and styling the divs inside the grid.', 'Outlining the use of DOM event listeners and query selectors It explains adding a DOM event listener for when the HTML file is loaded and using a query selector to pick out elements by class name.']}], 'duration': 446.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE60852.jpg', 'highlights': ['Recursion is explained through an analogy of finding a specific ice cream, with a base case and recursive case, demonstrating the concept in a simple and relatable manner.', 'The implementation of recursion in the Minesweeper game is demonstrated, showcasing how it checks neighboring squares and handles different scenarios, such as empty squares and squares adjacent to bombs.', 'Explanation of the objective and rules of the Minesweeper game, including the actions and outcomes when clicking on squares, emphasizing the use of recursion to strategically place flags and revealing the number of surrounding bombs.', 'The chapter explains the process of linking JavaScript and CSS files to an HTML file It describes linking JavaScript and CSS files to an HTML file using relative paths.', 'Setting up a grid for a game and adding styling to the grid It outlines setting up a grid for a game, specifying the grid size, using display flex, and styling the divs inside the grid.', 'Outlining the use of DOM event listeners and query selectors It explains adding a DOM event listener for when the HTML file is loaded and using a query selector to pick out elements by class name.']}, {'end': 989.757, 'segs': [{'end': 613.237, 'src': 'embed', 'start': 587.073, 'weight': 0, 'content': [{'end': 592.335, 'text': 'So even though this is going to keep going until it hits 99, it will execute the code 100 times.', 'start': 587.073, 'duration': 5.262}, {'end': 596.035, 'text': 'So what do we want to do 100 times?', 'start': 593.615, 'duration': 2.42}, {'end': 598.016, 'text': 'Well, we want 100 squares right?', 'start': 596.336, 'duration': 1.68}, {'end': 606.978, 'text': "Using the constant of square, I'm going to use document and an inbuilt method called createElement to create 100 divs in my HTML document.", 'start': 598.716, 'duration': 8.262}, {'end': 613.237, 'text': 'Every time I create one square, I also want to give it a unique ID.', 'start': 608.453, 'duration': 4.784}], 'summary': 'Executing the code 100 times to create 100 squares with unique ids.', 'duration': 26.164, 'max_score': 587.073, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE587073.jpg'}, {'end': 692.219, 'src': 'embed', 'start': 664.611, 'weight': 2, 'content': [{'end': 668.333, 'text': "Now, let's invoke this function to make this happen 100 times.", 'start': 664.611, 'duration': 3.722}, {'end': 674.177, 'text': "Let's save this file, refresh our browser, and great.", 'start': 669.614, 'duration': 4.563}, {'end': 682.903, 'text': 'If I now inspect the page, you will see my gray grid is filled with lots of little square divs, 100 of them to be exact,', 'start': 675.078, 'duration': 7.825}, {'end': 687.335, 'text': 'each with their own unique ID, from 0 to 99..', 'start': 682.903, 'duration': 4.432}, {'end': 688.456, 'text': "Okay, let's flip back now.", 'start': 687.335, 'duration': 1.121}, {'end': 692.219, 'text': 'Now that we have our grid, we need to randomly place bombs all over it.', 'start': 689.057, 'duration': 3.162}], 'summary': 'Function invoked 100 times to create 100 unique square divs in a grid.', 'duration': 27.608, 'max_score': 664.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE664611.jpg'}, {'end': 695.542, 'src': 'heatmap', 'start': 664.611, 'weight': 0.938, 'content': [{'end': 668.333, 'text': "Now, let's invoke this function to make this happen 100 times.", 'start': 664.611, 'duration': 3.722}, {'end': 674.177, 'text': "Let's save this file, refresh our browser, and great.", 'start': 669.614, 'duration': 4.563}, {'end': 682.903, 'text': 'If I now inspect the page, you will see my gray grid is filled with lots of little square divs, 100 of them to be exact,', 'start': 675.078, 'duration': 7.825}, {'end': 687.335, 'text': 'each with their own unique ID, from 0 to 99..', 'start': 682.903, 'duration': 4.432}, {'end': 688.456, 'text': "Okay, let's flip back now.", 'start': 687.335, 'duration': 1.121}, {'end': 692.219, 'text': 'Now that we have our grid, we need to randomly place bombs all over it.', 'start': 689.057, 'duration': 3.162}, {'end': 695.542, 'text': "Let's do that in our create board function.", 'start': 692.88, 'duration': 2.662}], 'summary': 'Function invoked 100 times, creating 100 unique divs filled with unique ids.', 'duration': 30.931, 'max_score': 664.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE664611.jpg'}, {'end': 745.909, 'src': 'embed', 'start': 714.983, 'weight': 3, 'content': [{'end': 719.829, 'text': "Okay, so using the input method of array, I'm going to pass through the bomb amount like this.", 'start': 714.983, 'duration': 4.846}, {'end': 724.574, 'text': 'What we are doing here is making an array of 20 indexes.', 'start': 720.67, 'duration': 3.904}, {'end': 733.064, 'text': "Now using the inbuilt method of fill, I'm going to fill each index with a string of bomb.", 'start': 725.455, 'duration': 7.609}, {'end': 739.988, 'text': "Let's use the same logic to make an empty array now for the remaining squares we need to account for.", 'start': 735.407, 'duration': 4.581}, {'end': 745.909, 'text': 'So array and pass through width multiplied by width minus the bomb amount.', 'start': 740.608, 'duration': 5.301}], 'summary': 'Creating an array of 20 bomb indexes and filling it using the inbuilt method, with a logic for remaining squares.', 'duration': 30.926, 'max_score': 714.983, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE714983.jpg'}], 'start': 508.087, 'title': 'Javascript grid and game board creation', 'summary': 'Covers creating a grid of 100 squares with unique ids using javascript and storing them in an array, as well as creating a game board with 20 bombs, shuffling arrays, and adding class names to squares.', 'chapters': [{'end': 662.701, 'start': 508.087, 'title': 'Javascript grid creation', 'summary': 'Explains how to use javascript to create a grid of 100 squares, each with a unique id, and store them in an array, providing a step-by-step walkthrough of the process.', 'duration': 154.614, 'highlights': ["The JavaScript code selects the div or class name 'grid' from the HTML document and assigns it to the variable 'grid' for later use.", "A for loop is used to create 100 squares in the grid, with each square having a unique ID, and they are stored in an array called 'squares'.", 'The loop iterates 100 times to create 100 divs using the createElement method and assigns a unique ID to each square using the setAttribute method.', 'The created squares are then appended to the grid using the appendChild method to visually display the grid in the HTML document.']}, {'end': 989.757, 'start': 664.611, 'title': 'Javascript game board creation', 'summary': 'Discusses the process of creating a game board by invoking functions, generating a grid of 100 divs with unique ids, placing 20 bombs randomly, joining and shuffling arrays, and adding class names to the squares based on the shuffled array.', 'duration': 325.146, 'highlights': ['Generating a grid of 100 divs with unique IDs The speaker invokes a function to create a grid of 100 square divs with unique IDs, providing a visual representation of the game board.', 'Placing 20 bombs randomly on the game board The speaker uses an array to represent bomb locations, with 20 bombs and 80 valid moves, and then demonstrates the process of joining, mixing, and shuffling these arrays to create a new game array with randomly placed bombs.', 'Adding class names to the squares based on the shuffled array The speaker discusses the process of adding class names to the squares based on the shuffled array, visually representing the placement of bombs and valid moves on the game board.']}], 'duration': 481.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE508087.jpg', 'highlights': ["A for loop is used to create 100 squares in the grid, with each square having a unique ID, and they are stored in an array called 'squares'.", 'The loop iterates 100 times to create 100 divs using the createElement method and assigns a unique ID to each square using the setAttribute method.', 'Generating a grid of 100 divs with unique IDs The speaker invokes a function to create a grid of 100 square divs with unique IDs, providing a visual representation of the game board.', 'Placing 20 bombs randomly on the game board The speaker uses an array to represent bomb locations, with 20 bombs and 80 valid moves, and then demonstrates the process of joining, mixing, and shuffling these arrays to create a new game array with randomly placed bombs.']}, {'end': 1337.631, 'segs': [{'end': 1059.791, 'src': 'embed', 'start': 992.327, 'weight': 0, 'content': [{'end': 995.79, 'text': 'It is now time to add numbers to the neighboring squares of the bombs.', 'start': 992.327, 'duration': 3.463}, {'end': 1003.737, 'text': 'So, as you know, in Minesweeper, if a square has a bomb in any of the squares to its left, right, south, north, but also southwest, northwest,', 'start': 996.471, 'duration': 7.266}, {'end': 1008.781, 'text': 'southeast and northeast square, we total that number up and display it to the user.', 'start': 1003.737, 'duration': 5.044}, {'end': 1016.908, 'text': 'This means we have to check every squares surrounding eight squares for bombs and total up the bombs in the neighboring eight squares.', 'start': 1009.622, 'duration': 7.286}, {'end': 1020.251, 'text': 'We will do this again using a for loop.', 'start': 1017.648, 'duration': 2.603}, {'end': 1023.845, 'text': 'Make sure you are still in the create board function.', 'start': 1021.243, 'duration': 2.602}, {'end': 1028.148, 'text': "Okay, now let's loop over the length of the squares array.", 'start': 1023.865, 'duration': 4.283}, {'end': 1035.675, 'text': 'So our squares array and then the input method of length to give us the number 100.', 'start': 1028.71, 'duration': 6.965}, {'end': 1038.958, 'text': 'Once again, we want to execute a block of code 100 times.', 'start': 1035.675, 'duration': 3.283}, {'end': 1042.582, 'text': 'Now we also need to account for one more thing,', 'start': 1040.119, 'duration': 2.463}, {'end': 1050.145, 'text': 'and that is if the square we are checking the names of is in the left-hand side or the right-hand side of our grid.', 'start': 1042.582, 'duration': 7.563}, {'end': 1059.791, 'text': "If it is, say, on the right-hand side of our grid, we do not want to check the square to the right of it, right, as those squares don't count.", 'start': 1051.146, 'duration': 8.645}], 'summary': 'In minesweeper, numbers are added to squares based on surrounding bombs; a for loop is used to check 100 squares for neighboring bombs.', 'duration': 67.464, 'max_score': 992.327, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE992327.jpg'}, {'end': 1133.048, 'src': 'embed', 'start': 1101.923, 'weight': 4, 'content': [{'end': 1110.066, 'text': 'If 10 is divisible by the width, so 10, and leaves a remainder of zero, this deeply equals to zero.', 'start': 1101.923, 'duration': 8.143}, {'end': 1113.107, 'text': 'This means 10 is at the left edge.', 'start': 1110.086, 'duration': 3.021}, {'end': 1117.571, 'text': 'The same is true for 20, 30, 40 and so on.', 'start': 1113.587, 'duration': 3.984}, {'end': 1120.675, 'text': 'We do the same to check for is right edge.', 'start': 1118.552, 'duration': 2.123}, {'end': 1128.243, 'text': 'So if I modulus width deeply equals the width minus one, we know we are at the right edge.', 'start': 1121.235, 'duration': 7.008}, {'end': 1133.048, 'text': 'For example, the square with index 19 when divisible by the width.', 'start': 1129.004, 'duration': 4.044}], 'summary': 'Using modulus to determine position in a grid.', 'duration': 31.125, 'max_score': 1101.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE1101923.jpg'}, {'end': 1194.193, 'src': 'embed', 'start': 1164.528, 'weight': 5, 'content': [{'end': 1176.314, 'text': 'If I is bigger than zero and is not indicated by the bang is not at the left edge and the squares to the left of it contain a bomb.', 'start': 1164.528, 'duration': 11.786}, {'end': 1178.355, 'text': 'we want to add one to the total.', 'start': 1176.314, 'duration': 2.041}, {'end': 1194.193, 'text': "Just so we understand a bit more about what is happening here, let's visualise this a little bit first.", 'start': 1187.952, 'duration': 6.241}], 'summary': 'If i > 0 and not at left edge and squares to the left contain a bomb, add 1 to total.', 'duration': 29.665, 'max_score': 1164.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE1164528.jpg'}, {'end': 1300.931, 'src': 'heatmap', 'start': 1266.632, 'weight': 0.718, 'content': [{'end': 1278.699, 'text': 'as we want to check the square to the Southwest of the one we are in right now and this would mean the earliest we can start checking for the square would be in square 10 and is not at the right hand edge.', 'start': 1266.632, 'duration': 12.067}, {'end': 1285.283, 'text': 'And if the square and the index plus one minus the whole width contains a bomb, we can add one to the total.', 'start': 1279.6, 'duration': 5.683}, {'end': 1295.269, 'text': 'And again, so if we are in square index 10, we will be checking square of index one for if it has a bomb or not.', 'start': 1287.205, 'duration': 8.064}, {'end': 1300.931, 'text': 'This is true for even square index 12, 17, and so on.', 'start': 1296.369, 'duration': 4.562}], 'summary': 'Check for bombs in the squares to the southwest of the current square, starting from square 10, and adding one to the total if a bomb is found.', 'duration': 34.299, 'max_score': 1266.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE1266632.jpg'}], 'start': 992.327, 'title': 'Minesweeper and javascript grid edge conditions', 'summary': 'Discusses adding numbers to neighboring squares in minesweeper by checking each square and totaling up the bombs in the surrounding eight squares, involving a for loop and a squares array of length 100. it also explains how to handle left and right edge conditions in a 100-times code execution, utilizing modulus operation to identify grid edges and adding 1 to the total under specific conditions.', 'chapters': [{'end': 1035.675, 'start': 992.327, 'title': 'Minesweeper: adding numbers to neighboring squares', 'summary': 'Discusses adding numbers to neighboring squares in minesweeper by checking each square and totaling up the bombs in the surrounding eight squares, involving a for loop and a squares array of length 100.', 'duration': 43.348, 'highlights': ['Checking the surrounding eight squares for bombs and totaling up the bombs in the neighboring eight squares is crucial in Minesweeper.', 'The process involves using a for loop and a squares array of length 100.', "Adding numbers to the neighboring squares in Minesweeper is a key step in the game's mechanics."]}, {'end': 1337.631, 'start': 1035.675, 'title': 'Javascript grid edge conditions', 'summary': 'Explains how to handle left and right edge conditions in a 100-times code execution, utilizing modulus operation to identify grid edges and adding 1 to the total under specific conditions.', 'duration': 301.956, 'highlights': ['The chapter explains how to handle left and right edge conditions in a 100-times code execution Describes the main topic of the chapter, which is handling edge conditions in the code execution.', 'utilizing modulus operation to identify grid edges Explains how the modulus operation is used to identify whether a square is at the left or right edge of the grid.', 'adding 1 to the total under specific conditions Describes the specific conditions under which 1 is added to the total, such as when the square is not at the left edge and the square to the left contains a bomb.']}], 'duration': 345.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE992327.jpg', 'highlights': ['Checking the surrounding eight squares for bombs and totaling up the bombs in the neighboring eight squares is crucial in Minesweeper.', 'The process involves using a for loop and a squares array of length 100.', "Adding numbers to the neighboring squares in Minesweeper is a key step in the game's mechanics.", 'The chapter explains how to handle left and right edge conditions in a 100-times code execution.', 'Utilizing modulus operation to identify grid edges.', 'Describes the specific conditions under which 1 is added to the total, such as when the square is not at the left edge and the square to the left contains a bomb.']}, {'end': 1984.004, 'segs': [{'end': 1366.24, 'src': 'embed', 'start': 1339.025, 'weight': 2, 'content': [{'end': 1345.949, 'text': 'Great. you will now see that each square, along with having a unique ID and a class of bomb or valid set to it,', 'start': 1339.025, 'duration': 6.924}, {'end': 1350.111, 'text': 'will also have a data attribute with a total next to it.', 'start': 1345.949, 'duration': 4.162}, {'end': 1357.915, 'text': 'This total indicates if any given square has a bomb in the squares to the left of it or to the southwest of it.', 'start': 1351.011, 'duration': 6.904}, {'end': 1360.357, 'text': 'If both, it has a total of two.', 'start': 1358.456, 'duration': 1.901}, {'end': 1366.24, 'text': "Now that we can see how this works, let's carry on to account for all the squares.", 'start': 1361.957, 'duration': 4.283}], 'summary': 'Each square has a unique id, class of bomb or valid, and a data attribute with a total next to it indicating the presence of bombs in adjacent squares.', 'duration': 27.215, 'max_score': 1339.025, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE1339025.jpg'}, {'end': 1444.956, 'src': 'embed', 'start': 1420.242, 'weight': 3, 'content': [{'end': 1429.867, 'text': 'Now, if i is smaller than 90 and not at the left edge and the squares directly to the left and one whole width below contain a bomb,', 'start': 1420.242, 'duration': 9.625}, {'end': 1431.068, 'text': 'add one to the total.', 'start': 1429.867, 'duration': 1.201}, {'end': 1444.075, 'text': 'Also, if i is smaller than 88 and is not at the right edge, and the square directly to the right of it, plus one row down contains a bomb,', 'start': 1435.371, 'duration': 8.704}, {'end': 1444.956, 'text': 'add one to the total.', 'start': 1444.075, 'duration': 0.881}], 'summary': 'Count bombs around i < 90 and not on edges.', 'duration': 24.714, 'max_score': 1420.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE1420242.jpg'}, {'end': 1531.305, 'src': 'heatmap', 'start': 1470.576, 'weight': 0.702, 'content': [{'end': 1479.442, 'text': "So still in my create board function, and let's say right after we push the newly created squares into the squares array, let's add an event listener.", 'start': 1470.576, 'duration': 8.866}, {'end': 1486.509, 'text': "So let's take the square and add the inbuilt JavaScript method of add event listener to it.", 'start': 1481.064, 'duration': 5.445}, {'end': 1490.553, 'text': 'Now we need to pass through two things, the event.', 'start': 1487.39, 'duration': 3.163}, {'end': 1494.016, 'text': 'So in this case, the click and the function.', 'start': 1490.813, 'duration': 3.203}, {'end': 1500.542, 'text': "So now, as I also want to be passing through a parameter of the function, I'm going to be using this syntax.", 'start': 1494.957, 'duration': 5.585}, {'end': 1509.637, 'text': "So on click, I want to evoke a function I have called click and I'm yet to write and into it.", 'start': 1502.432, 'duration': 7.205}, {'end': 1510.798, 'text': 'I want to pass the square.', 'start': 1509.797, 'duration': 1.001}, {'end': 1513.28, 'text': 'Now we have that set up.', 'start': 1512.259, 'duration': 1.021}, {'end': 1518.124, 'text': "Let's get to actually writing that click function this time outside of the create board function.", 'start': 1513.48, 'duration': 4.644}, {'end': 1519.985, 'text': "So let's scroll down.", 'start': 1518.704, 'duration': 1.281}, {'end': 1527.383, 'text': "After the create board function, I'm gonna define my click function and pass through the square as a parameter.", 'start': 1521.661, 'duration': 5.722}, {'end': 1531.305, 'text': 'So, because this function is only being used inside the create board function.', 'start': 1527.984, 'duration': 3.321}], 'summary': 'Adding event listener to newly created squares for click function', 'duration': 60.729, 'max_score': 1470.576, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE1470576.jpg'}, {'end': 1509.637, 'src': 'embed', 'start': 1481.064, 'weight': 0, 'content': [{'end': 1486.509, 'text': "So let's take the square and add the inbuilt JavaScript method of add event listener to it.", 'start': 1481.064, 'duration': 5.445}, {'end': 1490.553, 'text': 'Now we need to pass through two things, the event.', 'start': 1487.39, 'duration': 3.163}, {'end': 1494.016, 'text': 'So in this case, the click and the function.', 'start': 1490.813, 'duration': 3.203}, {'end': 1500.542, 'text': "So now, as I also want to be passing through a parameter of the function, I'm going to be using this syntax.", 'start': 1494.957, 'duration': 5.585}, {'end': 1509.637, 'text': "So on click, I want to evoke a function I have called click and I'm yet to write and into it.", 'start': 1502.432, 'duration': 7.205}], 'summary': 'Using javascript to add event listener for click function on a square.', 'duration': 28.573, 'max_score': 1481.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE1481064.jpg'}, {'end': 1705.039, 'src': 'heatmap', 'start': 1641.191, 'weight': 0.736, 'content': [{'end': 1645.953, 'text': "I'm going to give my checked class a background color of red so we can see it clearly.", 'start': 1641.191, 'duration': 4.762}, {'end': 1650.114, 'text': "I'm going to put it over the grid color but below the bomb color for now.", 'start': 1645.973, 'duration': 4.141}, {'end': 1653.18, 'text': "Okay, let's flip back to our JavaScript file.", 'start': 1651.178, 'duration': 2.002}, {'end': 1659.788, 'text': 'Now, once a square has been checked, we also want to display that total in the square at the same time.', 'start': 1654.402, 'duration': 5.386}, {'end': 1664.673, 'text': 'We do so by grabbing the square and using inner HTML to display the total.', 'start': 1660.468, 'duration': 4.205}, {'end': 1669.018, 'text': 'We then want to break this cycle, so we use return.', 'start': 1665.734, 'duration': 3.284}, {'end': 1678.065, 'text': "Now we've accounted for all the options apart from one so far, and that is if the square does not fall into the two categories above.", 'start': 1670.498, 'duration': 7.567}, {'end': 1685.732, 'text': 'The only square that fits this criteria is a square with no bomb in it and no data number higher than zero.', 'start': 1679.086, 'duration': 6.646}, {'end': 1690.376, 'text': 'For all of those squares, we simply wanna give it a class that is checked.', 'start': 1686.432, 'duration': 3.944}, {'end': 1693.879, 'text': "Let's do that here after the if else statement.", 'start': 1691.156, 'duration': 2.723}, {'end': 1702.737, 'text': "Now, let's save this file and head over to our browser to check this has worked.", 'start': 1699.235, 'duration': 3.502}, {'end': 1705.039, 'text': "Let's hit that refresh.", 'start': 1703.658, 'duration': 1.381}], 'summary': 'Setting checked class to red, displaying total in checked square using javascript.', 'duration': 63.848, 'max_score': 1641.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE1641191.jpg'}, {'end': 1822.659, 'src': 'embed', 'start': 1770.106, 'weight': 1, 'content': [{'end': 1775.207, 'text': "Let's scroll to the top of our file to declare is game over and assign it the Boolean of false for now.", 'start': 1770.106, 'duration': 5.101}, {'end': 1786.188, 'text': "Ok great, once that has been added let's get back to our click function.", 'start': 1781.917, 'duration': 4.271}, {'end': 1795.506, 'text': 'The one thing we have not managed to do yet, that is minesweeper USP, shall we say is the fact that if we click on an empty square,', 'start': 1787.383, 'duration': 8.123}, {'end': 1799.148, 'text': 'we want it to fan out and fill up all the squares up to the numbers.', 'start': 1795.506, 'duration': 3.642}, {'end': 1807.171, 'text': "I'm gonna show you this here, as it is hard to visualise when I say it, but when I show you, you will get what I mean.", 'start': 1799.848, 'duration': 7.323}, {'end': 1813.153, 'text': 'So, how do we do this? Well, recursion is the answer, and this is pretty cool.', 'start': 1808.091, 'duration': 5.062}, {'end': 1822.659, 'text': 'So once I have clicked an empty square and marked it as check to make it red, I need to start checking all my neighboring empty squares as well.', 'start': 1814.597, 'duration': 8.062}], 'summary': 'Using recursion to mark neighboring empty squares as checked in a minesweeper game.', 'duration': 52.553, 'max_score': 1770.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE1770106.jpg'}], 'start': 1339.025, 'title': 'Implementing minesweeper game logic', 'summary': 'Outlines the process of identifying bomb squares, adding event listeners, and implementing game logic for a javascript minesweeper game, including specific conditions for checking and adding to the total bomb count, and preparing for recursion to fill up empty squares.', 'chapters': [{'end': 1531.305, 'start': 1339.025, 'title': 'Identifying bombs and adding event listeners', 'summary': 'Explains the process of identifying bomb squares and adding event listeners to each square, with specific conditions for checking and adding to the total bomb count, and concludes with the addition of an event listener function for each square.', 'duration': 192.28, 'highlights': ['The total indicates if any given square has a bomb in the squares to the left of it or to the southwest of it, with a total of two if both conditions are met. The total attribute indicates the presence of a bomb in the squares to the left or southwest, with a total of two if both conditions are met.', 'Specific conditions for checking and adding to the total bomb count are outlined based on the position of the square within the grid. Specific conditions are outlined for adding to the total bomb count based on the position of the square within the grid.', "The process of adding an event listener to each square, passing through the click event and a function, is explained, with a specific function called 'click' being defined to handle the click event. The process of adding an event listener to each square, passing through the click event and a function, is explained, with a specific function called 'click' being defined to handle the click event."]}, {'end': 1984.004, 'start': 1531.305, 'title': 'Javascript minesweeper game logic', 'summary': 'Outlines the process of implementing game logic for a javascript minesweeper game, including checking for bombs, displaying total numbers on clicked squares, and preparing for recursion to fill up empty squares, with a focus on using event listeners and javascript functions.', 'duration': 452.699, 'highlights': ['The chapter outlines the process of implementing game logic for a JavaScript Minesweeper game Covers the development of game logic for a JavaScript Minesweeper game to handle various game interactions.', 'including checking for bombs Describes the process of checking for bombs when a square is clicked, triggering a game over alert if a bomb is detected.', 'displaying total numbers on clicked squares Explains displaying total numbers on clicked squares, using inner HTML to display the total and adding a class of checked for non-zero numbers.', 'preparing for recursion to fill up empty squares Discusses the preparation for recursion to fill up empty squares, mentioning the use of a check square function to recursively check neighboring squares.', 'focus on using event listeners and JavaScript functions Emphasizes the use of event listeners and JavaScript functions for game interactions, such as checking squares and handling game over scenarios.']}], 'duration': 644.979, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE1339025.jpg', 'highlights': ["The process of adding an event listener to each square, passing through the click event and a function, is explained, with a specific function called 'click' being defined to handle the click event.", 'The chapter outlines the process of implementing game logic for a JavaScript Minesweeper game, covering the development of game logic for various game interactions, including checking for bombs and displaying total numbers on clicked squares.', 'The total attribute indicates the presence of a bomb in the squares to the left or southwest, with a total of two if both conditions are met.', 'Specific conditions for checking and adding to the total bomb count are outlined based on the position of the square within the grid.', 'Preparation for recursion to fill up empty squares is discussed, mentioning the use of a check square function to recursively check neighboring squares.']}, {'end': 2284.921, 'segs': [{'end': 2009.18, 'src': 'embed', 'start': 1985.064, 'weight': 3, 'content': [{'end': 1993.31, 'text': "Now, If the ID of square we have clicked is larger than zero and it's not at the left edge, so this part should be familiar.", 'start': 1985.064, 'duration': 8.246}, {'end': 1997.853, 'text': 'we want to get the ID of the square that is directly to the left of it.', 'start': 1993.31, 'duration': 4.543}, {'end': 2005.238, 'text': 'So const new ID equals the squares array and we pass through the current ID minus one.', 'start': 2000.255, 'duration': 4.983}, {'end': 2009.18, 'text': "I'm gonna use pass int to make sure that this is a number, not a string.", 'start': 2005.258, 'duration': 3.922}], 'summary': 'Get the id of the square to the left of the clicked square.', 'duration': 24.116, 'max_score': 1985.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE1985064.jpg'}, {'end': 2101.144, 'src': 'embed', 'start': 2056.074, 'weight': 0, 'content': [{'end': 2060.197, 'text': 'So we are passing down the new square into the click function as a parameter.', 'start': 2056.074, 'duration': 4.123}, {'end': 2063.918, 'text': 'What the parameter is called is not important.', 'start': 2061.016, 'duration': 2.902}, {'end': 2066.699, 'text': 'JavaScript will know to take the first parameter.', 'start': 2064.158, 'duration': 2.541}, {'end': 2076.918, 'text': "So let's get rid of this new ID here as not only do we not need to pass it down, if we tried, it would just be ignored anyway by the click function.", 'start': 2067.754, 'duration': 9.164}, {'end': 2081.3, 'text': "If this is confusing you, I've got a great video about functions.", 'start': 2077.777, 'duration': 3.523}, {'end': 2087.963, 'text': "It's a quick explainer video, so please feel free to check it out if you would like some more clarification on what is happening.", 'start': 2081.82, 'duration': 6.143}, {'end': 2094.706, 'text': "Right, so let's carry on with the recursion, but let's have a look at this with the help of a diagram first.", 'start': 2089.244, 'duration': 5.462}, {'end': 2101.144, 'text': 'Here we have our click function and here we have our check square function.', 'start': 2096.28, 'duration': 4.864}], 'summary': 'Discussing parameter passing in javascript functions and suggesting a video for further clarification.', 'duration': 45.07, 'max_score': 2056.074, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE2056074.jpg'}, {'end': 2190.075, 'src': 'embed', 'start': 2158.236, 'weight': 4, 'content': [{'end': 2161.34, 'text': "In that check we also wanna check that square's neighbor.", 'start': 2158.236, 'duration': 3.104}, {'end': 2166.465, 'text': 'So we go back to the click function and do all the checks again.', 'start': 2162.241, 'duration': 4.224}, {'end': 2173.032, 'text': "If again, the square's empty, we go back to the check square function and so on and so on until the loop is broken.", 'start': 2167.566, 'duration': 5.466}, {'end': 2175.335, 'text': 'Pretty cool, right? Recursion.', 'start': 2173.633, 'duration': 1.702}, {'end': 2177.357, 'text': "Okay, let's get back to it.", 'start': 2176.075, 'duration': 1.282}, {'end': 2183.632, 'text': 'So, once again, if current ID is bigger than nine and is not at the right edge,', 'start': 2178.729, 'duration': 4.903}, {'end': 2190.075, 'text': 'I wanna get the new ID of the square directly to the right one whole row above it, so the southwest square.', 'start': 2183.632, 'duration': 6.443}], 'summary': "Recursively checking square's neighbor until loop is broken. exploring new square to the right if current id > 9 and not at the right edge.", 'duration': 31.839, 'max_score': 2158.236, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE2158236.jpg'}, {'end': 2258.447, 'src': 'embed', 'start': 2209.875, 'weight': 1, 'content': [{'end': 2212.957, 'text': 'rather than going into the square array and grabbing the ID.', 'start': 2209.875, 'duration': 3.082}, {'end': 2214.558, 'text': 'That is also a quicker option.', 'start': 2213.297, 'duration': 1.261}, {'end': 2217.72, 'text': 'I will include this refactor option in my GitHub code.', 'start': 2214.578, 'duration': 3.142}, {'end': 2221.843, 'text': "If you want to have a look at that and what I mean, but let's stick to this way for now.", 'start': 2218.061, 'duration': 3.782}, {'end': 2231.366, 'text': "So Now, if the current ID I've passed down is bigger than 10, remember for this one we do not need to check if it's a right edge or left edge,", 'start': 2221.863, 'duration': 9.503}, {'end': 2232.968, 'text': 'as we are simply checking the square above.', 'start': 2231.366, 'duration': 1.602}, {'end': 2242.8, 'text': "So new ID equals the squares array, then the ID of the square directly above the one we are checking and let's get that squares ID using .id.", 'start': 2233.709, 'duration': 9.091}, {'end': 2253.524, 'text': "Now let's grab the actual element using getElementById and passing down the new ID and pass that square into our click function.", 'start': 2244.73, 'duration': 8.794}, {'end': 2258.447, 'text': "we getting it yet, let's talk through it one more time.", 'start': 2254.384, 'duration': 4.063}], 'summary': 'Refactoring option added to github code for quicker id retrieval and element manipulation.', 'duration': 48.572, 'max_score': 2209.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE2209875.jpg'}], 'start': 1985.064, 'title': 'Square clicking logic and recursion in click function', 'summary': 'Explains the logic of clicking on a square, obtaining the id of the square to the left, and passing it through the click function for further processing. it also details the recursion within the click function, the process of checking and marking squares, and highlights the optimization of code for efficiency.', 'chapters': [{'end': 2081.3, 'start': 1985.064, 'title': 'Square clicking logic', 'summary': 'Explains the logic of clicking on a square, obtaining the id of the square to the left, and passing it through the click function for further processing.', 'duration': 96.236, 'highlights': ['The chapter explains the logic of obtaining the ID of the square to the left by subtracting 1 from the current ID and converting it to a number using parseInt.', 'It describes the process of grabbing the square to the left by using the obtained ID and passing it through the click function for further processing.', 'It clarifies that the new square is passed into the click function as a parameter, and the need to pass down the new ID is eliminated.']}, {'end': 2284.921, 'start': 2081.82, 'title': 'Recursion in click function', 'summary': 'Explains the recursion within the click function, detailing the process of checking and marking squares, and highlights the optimization of code for efficiency.', 'duration': 203.101, 'highlights': ['The recursion within the click function is explained, detailing the process of checking and marking squares based on their data numbers and invoking the check square function when encountering a square with a data number of zero.', 'The process of optimizing the code for efficiency is discussed, with the mention of a quicker option to obtain the new ID of a square by adding one and the width to the current ID instead of accessing the square array, and the intention to include this option in the GitHub code.', 'The specific steps involved in the recursion, including the conditions for checking neighbors, obtaining new IDs, and invoking the click function for further checks, are detailed to illustrate the iterative nature of the process.']}], 'duration': 299.857, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE1985064.jpg', 'highlights': ['The recursion within the click function is explained, detailing the process of checking and marking squares based on their data numbers and invoking the check square function when encountering a square with a data number of zero.', 'The process of optimizing the code for efficiency is discussed, with the mention of a quicker option to obtain the new ID of a square by adding one and the width to the current ID instead of accessing the square array, and the intention to include this option in the GitHub code.', 'It describes the process of grabbing the square to the left by using the obtained ID and passing it through the click function for further processing.', 'The chapter explains the logic of obtaining the ID of the square to the left by subtracting 1 from the current ID and converting it to a number using parseInt.', 'The specific steps involved in the recursion, including the conditions for checking neighbors, obtaining new IDs, and invoking the click function for further checks, are detailed to illustrate the iterative nature of the process.', 'It also details the recursion within the click function, the process of checking and marking squares, and highlights the optimization of code for efficiency.', 'It clarifies that the new square is passed into the click function as a parameter, and the need to pass down the new ID is eliminated.']}, {'end': 2883.972, 'segs': [{'end': 2390.446, 'src': 'embed', 'start': 2285.981, 'weight': 0, 'content': [{'end': 2288.842, 'text': 'So hopefully now you understand what is happening here.', 'start': 2285.981, 'duration': 2.861}, {'end': 2295.044, 'text': 'We are using the same logic we did for adding numbers to the eight surrounding squares around any square,', 'start': 2289.602, 'duration': 5.442}, {'end': 2300.725, 'text': 'whilst checking if the squares are valid when they are checked, but also adding an extra layer of things to be actioned.', 'start': 2295.044, 'duration': 5.681}, {'end': 2306.818, 'text': 'This is a great example of recursion happening and is super satisfactory when it all works as intended.', 'start': 2301.55, 'duration': 5.268}, {'end': 2311.225, 'text': "I'm going to leave the next four for us to get on with, so see you in a bit.", 'start': 2307.759, 'duration': 3.466}, {'end': 2373.658, 'text': 'Okay, great.', 'start': 2372.958, 'duration': 0.7}, {'end': 2378.861, 'text': 'Once we have all eight checks for the eight surrounding squares to any square on our grid.', 'start': 2373.959, 'duration': 4.902}, {'end': 2381.962, 'text': "let's save this file and see if it has worked in our browser.", 'start': 2378.861, 'duration': 3.101}, {'end': 2384.243, 'text': "Let's hit the refresh button.", 'start': 2382.863, 'duration': 1.38}, {'end': 2386.124, 'text': 'And great.', 'start': 2385.284, 'duration': 0.84}, {'end': 2390.446, 'text': 'Just watch how satisfying it is to see all those squares appear and then stop at the numbers.', 'start': 2386.244, 'duration': 4.202}], 'summary': 'Using recursion to check eight surrounding squares, resulting in successful grid display.', 'duration': 104.465, 'max_score': 2285.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE2285981.jpg'}, {'end': 2460.053, 'src': 'embed', 'start': 2432.552, 'weight': 4, 'content': [{'end': 2438.657, 'text': "So down below the check squares function, let's write a function called game over and pass through a parameter meant for our square.", 'start': 2432.552, 'duration': 6.105}, {'end': 2443.32, 'text': "I'm going to write a console log here saying boom game over.", 'start': 2439.437, 'duration': 3.883}, {'end': 2445.182, 'text': 'So far, no change.', 'start': 2443.861, 'duration': 1.321}, {'end': 2446.202, 'text': 'The same thing will happen.', 'start': 2445.262, 'duration': 0.94}, {'end': 2449.845, 'text': 'Now I also want to tell our JavaScript that the game is over.', 'start': 2447.063, 'duration': 2.782}, {'end': 2452.647, 'text': 'So I need to set the is game over variable to true.', 'start': 2449.865, 'duration': 2.782}, {'end': 2460.053, 'text': 'This is important for our click function as it will return our click if the game is over so that nothing can be actioned if a square is clicked.', 'start': 2453.308, 'duration': 6.745}], 'summary': "A 'game over' function is added to set 'is game over' variable to true, preventing actions if a square is clicked.", 'duration': 27.501, 'max_score': 2432.552, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE2432552.jpg'}, {'end': 2541.305, 'src': 'heatmap', 'start': 2481.092, 'weight': 3, 'content': [{'end': 2483.534, 'text': "In this case, it's a BOM emoticon.", 'start': 2481.092, 'duration': 2.442}, {'end': 2486.736, 'text': "Okay, cool, let's check if that has worked.", 'start': 2484.915, 'duration': 1.821}, {'end': 2490.258, 'text': 'So save the file, flip over to your browser.', 'start': 2487.176, 'duration': 3.082}, {'end': 2493.479, 'text': "Now let's click on a square that we know has a bomb in it.", 'start': 2490.918, 'duration': 2.561}, {'end': 2498.342, 'text': 'And great, there are all our bombs as well as a notification in our console log.', 'start': 2494, 'duration': 4.342}, {'end': 2499.542, 'text': "Let's move on.", 'start': 2499.002, 'duration': 0.54}, {'end': 2506.826, 'text': 'So how do we win in Minesweeper? Well, we need to flag all the bombs on our grid without hitting a bomb.', 'start': 2500.403, 'duration': 6.423}, {'end': 2514.19, 'text': 'We have an equal number of flags to bombs so can only flag on the exact squares that the bombs are in in order to win.', 'start': 2507.486, 'duration': 6.704}, {'end': 2519.873, 'text': "Let's tackle this feature by first writing a function that will add a flag,", 'start': 2515.41, 'duration': 4.463}, {'end': 2527.458, 'text': 'then add a left click event listener to all our squares in order to allow us to add flags on a control and left click of a square.', 'start': 2519.873, 'duration': 7.585}, {'end': 2533.702, 'text': 'So under the create board function, I want to write a function called add flag like this.', 'start': 2528.719, 'duration': 4.983}, {'end': 2536.284, 'text': 'Again, I want to pass through the square.', 'start': 2533.722, 'duration': 2.562}, {'end': 2541.305, 'text': "If the game is over, I want to return as I don't want anything to happen.", 'start': 2537.279, 'duration': 4.026}], 'summary': 'Developing minesweeper: adding flag feature to flag all bombs', 'duration': 47.305, 'max_score': 2481.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE2481092.jpg'}], 'start': 2285.981, 'title': 'Grid operations and minesweeper game development', 'summary': 'Demonstrates recursion in grid operations to validate and perform actions on surrounding squares, resulting in a satisfying outcome. it also covers the development of a minesweeper game with features like game over functionality, adding flags, and win conditions, resulting in a fully functional game.', 'chapters': [{'end': 2390.446, 'start': 2285.981, 'title': 'Recursion in grid operations', 'summary': 'Demonstrates the use of recursion to validate and perform actions on the eight surrounding squares, resulting in a satisfying outcome of all squares appearing and stopping at the numbers.', 'duration': 104.465, 'highlights': ['The chapter explains the use of recursion to add an extra layer of actions to the process of validating and performing operations on the eight surrounding squares, resulting in a satisfactory outcome.', 'The speaker leaves the next four steps to be completed, indicating progress in the process.', 'The process involves checking all eight surrounding squares to any square on the grid, ensuring the successful execution of the operations.', 'The satisfying outcome is witnessed as all squares appear and stop at the numbers after the process is executed in the browser.']}, {'end': 2883.972, 'start': 2391.427, 'title': 'Minesweeper game development', 'summary': 'Covers the development of a minesweeper game, implementing features such as game over functionality, adding flags, and checking for a win, resulting in a fully functional game with user interaction and win conditions.', 'duration': 492.545, 'highlights': ['The chapter covers the development of a Minesweeper game The chapter focuses on the development process of a Minesweeper game, providing insights into the implementation of various game features.', "Implementing game over functionality and displaying bombs The process involves implementing the game over functionality by setting the 'is game over' variable to true, displaying a notification in the console log, and revealing all bomb locations when a game over occurs.", 'Adding flags to squares and implementing win conditions The development includes adding flags to squares, controlling left-click events to allow flag placement, and checking for a win condition by matching the flagged squares with bomb locations, leading to a notification upon winning.']}], 'duration': 597.991, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/W0No1JDc6vE/pics/W0No1JDc6vE2285981.jpg', 'highlights': ['The chapter explains the use of recursion to add an extra layer of actions to the process of validating and performing operations on the eight surrounding squares, resulting in a satisfactory outcome.', 'The process involves checking all eight surrounding squares to any square on the grid, ensuring the successful execution of the operations.', 'The satisfying outcome is witnessed as all squares appear and stop at the numbers after the process is executed in the browser.', 'The chapter covers the development of a Minesweeper game The chapter focuses on the development process of a Minesweeper game, providing insights into the implementation of various game features.', "Implementing game over functionality and displaying bombs The process involves implementing the game over functionality by setting the 'is game over' variable to true, displaying a notification in the console log, and revealing all bomb locations when a game over occurs.", 'Adding flags to squares and implementing win conditions The development includes adding flags to squares, controlling left-click events to allow flag placement, and checking for a win condition by matching the flagged squares with bomb locations, leading to a notification upon winning.']}], 'highlights': ['Anya Cabot showcases her expertise in creating various games like Tetris and Candy Crush type games, along with her proficiency in vanilla JavaScript, React, and React Native.', 'Anya Cabot is going to focus a lot on recursion while creating the minesweeper game, incorporating advanced elements that the audience will enjoy.', 'Recursion is explained through an analogy of finding a specific ice cream, with a base case and recursive case, demonstrating the concept in a simple and relatable manner.', 'The implementation of recursion in the Minesweeper game is demonstrated, showcasing how it checks neighboring squares and handles different scenarios, such as empty squares and squares adjacent to bombs.', "A for loop is used to create 100 squares in the grid, with each square having a unique ID, and they are stored in an array called 'squares'.", 'Placing 20 bombs randomly on the game board The speaker uses an array to represent bomb locations, with 20 bombs and 80 valid moves, and then demonstrates the process of joining, mixing, and shuffling these arrays to create a new game array with randomly placed bombs.', 'Checking the surrounding eight squares for bombs and totaling up the bombs in the neighboring eight squares is crucial in Minesweeper.', "The process of adding an event listener to each square, passing through the click event and a function, is explained, with a specific function called 'click' being defined to handle the click event.", 'The recursion within the click function is explained, detailing the process of checking and marking squares based on their data numbers and invoking the check square function when encountering a square with a data number of zero.', 'The chapter explains the use of recursion to add an extra layer of actions to the process of validating and performing operations on the eight surrounding squares, resulting in a satisfactory outcome.', "Implementing game over functionality and displaying bombs The process involves implementing the game over functionality by setting the 'is game over' variable to true, displaying a notification in the console log, and revealing all bomb locations when a game over occurs.", 'Adding flags to squares and implementing win conditions The development includes adding flags to squares, controlling left-click events to allow flag placement, and checking for a win condition by matching the flagged squares with bomb locations, leading to a notification upon winning.']}