Build Minesweeper with JavaScript

[Music] what's going on guys so i hope you've been enjoying these guest creators that i've been having on and today we have a special guest anya cabeau and she's going to build the game mine sweeper in javascript so she actually does a lot of games if you check her channel out she does like tetris and candy crush type games she also works with in addition to vanilla javascript react and react native and she's a really cool editing and presentation style so it's really unique and the game she's going to create today is minesweeper and she's going to focus a lot on recursion so there's there there are some advanced elements in this project that i think a lot of you guys will enjoy but uh her channel is in the description along with the code for this project so let's go ahead and get started hey everyone super excited to be here today on brad's channel brad has been an incredible source of inspiration for me since my own youtube channel so i'm so honored to be here today with all of you so i decided today to make our own version of minesweeper not only because i'm super into retro games but because we get to grips with one major theme recursion but what is recursion let's switch over to children's mode to explain ah hey kodaka how's it going no hey anya all good here how's your video doing very well thanks just teaching these guys some computer science i think the audience has a question for you what is recursion well in the least amount of words recursion is a function that calls itself until it can't anymore that calls itself that's right ah you mean a little bit like this here we have an ice cream but i don't like this ice cream it's too small in fact i know the exact ice cream that i want it is blue with a flower on it this is my base case now i can apply a function to this to check for my ice cream and say the next five surrounding shops if this ice cream is not the exact one i want we will keep going to the recursive case of the function meaning we will check the five stores of those five stores we just checked until we find my ice cream and i stopped throwing a tantrum so that was a simple explanation of what recursion was all about but let's have a look at it in code here is how we will be using recursion in order to check neighboring squares of any square we click in our mindsweeper game what is happening here is when we click on a square we have many arguments that can make us break this recursion as you can see here by the returns if none of these are met we then go to another function called check square where we check our neighboring squares on the board don't worry if that was a lot for you to take in it should be the stuff is pretty hard when you get started but we're going to be going through it step by step until we get our finished game 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 if you click a square with a bomb your game is over however if you click an empty square two things will happen 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 that square will show you the total number of bombs surrounding you if the square click on is not a bomb and is not next to any bombs so it's just an empty square we need to go around and clear all the little squares around it until we hit some numbers recursion you win by placing little flags on all the little squares that you suspect have a bomb in them we will also be using the popular methods of fill and array these javascript methods are super popular so it's great that we're going to get to know them along with many many others as always please do finish your finished games of my super with me i'd love to see how you've made them taking them your own we're going to be focusing on the logic so the styling is going to be totally up to you please do reach out to me on twitter youtube whatever i'll put my socials at the end okay let's do this minesweeper thank you so much travestymedia for having me as always let's make sure we have our project set up correctly with our script tag linking our javascript file to our html file using the javascript file's relative path we do the same for our css file using the link tag like this 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 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 along with preferences that i choose for writing projects definitely check this out if you haven't already i'm going to start by adding a div with a class of grids this is where all of my game is going to visually populate which is pretty cool we're going to be appending divs into this div using our javascript i'll show you how to do that a little bit later now let's style this div up so we can see what is going on flip over to your style sheet and add the following so i have pre-defined that my minesweeper grid is going to be 10 by 10 squares big and each square is going to be 40 pixels height and width let's account for that in our grid so 10 times 40 is 400 pixels let's assign that to our height and width like this now we also need to use display flex to make sure our squares appear in line not stacked over each other like the default arrangement of divs we also need to do one more thing and that is make them wrap over each other so that they fit in the grid we have just made and once they do not they wrap with each other like a snake let's also give it a background color of gray for now so we can see what we are doing while we are here i'm going to actually also style any div that goes inside my grid so the div with a class of grid this is how we tell our css file to do this by writing dot grid and then div after it like this i am saying i only want to style the divs inside this grid div all other divs will be unaffected by this i'm going to give each div a height and a width of 40 pixels these are now going to be our squares that we discussed earlier let's see how this all looks so far by navigating to the index html file and left clicking it we select open in browser from the drop down this will essentially open our path in our default browser and there we have it we can see a gray grid as we intended i'm just going to make it a little bigger so we can see what's going on now i'm going to inspect the page using the left click again we select inspect from the drop down once we have this we can now inspect all the elements so if we navigate over to the grid you will see we are picking up the div with a class of grid at the moment it's just one gray square we have as we haven't added any of the divs inside to it okay now great let's flip back to our project we need to start picking out these elements so our javascript can talk to them flip over to your app.js file now the first thing we're going to do is add a dom event listener to our file we do so by getting the document and adding an event listener then passing through dom content loaded like this all our code will now be written in between these curly braces and parentheses from now on we are doing this so that we can make sure all of our html file is loaded before reading this javascript code some people like to do this by placing the script tag at the bottom of their html files so after all that html code but this is my preference as i feel it's more foolproof both ways are really correct now we have that let's pick out our grid using constant as this will not change i use document and attach the mbl javascript method query selector to it in it i pass through the class name of grid please note i am using a dot to tell the javascript i'm looking for a class name now the javascript knows to select the div or the class name of grid from my html document and call it grid so that we can use it later in our javascript as grid let's also tell our javascript that our grid is going to be 10 squares width we will be using this variable a lot in the walkthrough we are now going to write a function to create the board i have used this quite a few times in my other group based game walk through so if you're familiar with it this is great practice let's call the function create barge now the first thing i'm going to do is use a for loop to loop over a block of code executing it as many times as i want as i want to create a hundred squares to make up my grid game i'm gonna make this loop a hundred times so as long as i is smaller than a hundred so width multiplied by width gives us a hundred i want this block of code to keep repeating itself incrementally by one each time so repeat itself from zero to 99 going up by one each time indicated by this i and the increment operator or plus plus as you may or may not know when we count times in an array we always start with the zero index so even though this is going to keep going until it hits 99 it will execute the code 100 times so what do we want to do 100 times well we want 100 squares right using the constant of square i'm going to use document and an inbuilt method called create element to create 100 divs in my html document every time i create one square i also want to give it a unique id i do this by grabbing the square i just created and using the inbuilt method of set attribute passing through the string of id indicated by the two quote marks that's a string and i which is the number from 0 to 99 after i've created a square and given it an id so i can keep track of it i also now need to put it in my grid i do this by grabbing the grid constant and using the inbuilt method of append child to pass through the square as a parameter now i'm going to do one last thing first let's create an empty array called squares so let's squares equals square brackets now let's use this array squares and push the square we have just created into it okay great now let's invert this function to make this happen a hundred times let's save this file refresh our browser and great if i now inspect the page you will see my grey grid is filled with lots of little square divs a hundred of them to be exact each with their own unique id from zero to ninety nine okay let's flip back now now that we have our grid we need to randomly place bombs all over it let's do that in our create board function so i'm going to use a constant and choose to call it boomerang at the top of my file i'm going to globally decide what my bomb count for the game is going to be let's go with 20. we can always change this later or use this variable to you know level up what we choose to make more levels to the game adding more bombs okay so using the input method of array i'm going to pass through the bom amount like this what we are doing here is making an array of 20 indexes now using the inbuilt method of fill i'm going to fill each index with a string of bomb let's use the same logic to make an empty array now for the remaining squares we need to account for so array and pass through width multiplied by width minus the bomb amount this gives us a number 80 right now we want to fill these 80 indexes with the string of let's say valid as these are valid moves now before moving on let's see what's happening using our console log let's console log out these two newly formed arrays so console log boms array and console.log empty array save the file flip over to our browser and great you will see in the console that we have two arrays one of 20 bombs and one of 80 valids let's carry on we now need to do two things join the two together and mix and model all of them up randomly let's store this as a new array called games array we will do so by taking the empty array and using an inbuilt method of concat to pass through the bombs array this will result in two arrays being joined once again let's console log this array to c you can technically join the empty array so the bombs array 2 it makes no difference for us the order of the words does not count for us at the moment okay great we can see here that our third array is the two arrays joined together in order now we need to make one final array i'm going to call it shuffled array this is where we shuffle the words about we do so by getting our newly created games array then adding the inbuilt method of sort to it now using an arrow function we write this and invoke the inbuilt method of math random and minus 0.5 let's console.log this to see if it has worked let's save this file and great you will see that with each page refresh we are getting a new randomly shuffled array now let's flip back to our javascript file i'm just going to do some spring cleaning and get rid of these console logs first before we move on so delete now that we have our shuffled array let's get to adding these names as classes to our squares so how do we do this though how do we basically get the shuffled array and the squares array and add the words to the class names of the squares array well we go back to our for loop right here under where we give the square a unique id we are also going to give it a class name so let's grab the square use the classlist method and the add method to add the class name of whichever word corresponds to whichever index we are looping over in our squares array so for example if we are looping over this code and have just created a square within index of zero we then want to go to our shuffled array find the index of zero and that and bring back the word that has an index of zero we then do the same for the first index the second index and so on until we go through all 100. i know it can be a bit hard to visualize so let's add some styling first to see what is happening and if it has worked let's flip back to our css file in here let's add some color to the class name of bom let's go with orange as it will stand out over the gray make sure to put it after the gray here as well in our css file so bom and then background color of orange and save let's bring up our browser and refresh and great you will see that it's working we are adding class names to the squares let's refresh again and again to see if it's generating randomly and great let's move on it is now time to add numbers to the neighboring squares of the bombs 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 north west south east and northeast square we total that number up and display it to the user this means we have to check every squares surrounding eight squares for bombs and total up the bombs in the neighboring eight squares we will do this again using a for loop make sure you are still in the create board function okay now let's loop over the length of the squares array so our squares array and then the input method of length to give us the number 100 once again we want to execute a block of code 100 times now we also need to account for one more thing 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 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 they will visually belong to the other side of our grid the same goes for any squares on the left-hand side of our grid if we check the square to the left so square with the next nine for example it will be checking the square on the other side of the grid visually so now how do we tell our javascript that we don't want to check these squares in the same way let's do it by defining what is a left edge first so it's left edge if i or technically the number from 0 to 99 that we are passing through modulus width deeply equals 0 we know we are at the left edge for example let's take square of index 10. if 10 is divisible by the width so 10 and leaves a remainder of 0 this deeply equals to 0. this means 10 is at the left edge the same is true for 20 30 40 and so on we do the same to check for is right edge so if i modulus width deeply equals the width minus 1 we know we are at the right edge for example the square with index 19 when divisible by the width so 10 leaves a remainder of nine this is deeply equal to width minus one because that's nine the same is true for square 29 39 and so on let's just put these in parenthesis for readability now that we have defined that let's carry on okay so if the square we are looping over if that square contains the class of valid so not a bomb in other words we want to do the following if i is bigger than 0 and is not indicated by the bang it's not at the left edge and the squares to the left of it contain a bomb we want to add one to the total just so we understand a bit more about what is happening here let's visualize this a little bit first so we are saying that if the square index is larger than zero we are saying this as we do not want to be in this index right here as we can't check any squares to the left of it as they do not exist and the code will break so if the square index is bigger than zero and is not at the left edge okay so if we are in square index one we are not at the left edge and the statement is true so both statements are true and we can check the next statement which is and so and if the square to the left of my square so down 1 index my squares array contains a bomb we can execute the code to add one to the total we only add one if all three of those statements are true so if we whack a bomb here and the index of our square is one this statement is true and we add one to our total got it let's move on we need to do this seven more times as we mentioned before so hopefully we'll get this by the end so once again if i is larger than 9 this time as we want to check the square to the south west 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 and if the square in the index plus one minus the whole width contains a bomb we can add one to the total and again so if we are in square index 10 we would be checking square of index 1 for if it has a bomb or not this is true for even square index 12 17 and so on before carrying on let's see if this works first so we are only checking two squares around us at this moment but that's fine let's get the square we are checking and use set attribute to add the total so far we do so by passing through a name so let's say data and the total now let's use console.log to see what exactly is happening in our browser so i'm going to consolidate each square as it passes through my loop after going through the checks above let's save this file now let's go over to our browser and refresh great you will now see that each square along with having a unique id and a class of bom or valid set to it will also have a data attribute with a total next to it this total indicates if any given square has a bomb in the squares to the left of it or to the southwest of it if both it has a total of two now that we can see how this works let's carry on to account for all the squares so if i is bigger than 10 and the square directly above it so minus the whole width contains a bomb add one to the total note we do not need to check if it's at right edge or left edge here as we are checking directly above the square so we don't have to worry about checking if the square appears on the other side of the grid by mistake now if i is bigger than 11 and is not at the left edge and the square directly to the left of it and one row up contains a class of bomb add one to the total and again if i is now smaller than 98 so we are now focusing on the bottom rows towards the end of the grid and is not at the right edge and the square directly to the right of it contain a bomb we add 1 to the total now if i smaller than 90 and not at the left edge and the squares directly to the left and one whole width below contain a bomb add one to the total 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 add one to the total finally if i is smaller than 89 and the square directly below it contain a bomb add one to the total okay we are done now let's add an event listener to each square to see if this has worked 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 so let's take the square and add the inbuilt javascript method of add event listener to it now we need to pass through two things the event so in this case the click and the function so now as i also want to be passing through a parameter of the function i'm going to be using this syntax so on click i want to evoke a function i have called click and i'm yet to write and into it i want to pass the square now we have that set up let's get to actually writing that click function this time outside of the create board function so let's scroll down after the create board function i'm going to define my click function and postu the square as a parameter so because this function is only being used inside the createboard function for now i know that i am passing through one parameter into it when it's being used and it's the square i have decided to click so if i do click a square and if that particular square contains a class of bomb let's simply alert us that this game is over for now we are doing this just to see if everything is linked up and working really so let's go ahead and save this file and head over to our browser now let's hit refresh luckily we can see exactly where our bombs are for now so finding one is not going to be a problem go ahead and click on a bomb you should get an alert and great the event listener seems to be working let's carry on now i don't really want an alert for now as it might be a little bit annoying i'm gonna change this to a console log notification for now you are free to change this to whatever kind of alert you want in your styling whether it's a pop-up scoreboard or simple alert that's up to you so we have what happens when you click a bomb let's now focus on what happens when you click on a square with data attached to it so a number first let's grab that number so we can use it in our javascript let's choose to call it total as it's the total of all the bombs surrounding us i'm going to grab the square we have clicked and using get attribute get the data attribute so the number now if the number is zero we don't really want it showing up we only care about numbers one and above so if total does not equal zero we want to grab the square again and add a class of checked to it so we know it's been checked for now let's flip over to our css file and add a color to the checked square so we can see exactly what is happening i'm going to give my checks class a background color of red so we can see it clearly i'm going to put it over the grid color but below the bomb color for now okay let's flip back to our javascript file now once a square has been checked we also want to display that total in the square at the same time we do so by grabbing the square and using inner html to display the total we then want to break this cycle so we use return 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 the only square that fits this criteria is a square with no bomb in it and no data number higher than zero for all of those squares we simply want to give it a class that is checked let's do that here after the if else statement now let's save this file and head over to our browser to check this has worked let's hit that refresh and great we can see a red square pop up as it is not close to any bombs so must have a data number of zero and these numbers as they are close to bombs show up with their data numbers we also get a game over when we click on the orange square here in our console log now what happens when we click on a square that already has a check class let's flip over to our javascript file to address this as it will affect us when we do the recursion we actually also want this to happen if there is a game over so we don't want anything to happen if the game is over and we click a square so if it's game over we return out of this function if this square that is being clicked contains a class of checked we simply break out of this using return i'm actually going to add another statement here as we want the same to happen if we click on a square that already has a flag using the two lines this means or so if the square contains a class of checked or a class of flag we want to return let's scroll to the top of our file to declare its game over and assign it the boolean of false for now okay great once that has been added let's get back to our click function 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 we want it to fan out and fill up all the squares up to the numbers i'm going to show you this here as it is hard to visualize when i say it but when i show you you will get what i mean so how do we do this well recursion is the answer and this is pretty cool 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 let's write a function called check square and pass through the square we have just clicked i am also going to pass through one more thing and that is the square's id we can technically do that in the next function as the id is attached to the square we are passing through but i'm going to do it here just to show you what passing two parameters looks like so check square and pass through the square and the squares id let's call it current id ah i need to move this out so what i'm saying here is i want to check to happen if the square does not contain a bomb but also after the check for it does not equal zero then once it's checked i want to add the class i've checked i mean i guess technically i'd have kept it where it was but i think this way is much neater now we have to do one more thing before writing our check square function i did say i want to pass down two parameters but i have not yet defined the current id let's do that now above anything else as we simply want to get the id of the square being passed down we simply grab the square and use dot id to get its id okay great let's move on let's get to actually writing the check square function so as a recap in this function we are going to be checking the neighboring squares once a square is clicked we are choosing to call the function check square and pass through the square and the squares id we chose to pass down as well as i mentioned we could have technically not passed through the current id as it's attached to the square but i wanted to show you that you can pass down two parameters not just one now the first thing we need to do when checking the neighboring squares is understand that we are going to be checking all eight surrounding squares of any square we are checking so the logic in this is going to be very similar to the logic for when we add in numbers to surrounding squares the first thing we need to do is check if the square we are checking is in the left edge or the right edge so const is left edge equals current id modulus width deeply equals zero and cons is right edge current id modulus width deeply equals nine or width minus one now the next thing we want to do is check all the surrounding squares i'm gonna put this in a set timeout as i want it to happen just that tiny bit after we click a square this tiny bit is so important as we need to happen after all the checks and the click function happen when it comes to recursion so using the inbuilt method of set timeout i will write this and pass through 10 milliseconds as the time i want to pass before executing this block of code now if the id of square we have clicked is larger than 0 and it's not at the left edge so this part should be familiar we want to get the id of the square that is directly to the left of it so kant's new id equals the squares array and we pass through the current id minus one i'm going to use pass in to make sure that this is a number not a string now that we have that square we need to get its id once we have the id of that square to the left of the square we're currently in let's grab it so we can work with it so let's call this new square equals document get element by d as we want to find the element with a certain id and this is the new id now that we have this square we're going to do something cool we are going to pass this new square back through the click function to be checked again so if it passes it continues to go through the loop again and if it gets returned on click function the loop stops as you can see here we do not need to pass down the new id why is this this is because the id is attached to the square we are passing down so we are passing on the new square into the click function as a parameter what the parameter is called is not important javascript will know to take the first parameter 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 if this is confusing you i've got a great video about functions 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 right so let's carry on with the recursion but let's have a look at this with the help of a diagram first here we have our click function and here we have our check square function now what we wrote on our click function is that if a game is over we return so nothing happens if the square we clicked has already been checked or has a flag on it we also return so nothing happens if the square has a data number larger than zero we want to add that data number to its inner html so it shows up and that's it we mark it as checks and move on we mark it as checks and move on now if the square we clicked on is none of the above so technically a square with a data number of zero we want to mark it as checked and invoke the check square function that will check all of its neighbors so we check the first neighbor second third fourth fifth sixth and eighth neighbor but what if we check the first neighbor in that check we also want to check that square's neighbor so we go back to the click function and do all the checks again if again the square is empty we go back to the check square function and so on and so on until the loop is broken pretty cool right recursion okay let's get back to it so once again if current id is bigger than 9 and is not at the right edge i want to get the new id of the square directly to the right one whole row above it so the southwest square then i want to get this actual square by using document get element by d and passing this new square into the click function to be checked again now as i am writing this i guess we could just be getting the new id by grabbing the current id and adding a one and a width to that rather than going into the square array and grabbing the id that is also a quicker option i will include this refactor option in my github code if you want to have a look at that and what i mean but let's stick to this way for now 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 as we are simply checking the square above 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 dot id now let's grab the actual element using get element by d and passing down the new id and pass that square into our click function are we getting it yet let's talk through it one more time so once again i am saying if the current id of the square i clicked that was an empty square with a number of zero and then passed down into the check square function is bigger than 11 and is not at the left hand edge i want to grab the new id of the square directly one to the left of it and when we're up then use get element by d to grab that square so i can parse it through the click function so hopefully now you understand what is happening here we are using the same logic we did for adding numbers to the eight surrounding squares around any square whilst checking if the squares are valid when they are checked but also adding an extra layer of things to be actioned this is a great example of recursion happening and is super satisfactory when it all works as intended i'm gonna leave the next four for us to get on with so see in a bit okay great once we have all eight checks for the eight surrounding squares set any square in our grid let's save this file and see if it has worked in our browser let's hit the refresh button and great just watch how satisfying is to see all those squares appear and then stop at the numbers and again amazing it's like watching one of those videos with a knife cutting into play-doh or something it's really cool i'm just checking everything works as it should so the numbers are showing up the correct totals are showing up and a game over shows up in my console if i click an orange bomb square and great i'm pretty pleased as to where we've gone to so far so let's carry on now the next thing we'll do is improve my game over so let's get rid of this console.log here i want more to happen than just a notification right so let's get rid of that and write a function called game over once again passing through the square we are working with so down below the check squares function let's write a function called game over and pass through a parameter meant for our square i'm gonna write a console log here saying boom game over so far no change the same thing will happen now i also want to tell our javascript that the game is over so i need to set the is game over variable to true 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 now i also want to show all the bomb locations if there's a game over for this i'm going to grab all of our squares and use the inbuilt method of 4 each so for each square in our square's array if the square contains a class of bomb i want to get the square and in it i want to write some text in this case it's a bom imagicon okay cool let's check if that has worked so save the file flip over to your browser now let's click on a square that we know has a bomb in it and great there are all our bombs as well as a notification in our console log let's move on so how do we win in minesweeper well we need to flag all the bombs on our grid without hitting a bomb we have an equal number of flags to bomb so it can only flag on the exact squares that the bomb are in in order to win let's tackle this feature by first writing a function that will add a flag 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 so under the create board function i want to write a function called add flag like this again i want to pass through the square if the game is over i want to return as i don't want anything to happen if the squares i control left click has not already been checked so does not contain a class of checked indicated by this bang and the flags i've placed are less than the bomb amount on the board i want something to happen first however let's take care the flags has a total of zero at the top of our file so scroll up and let flags equal zero now let's get back to writing our function so if this is true and also if the square does not contain a flag already i want to add a class of flag to it i also want to grab the square and it's in html i want to add an emoticon of a flag to indicate a flag is there i also want to add one to our flags variable using the increment operator else if there is a flag already there i want to remove the flag so remove the class of flag and also replace the text in my square so instead of showing a flag emoticon it simply displays nothing we also need to take away a flag from the flags variable using the decrement operator great now that we have that let's link it up to all of our squares so in the create wood function under the normal click let's add a control and left click to each square let's grab the square and add the inbuilt method of oncontext menu now we write function and password and e for event we are passing through event into the function now we need to use a prevent default to prevent the default action happening and add our add flag function here passing through the square we have control left clicked okay great let's save this file to check it out and see if it has worked so hit refresh on our browser and amazing look at our little red flags go if we press ctrl and left click on our machines we will see the little flags so cool now we have one last thing to do and that is tell our javascript what a win is so once we are happy with this let's go back to our project now under the game over function i'm going to write a check for we're not function so let's scroll down okay great we need to decide what happens when we want to check for a win so function check for win this time we do not need to pass anything through as i've decided that we are going to be checking over the entire grid each time we check for a win so once again let's use the for loop to loop over the length of our squares array incremented by one each time so if the square i'm checking my squares array contains a class of flag and indicated by the double and here and the same square contains a class of bomb both of these statements are true and we can execute the following code we increment the variable matches by one so let matches equal zero now if the matches we are counting suddenly deeply equal the bomb amount so what is that that's 20 we want the following block of code to be executed console log you won for now i'm fine with that okay now we have done this let's decide where we want to check for a win i guess it makes sense to check for when after each time we place a flag right so let's go ahead and add flag here so add flag function let's put it there so right under where we add a new flag to our flags variable let's invoke the check for win function okay cool let's save this file and see if it has worked hit refresh and great there's our flag let's go ahead and click all 20 bombs so click click click click click okay and great we get a notification on console log telling us that we have in fact won amazing now let's do one very last thing and that is set or is game over variable to true and that's it that is the functionality down well done for getting this far now as always i would love to see your finished game how you've styled it taking it to that next extra level we do have a bomb amount that is a variable so feel free to maybe level up make new levels based on the bomb amount some people might want to add you know like a timer i think the original minesweeper game does have a timer so the user is constrained to a time limit or trying to find all the bombs there are literally so many options please do share them with me on twitter instagram youtube i would absolutely love to see what you've done if you have any questions please do comment below i'd be more than happy to help you with this game if you want to see how i've styled it please again do look at my github i put all my code there the code is very much for you to take make your own as well so once again thank you for watching

Channel: Traversy Media

Views: 102,394

Keywords: javascript game, javascript, Ania Kubow, mminesweeper, recursion

Id: W0No1JDc6vE

Length: 48min 5sec (2885 seconds)

Published: Mon Jul 27 2020