think

Coding Challenge #71: Minesweeper



Sharing buttons:

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]