Coding Challenge #71: Minesweeper

hello welcome to another coding challenge in this coding challenge I'm going to make minesweeper I actually already did the coding challenge I'm recording a quick intro so you can see what's going to happen it's about two long one to about somewhere between 45 minutes in an hour I will point out this would be less time to make minesweeper then it took me to make pong which goes to show you how my brain doesn't really work in normal ways the pong should really be simpler I think but anyway this is my sweeper it's actually be sweeper but because these are bees and not mines but it doesn't really matter the point of this game is that you click and when you click you're trying to avoid getting stung by a bee and so here this cell has three bees next to it so I'm going to click somewhere else this one has to click somewhere else three click click uh-oh and I hit a bee so let me try again oh I hit a bee up a hit B he ah there we go when I click somewhere that has no neighbors it uh it reveals all the other spots around it that also have no neighbors and a number so okay so that's that's B sweeper I can see I can see for sure that there's a be here if I were to click the review so this is the game I'm going to program it from scratch in JavaScript all the way through I'm going to make a whole bunch of mistakes and get lost and at the end of this I will give you a lot of suggestions and things that you could add or try to make your own creative version of it and I hope you'll share those with me code in the description on github okay thanks enjoy this coding challenge all aboard all aboard here we are up coding trade I'm going to do a coding challenge today that was requested highly requested the number three requested topic minesweeper thank you to fire soul who suggested this on August 14th 2016 today is May 12th 2017 so I didn't get to it within a year and I have never programmed this before and I think Kylie last time I played minesweeper was it's gotta be at least 15 years ago but I dunno how it works so I'm just gonna get started let's see I expect this is probably gonna take if I can do this in under 60 minutes that's going to be good for me you can see how long this video is I don't even know because I am at the present time right now okay uh I've no idea what's going to happen next but I'm just going to get started okay what are some things I need to do here I have to do this okay first thing that I need to do is I think what I should do is I should make an object I should make an object called a cell let's think about this so minesweeper and by the way I'm in a well minesweeper I want to use something besides bombs so i beez and bombs on twitter suggested why not B's so I like this idea of what we're going to do is make B sweeper where the idea here is there's a grid and any one of these cells could either have a B in it or nothing in it so the cell should have a state and we could think of that state as like B maybe it's true or false so each cell will have a state true or false each cell might I might need to know like where it is and its width and height yeah it's kind of redundant information but that's kind of useful I need to know where to draw it and then I also want to know its state like has it been revealed or not so that's also I can actually think of that as a boolean revealed true or false so right because if it's revealed I'll see what's there it could be blank if nothing's there or the B if the B is there or it could also have a number so for example this cell would have the number two because it's got to be next to it this cell would also have the number two because that's two B's next to it this would have a 1 a 1 a 1 a 1 2 A 2 a 1 a 1 so if it's revealed we either see blank or B or a number okay so I think this is kind of all we need I just forgot since this is going to be really hard to take me a very long time because what are the bad sales like I it'll be easy it'll be done in 10 minutes which is never true it's especially not for me back ok ok so I'm going to come back to the computer now and let's let's add some of these things this dot B equals true this dot revealed equals true so let's just pretend for a moment that every single cell has a B and is revealed so now what do I want to do here I need to store all of these cells in some sort of data structure now there's a variety of ways I could do this I click weather probably makes sense is for me to store them in a two dimensional so-called two dimensional array and so we can think of this as like oh this every single cell is going to be in a big array so it's a list but inside that array maybe each row is also an array that way what this allows me to do is if I want to say if I call this maybe I'll call this the grid if I reference grid index 1 comma 2 comma 3 or something so this is this is row 0 this is row 1 and then column I would have this or something so that would be that particular cell and I would write it like this I would write it like this so I think this makes sense I could use a just a regular array and then I could always convert a column in row location to the spot in the one dimensional range I've done this quite a bit in different videos about pixels and image processing but I think this makes us the only things a little bit weird is typically when I do this I actually think about this as the column and this is the row kind of like X comma Y column row and the way I just described it here do so so really what I might do is that this defer the first column is the first element then the next column is the second element of that array so there's any number of ways you could sort of think of this or do this but I'm going to do this here in the code now now it's a little bit tricky in JavaScript to make a two-dimensional array what I'm actually going to do is I'm going to make a function and we call it make make 2d array I've done this before I have like a total deja vu moment you have done this in the previous coding jobs and actually I think there's a github issue thread on the rainbow topics forum github repository about how to make a derrick function that makes you any dimensional array but let's just say I make a two-dimensional array with a certain number of columns and a certain number of rows and so I'm going to say array equals a new array with a certain number of columns and then for every column make that an array with the number of rows in it okay so I have an array of all the columns which are all like the X's and that each one of those is an array of all the rows of all the Y's and this is a you know in JavaScript typically you'll see this right which is like that's how you make an array but I can I can also say if I want the array to have a specific number of elements to start I can say new array number of columns okay so what I want to do is now I'm going to have a global variable called grid and I'm going to say grid equals make 2d array with now how many columns of how many rows alright so let's just do something simple here let's just say that these are going to be 10 by 10 these are going to be 10 10 by 10 pick little 10 by 10 pixel right squares so if my canvas is 400 by 400 then I'm going to have 40 columns and 40 rows okay so that let's do that so I'm gonna make a so first I have to say let's make create canvas width of 400 comma 400 and let's make it smaller just to start 200 comma 200 and then make the grid make the make an array of 20 20 by 20 and I'm going to okay and you know I could use math to clean this up later we'll do that later okay this is fun doesn't feel so fun yet maybe looks weird enough so now and actually let's have a global variables like let's just do this and now I'm going to say for VAR i equals 0 i is less than a number of columns i now need to initialize then I'm going to use J for the number of rows and now I need to just initialize every single spot to be a new cell so what we've got now here is this idea okay we need to have the game the board the game board is a grid of cell objects it's going to have a certain number of columns and a certain number of roll roads so I make a two-dimensional array to store all the cells and then I loop through for every column for every row make a new cell now let's go into the draw function let's say background 0 and do this and I'm going to say show ok so the idea here now is I want to be able to see what's in these cells so I need to go and you know what I really want to do I'm going to make a separate JavaScript file called cell Jas because I have a feeling ultimately there's going to be a lot of code that starts going into the cell so I'd like to save that somewhere else and once I've done that I just need to make sure I also add a reference to it in my index.html file okay whoops what's going on cannot read properties 0 of undefined sketch such as 25 so we already have an error here what see it's a s22 what do I have now what's wrong oh look at this you know it would be nice if I write a function called make 2d array and I create a two-dimensional array you know what I need to do I need to return it so return the array okay great now show is not a function okay great so now we need to write a function called show and I'm going to attach the functions to the prototype this is us this is a what a way of doing object-oriented programming in JavaScript where I create use this constructor function to make an object and every object that is made that constructor function will have a set of methods as part of its prototype one of which is show another video that covers this more clear or another video that covers this in more detail which I will link to in the description and also someday maybe I'll use this es6 syntax which is a little bit different and perhaps a bit nicer remains to be seen okay so now what I want to do is I want to draw a rectangle at the X location with a source with a width and height that's the size of the rectangle of each cell huh but it doesn't have this cell doesn't have an X a Y or size so let's give it that X Y w this x equals x this dot y equals y this w equals W now when I create each cell if I have a global variable called W which is ten each cell is going to be a ten by ten pixel thing let's make it twenty by twenty to make it bigger then I can also say right I can actually then calculate the number of columns and rows which is the width divided by that size the rows is the height divided by that size and probably what I should also do is say floor because I don't want to have like 21.3 of columns or 21.7 rows it needs to be a whole number an integer value so let's see how are we doing here now that I've done that I can make each cell at its I times W location or it's J times W location so why is that right so each one of these basically has up let me find my eraser here each one of these has a I index its column it also has a J index it's row so if this one is 2 comma 1 it's actually the rectangle itself if each one of these is 10 by 10 would be at 20 comma 10 pixels if it's 20 by 20 we get 14 comma 20 so I need to calculate its pixel location by multiplying by taking the its index I comma J and expanding it by the number of pixels which is the size yay-yay me and setting the grid size things okay so now and it's size is just W so again some fun email nothing on this is really going to change the need to be in the object could just be a global variable but what the hey here we go okay so now we should be able to see a whole bunch of rectangles aha now look at this that's sort of sad like they have this what am i what's going on here so let's figure out what we're going to color them I'm going to say stroke commas zero and no fill let's do that now we see nothing I'm going to say fill comma 255 now we see the outline and but it's kind of sad like our math is off there's these little details really pause for me so let's fix this what's the best way to do it I don't know this might this might just actually work that's fine let's do it that way so just actually make the canvas one pixel wider everything's happy now okay so now we see that grid now here's the thing what I want to say in the show function is is you know if if it's not revealed well actually it's always gonna I think we're always going to draw a white rectangle you know what actually what I should do this will make more sense is I should make the background white and I'm always going to draw a no filled a no filled rectangle and if it is revealed then I might put some other things in it for example if it's a B then let's draw I don't know what I'm just going to draw an ellipse and so I'm going to draw a little circle if it's a B let's see what happens there okay look but the circles in the wrong place because but I can change that I can say ellipse mode corner so I can have the ellipse reference point be the corner oh but I want it to be I want it to appear in the center so never mind I'm going to make its location plus W so I'm going to just draw in a little lips I'm just kind of moving the ellipse around so if it's a B there's a circle there they all have a B so let's now do something different let's just say if random one is less than point five then this dot B is true otherwise this dot B is false so now half of them are about how about half of them randomly are going to be B's and there we go so now we see we're on our way to actually making this game okay so we now have a set up where we have a grid each cell has a state it could be a B or not a B and we can visualize that B design aside okay so now I should say that there none of them are revealed at the beginning none of them are revealed right tada so now here's the thing now what I need to do what we're really moving along here we don't have too much farther to go now what I need to do is I need some mechanism to say like when I click on one of these I want to reveal it I want to show what's underneath click on it reveal it so now what I need to do is I need some sort of function to determine if the mouse has clicked on that particular cell so one way to do that first of all would be to write a function contains XY so in other words I want to this is a function I want to be able to say does this cell contain a point is that point inside this cell and so what are the boundaries of the cell well if X is greater than this X plus this X and X is less than this X plus this W right because if that neut look look right if this is a cell I want to know did the mouse is this point between X and X plus W or is it between y and y plus W and I'm using W as this generic variable named width and since these are all squares the width and height are equal you know I would have to rethink this and perhaps if I was things were different but and maybe there's a better variable name for this but W for this sort of length on the side of the rectangle okay so what I can actually do here and I don't need to actually have this if statement I just want to return the result of this a point is inside if X is between the boundaries and this is going to get very long Y is between the boundaries so the same old thing right so return this long the result evaluating this long if statement return X being between the left and right and Y being between the top and bottom why am I doing this because what I also want to do now is handle the mousepressed event so using p5 there's a global function called mousepressed where what I can do is I can say now I could say if grid contains Mouse X comma Mouse why I wrote that function because what I want to do is say let me check every single let me check every single spot in the grid to see if it can change when the mouse is pressed to see if it contains the mouse point if it does that's the point that I clicked on and now I can do something about that I can say grid IJ reveal all right so I can execute a function like reveal so let me now go into the cell object and I can write a new function called reveal and here's the thing I want to say this dot revealed equals true so even if I if I click on it before it's already true it's true so let's let's see how this works well that was weird so I must have a mistake compare because I'm clicking on some so let's see here let's see where do I have a mistake I see somebody in the chat grid i J okay I I whoops let's just say I J and this was this is right this is right this is right ok I comma J there we go that should fix it so whoa what craziness is going on ah this is the mistake look at that so there I really it's the event it's the opposite of the usual this dot mistake and you know this is a bit of a problem this is a very common programming a headachy thing which is that these variables are the arguments to the function the parameters of the function they're coming in and I'm testing them against the objects own x and y so the objects own x and y is this dot and the arguments that are coming in are x and y so this is where i don't want to this dot okay great so now we should see whenever I click on one out and and what I'm going to do here also just to be able to see that this is really working is where do I if there's a B otherwise let's draw a like a grey rectangle and let's be let's be explicit about everything so let's sort of see here so now I'm just also whenever I click on it it will draw something so we can see oh and I should have you know we don't need to redo the stroke the stroke will always stay so we can see if there's a B there's a B circle if there's not there's a grey rectangle and I meant that for that to be much lighter so something like this so I just want to see that it's been clicked on okay great we're doing well and now here's the thing the amazing thing is that somebody's somebody's going to be some good advice in the chat is a better way that I could do this now here's the thing what do I also want I want to be able to determine how many bees are neighboring a particular cell so I need a function I'm going to call it count neighbors and I wonder if that's something else yeah I'll just do it on the fly count neighbors equals a function okay so first I want to do is just say total is zero and maybe I could call it count bees or something so first of all if this cell is a bee return negative one let's just say if it's a bee return negative one because it's irrelevant I only want to count the number of B is next two cells but art bees now what I need to do is I need to look at all the neighbors well how do I look at all the neighbors a particular cell has how many neighbors one two three four five six seven eight and so actually I can do a little loop that's between the offset of negative one and an offset of plus one right I want to look at every neighbor that minus one plus one I could do these each individually like just check each one let's do it in a loop so what I want to say now is okay I'm thinking I'm thinking I'm thinking let's do for I equals negative one I is less than and are let's say less than or equal to plus 1 I plus plus so I here is now the offset in the X Direction J equals negative 1 J is less than or equal to 1 J plus plus and so I want to look at a particular neighbor is a particular neighbor is grid oh look at this these keep track of their own x and y but don't keep track of their own index what do I want to do about this so this is really in some ways this function is it really part of a cell or is it a grid function anyway there's a bunch of different ways I could do this I'm actually just going to in a very redundant way whoops I'm going to this is a just for total overkill nests and you know actually I like this because you know what I can do is if I send the index into the grid then I could just calculate the x and y here because I could say it's I times W and the y is J time study so let's change how that works and let's go into sketch and let's change how this works so I could just make a new cell that's at I comma J comma W right because now what I can do here is I can say this dot I plus I this J this J plus J so these are all the neighbors I want to look at I want to look at I want to look at I minus one I I plus one I I want to look at I plus 1 J minus 1 I want to look at every single neighbor from negative 1 to 1 okay like I don't know if this is if I'm totally being clear I want to say like I minus 1 comma J J minus 1 then I want to say you know I comma J minus 1 I I plus 1 J minus 1 I comma J right you know I comma J minus 1 I comma J I comment you can you edit that part out no I said over here we can do any edit I don't why I'm trying to list all the neighbors I think if you get out a piece of paper and draw it you'll be able to do it I got to keep moving maybe I get this video finished okay so if neighbor dot B total plus plus okay so if if the neighbor has a beat increase that total and I guess I could say at the end now I return total now here's the thing I really don't want to check myself right because I'm not a neighbor for myself so whenever I equals whenever whenever it's I and J are both zero that offset is zero then I don't want to check but the thing is if I was a B I wouldn't be in here if I wasn't B I wouldn't be checking my neighbors in the first place so we can assume that I'm not to be so total even if neighbor is myself total won't go up so I could I can skip checking that so great so now I can return total so what I want to do and so here's the thing I think actually let's just create a variable which is neighboring called neighbor neighbor right I'm going to create a variable called neighbor count and when I do count bees instead of returning it I'm going to say this dot neighbor count is a is that total because I think what I'm going to do is after I create the whole grid I'm just going to just going to count every single one now the thing is I can't just call count neighbors here I've got to make the full grid because I can't count neighbors if I haven't made certain cells that are next to that one so you know I could just count the neighbors when I click on it but I might as well just count them all that way when I click on it what I can actually do here is in the display right where's my show function if it's a B it's got a circle if it's not I can also say text and let's say text-align:center text-align:center then I want to say text and then I want say fill 0 and then I want to say text neighbor count this X this dot Y and I'm sure might have to move the text around and it should be this neighbor count okay how we doing here now I know there's going to be a problem but I'm going to go for it anyway oh I didn't have a problem look at ok 0 neighbors well first of all that's not right it's in the wrong place and it's the wrong number so something is going wrong but that's ok we're going to figure this out ok so first of all it's in the rosalie fix where it is so let's let's move the text over so I'm going to place it in the center and then so but it's in the center but it's kind of at the top so I want to actually place the text at the bottom maybe - like 2 pixels or something so let's do that and maybe let's make it minus 4 pixels this is obviously the most important six signals okay so this looks good of getting the numbers but I am not seeing the right number so it's not counting the right number of neighbors so something is clearly wrong so first of all did I let's just let's just see here is a is this actually be happening let's say console.log total so that didn't happen I thought I was counting all the B's oh look at this just a little type of when you call a function you've got to add the parentheses referencing just the function as a variable you don't need the parentheses the parentheses execute the function so I was missing that and is not grid it's not a function okay count neighbors is not a function what do I have wrong here contains equals function count it's called count B's it also would be nice to to name to name the function correctly count B's all right cannot read property zero of undefined aha I thought we might have a problem so what is the problem the issue is if I'm on an edge there's no neighbor to the left or there's no neighbor up to the top so only only cells that are not along the edge have all eight neighbors otherwise there's fewer neighbors and I've got to account for that so what I wanted to account for that there's a variety of ways I could do that let's go to this count bees function okay so what I'm actually going to do is I'm going to call this X off I'm going to just rename these Y off oops X off so it's like the X offset and the y offset I think this will be a little bit clearer in terms of a variable name then what I want to do is I'm going to say I equals this I plus X off and bar J equals this j+ y off so this is actual the neighbor is just that I comma J now so I want to break those out into separate variables because now what I can do is I can say as long as I is not equal to as long as I is greater than negative one and I is less than columns and J is greater than negative 1 and J is less than rows then I can go forward and do this right so I want to if it's something off the grid ignore it so hopefully this helps and now five whoa there are five B's next to this too so this looks let's just try to click a button and actually let me just reveal them all so we can see if this let me just turn true on so now there we go so is this right this looks right right this cell has three neighbors this one has four this one has three are they correct on the edges three so it looks good great awesome okay we're getting somewhere how long have I been doing this well there's all this stuff happening in the check that I'm not looking at okay okay okay let's go I think I think we're just about ready to actually start making the game happen so we can start working on the game mechanic so here's the thing what I want to do now is minesweeper I think starts with a fixed number of Mines or B's in this case so what I actually don't want to do now now everything's going to not be abie to start this dot B equals false what I want to do is have a variable I'm going to call it something like total B's and we're going to start with ten B's so they'll be ten B is randomly placed and so now what I need to do is I need to pick ret ten and response now here's the thing I could just pick a random I and J but I don't want to pick the same spot twice oh I'm going to do something a little bit goofy what I'm going to do is I'm going to add to set up an album for pick to pick total B's B's spots so for VAR i equals zero eyes less than total B's i plus plus now what I was saying is I could pick and I'm going to use n here because I want it I could say bar I equals floor random columns let's just start this way J equals floor random rows okay so I could just do this and then I'm going to say grid I J dot B equals true so let's do this and let's uh let's go here and say let's set everything to be revealed so well okay so something I clearly did something wrong but they're all in the diagonal what typo do I have here I did I I again good I and J so 1 2 3 4 5 6 7 8 9 o 1 2 3 4 5 6 7 8 9 can run 10 there's 10 but I'm going to do this a bunch of times it's simple it's going to pick the same spot twice and so they could be then so there's a variety of ways I could do this I could check is that already be if not pick another spot but I'm going to do it this way what I'm going to do is I'm going to say options is a new array and then I'm going to go through every possible spot so I'm going to do all the columns and all the rows and I'm going to say options dot push a little array with I and J in it so I'm going to create an array that has every possible option in it and I just so you see it I'm going to say console.log options and whoops let me take out these console dot log that's in the account B's function I don't want that anymore I'm done with that so we can see this isn't how hard to loot that we could see these are all all the spots right for from 0 4 comma 1 4 comma 2 the reason why I'm doing this is now what I could do is where am i sketch what I could do it here instead of just picking a random column in row I could say index equals floor random options length so give me a random option and then VAR i equals index 0 VAR j equals index 1 so that option has an x has a column and row location in it so i could set that to be true and then what I can do is I could say options dot splice index comma 1 so this then deletes that spot so so so it's no longer an option and I probably could do that in one line of code because splice probably returns the one that your index sorry sorry this is blue choice equals so the thing that I'm choosing or this is confusing right the index is the random index into the options array and then the column and row location is part of that choice so now let's try this again and this seems to work and what I'm going to do interestingly enough so there's a way we're gonna be able to check if this is actually working so what I want to actually do is let's just take this splice right up here because I have a feeling splice return to the one returns the one that you picked so that's a little bit nicer right so pick a random index take it out and delete it and then set that feature so now whoops so it doesn't splice does not so that fine okay so let's leave it this way and there we go now let's make sure this is really working what I'm going to do is say total B is equals we have 20 by what is this 10 by 10 so let's make total B's 100 there we go so we can see that's working if I had just it was able to pick every single spot but again 10 get 10 total B's 20 we get 20 there we go okay that's good now I don't want to reveal anything and also the way minesweeper works design-wise is if it has no neighbors you actually don't see the zero so let's let's just change that in how it's drawing so where I where I have the show function is only draw the text if this dot neighbor count is greater than zero okay there we go so now we're seeing this is we're seeing the final result this is the end of the game right you're done we found all of the B's my numbers are wrong somebody the chat is saying my numbers are wrong I think they're right look at this pop is what I want removes that element from the array but I thought pop you can't give it a specific index can you let's take a let's take a short little divergence digression sorry and look at top javascript array so does pop pop I don't think yet it only removes the last element of the array so I can't give it a specific index anyway I could shuffle the array and pop them off the end but whatever there's lots of other ways you could do this this is my way I did it no copyright violation here okay if I just think one if I sing incredibly poorly one line from song do I really violate copyright I don't think so okay so now let's now go back to sell and nothing is revealed false so now what we do is I can start playing let's go 1 1 ah ok so this is actually working in the sense that I can play this but when I click on one of these if it has no neighbors it should reveal everything around it that doesn't have all those businesses the one tricky part alert alert train help big : to station this is the trickiest part ok I need to figure out a way to reveal all the adjacent cells that don't have a B and if any of those adjacent cells also have a count of 0 all of the adjacent cells next to those should also be revealed so how do I do that well where where do I need to start this ok oh yeah this is basically flood-fill someone is saying flood fill this is like a flood fill algorithm because what I member I'll come back to that the end google flood fill I think we're kind of doing that all of a sudden which is exciting embedded in this video here okay so a flood film from Wikipedia also called fills an algorithm determines the area connected to a given node ok I have the chat message one way to quickly okay now let's see here so I'm not going to look it up how it works I'm just going to make up my own way of doing this so we're okay so this okay let's trace out what's going on here when I click the mouse I call reveal when I call reveal I said this dot reveals equal to true now what do I want to do different things so if this neighbor count equals zero flood fill time it's blood-filled time doo-doo-doo-doo doo-doo-doo-doo it's little time yeah how could you better but anyway so okay so now what I need to do is I need to go and look at all of the neighbors now we've done this before so what I think what I should do is I should probably call a function which is going to we'll call it this dot flood fill because we might need to call this somewhat recursively cell dot prototype dot flood fill equals function okay so one thing we need to do just like we did with neighbor count we can repurpose some of this code we can start to look at all the neighbors right so am I missing I'm missing a bracket okay so this was the code that looks at all the neighbors and it should reveal them all so ah this is perfect all I got to do is say this as long as it's not a B right if so okay I missed the one important I'm like thinking this through and I'm not able to say what I'm thinking right so how does this work right we want to look at all the neighbors if the neighbor is not a B reveal it that's actually it's as simple as that if the neighbor is not a B neighbor dot reveal and this is actually going to trigger because reveal is going to set that equal to true and it's going to check a reveal is going to set the neighbors reveal true and I have it flood fill if it's zero so it's going to be redundancy here because it's going to end up checking some spots but let's just see let's just see if this was it really as simple as that I can't imagine okay something went wrong there clearly so first of all I clicked on a B okay that kind of worked but I got some errors here I think I'm getting close Oh maximum call stack.size exceeded aha I also don't want to reveal it if it's already been revealed got it if neighbor is not Abie and neighbor is not revealed right I don't otherwise I'm going to be stuck in an infinite loop of like this neighbor oh I'm right because if I say to my neighbor reveal yourself and then my neighbor says hey you reveal yourself and I say no you reveal yourself I say your real stuff they're fearless tell me reveal self everybody reveal themselves you you get to reveal yourself then we've got a problem ok so this that should help there's still some ok that's a 1 that's a 1 ha ha that was exciting ok ok I know what's going on when I click on a be something weird happens so it seems to be working unless I click on a B right why is it I but yeah so that's this bit that's working really really well so why is it doing it when I click on a beach so let's trace that out when I click on a B now suppressed I call reveal then in the reveal function if neighbor count equals 0 this stuff so is neighbor counts 0 when I click on a B shouldn't neighbor count be negative 1 when I click on a B why are other things being revealed so let's do console dot log this neighbor count to see what's going on here 1 2 2 1 1 honey find me one there's got to be this has got to be it here right 0 so it did get 0 and then why did it do anything else what am I missing oh I returned negative 1 here of course there we go yeah so if this be dis neighbor count equals negative one and then I'll just say return can that mean if that's what my problem I had that historically there we go I can keep playing hey I think we made minesweeper okay so now hold on if it's a B then the game is over okay uh-huh how long have I been doing this somebody tell me how long this has been going on for uh okay okay okay wait wait wait G all right a low-battery my soundboard everything's going everything's falling apart okay um so here reveal if it contains so I could just check you know if it was it why don't we just check it here if grid i J JB game let's call game over so if it's a B if that spot is a B let's call a function called game over and in the game over function which I will put R and arbitrarily here what I'm going to do is loop through everything and just reveal everything reveal equals true so that's how I'm going to have game over okay so I think we've made this game now Oh true did I not hit save want wall if grid what did it happen grid IJ reveal is not a function what I mean it's not a function what did I do I've lost I've lost my Oh markers markers there's a thing where you could do markers ok ok hold on well good night where lies that maybe hold on markers will be an exercise for the audience what's wrong here Oh reveal revealed revealed revealed revealed revealed not reveal the function this is one of the tricky things in JavaScript you can't have a variable I mean functions are variables so you can't say reveal equals 5 function reveal equals sum function they're the same you've over in what you done that my variable name was revealed ok ah game over so I think that we have now made minesweeper about 52 strictly about 50 minutes I'm under an hour too many bites me professor took me to make pong now I hate that you know having the game just start having the game start over being able to add markers so being able to add markers is a way I think that you could like snow that you know there's a bomb there which is going to help you as you move along but I'm going to finish this coding challenge I'm going to leave that as an exercise so this is going to get posted you will see the code for it on github in a link that look in this video's description for the code there should be a really file there as well where if you make a variation of this you can link to it maybe you could design some beautiful bees it could have sounds with one thing that you could do that would be really nice is you could animate the flood-fill algorithm so one thing I'm going to do is I'm going to just so we I'm going to have a total number of bees make it just two right now so when I click it flood fills it instantly but I could animate like just one at a time each frame reveal the next set of neighbors that would be an exciting nice little thing to do what other kinds of clever variations on the game can you make how can you make it more beautiful could you use some sort of weird hexagonal grid there's all sorts of possible ways you could improve and change the style it needs a win condition it needs a way to start over it could use like some settings of like I want to add you know I wanted to have 20 bees I want the call number certain number of columns and rows so you could go the whole interface for it there is so many things you could do ah in the chat somebody suggesting to do this with all dom elements so don't use canvas at all but maybe these are all divs that would be an exciting thing to try to you can will CSS animation as you click on things so many possible things you could try to do but there it is minesweeper in under an hour multiplayer with the server is something you could do I hope you make some variations I can share those with me and next week on my live stream I will share hopefully a whole bunch of variations and things that people make with this game be sweeper thanks and see you in a future coding challenge [Music]

Channel: The Coding Train

Views: 387,806

Rating: 4.9290709 out of 5

Keywords: JavaScript (Programming Language), programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, minesweeper, minesweeper coding challenge, minesweeper in javascript, minesweeper js, minesweeper p5.js, p5.js, processing javascript, beesweeper, classic game javascript, video game javascript, videogame js, minesweeper html5 canvas, simple minesweeper, video game html5, video game canvas html5, challenge, code challenge

Id: LFU5ZlrR21E

Length: 53min 45sec (3225 seconds)

Published: Thu May 18 2017