Coding Challenge #71: Minesweeper

[@ELHAUKEZ]

even if I had a mean day and feel somehow bad watching dan makes me giggle and getting a smile back. he's more human than most of people i know + I dig his coding :) didn't we all wanted a teacher like him

[@TheCodingTrain]

Thanks for the nice feedback!

[@MrCmon113]

Every human is equally a human.

[@FromRootsToRadicals_INTP]

Dude, your my fav channel for coding i have come across. This would be my channel if i dod KZbin. Your delivery, topics and interactions. Senior lead dev at 38 and started at 11. For real, one of my top 5 fav channels of all time. Thanks!

[@Amayakase]

While I never code in JavaScript, I'm still learning alot here. My preferred language is Lua, and since JS and Lua are very alike, it's easy to watch these tutorials while coding in Lua. Thanks!

[@juneru2]

As someone trying to learn JS just to make a simple game, these challenge videos are perfect! I wasn't aware of p5.js, and it helps make programming much simpler in JavaScript, kinda like how LOVE2D and PICO-8 do for Lua.

[@ThatOneAgarAgarioThePro]

can you make a agario liek game im fan

[@AnimilesYT]

When starting a new game and clicking on a random tile: To bee or not to bee. That's the question

[@Bunny99s]

Actually the real minesweeper will always make the first clicked cell an empty cell. So it fills the grid when clicking the first cell. Otherwise the hard mode would be so frustrating as the chance to click a mine / bee / bomb on first pick is so high.

[@alexi1182]

I'm gonna ask you to get out

[@Yazan_Majdalawi]

Love this

[@David-vo1rl]

One tip for the mouse-click: instead of checking every cell if it contains the mouse when clicked, do simple math: floor(mousex / cellwidth) -> this will return the x-index of the cell clicked. Do the same for mousey. For example - if cell width is 50 and you click on 75th pixel it's floor(75 / 50) which is 1 (x index of the cell). :)

[@David-vo1rl]

Oh and btw I didn't watch the video yet and I also forgot that you record live so if you changed it later don't mind this comment :)

[@TheCodingTrain]

Great point!

[@narkocat]

Nice advice! Thanks!

[@skylerockspecial]

David was looking through the comments to see if someone noticed, looping through all cells to check if it was clicked...

[@drewchie]

i️ dont speak code please translate

[@fedos]

I love watching these where you're figuring it out in real time, and record yourself making the same mistakes that all programmers make, more than videos where the programmer is showing what they did and editing out the things like forgetting to return a value or typing [i][i] instead of [i][j].

[@Manticore_007]

I'm beginning to sound like a suckup, but boy, you're entertaining to watch coding. Very cool to see this iconic game under the hood. Very satisfying to see it begin to work more and more as we know it!

[@reimarpb]

17:14 "We don't have too much farther to go" **video is 53 minutes long**

[@ashish2628]

came looking for this comment at 17:14 haha

[@ridlr9299]

just came down here to say the same thing lol

[@LaviArzi]

Same, one year later

[@FromRootsToRadicals_INTP]

Man making learning new stuff fun again. Thanks and not just coding but thought prep.

[@ArnoldsKtm]

This one was amazing to watch. That flood fill function was satisfying. I think the bee generation should be after the first click so it never hits a bee on the first try!

[@TheCodingTrain]

Yes, I really should have done this!

[@Chayat0freak]

The Coding Train that's how real minesweeper does it

[@trouncerrredits]

i defined a function that took a random generated 'firstclick', excluded it and the surrounding squares from the potential mine locations, then randomly filled the remaining squares with a set number of mines.

[@Bromon655]

Keeps such a fluid train of thought and debugs with ease. I can only hope that one day I can train my mind to operate the same.

[@TheCodingTrain]

I believe in you!

[@mauriceslegtenhorst1651]

You are the most fun way to learn coding. Thank you for your free and fun videos

[@chrisalvarez5405]

This video saved me, I was trying to made it in C++ for a school proyect and I couldn't find the way to do the recursive part until I found this video. Thank you very much!

[@nathanjohnson9715]

minesweeper was actually the very first large-(ish) thing I every programmed. It was for a BASIC class in high school (and no I'm really not that old, it was an outdated class even then). I used a three dimensional array, which actually worked really well for a language like BASIC, which doesn't have objects that can have properties, but each x,y location could have the different properties it needed (revealed/not, mine/not, physical representation) on one of the "layers" on the z axis. It was a fun project.

[@jacobbarbulescu6654]

That’s such a clever solution!

[@nathanjohnson9715]

@@jacobbarbulescu6654 thanks!

[@SteveCirelli]

Such good ideas for coding challenges. Thanks for the inspiration!

[@ekarademir]

I've written my own sweeper game months ago after I saw and inspired by your channel. It's very entertaining to see the similarity of problems you've encountered. I was curious to see how you solved them one by one.

[@TheCodingTrain]

Glad to hear!

[@dualappsgamer]

17:15 "we don't have too much further to go" *length of video*: 53:45

[@ga_per]

I've just programmed a minesweeper in python and I came to YT to see how other people made it, and now I'm watching you coding it in javascript, which is a language that I don't know, but it's funny how the logics behind our both projects are similar, even the dilema about the neighbor (I came across the same problem with the loop)

[@Bolt6265]

Im not sure if anyone has already pointed it out, not that i can immediately see, but splice totally does return the spliced items. The reason it didnt work is because splice returns a new array that contains the item(s), so only splicing one item would mean youd need to just access the first element in the array before looking for your choice index stuff. So itd look something more like var i = choice[0][0]; var j = choice[0][1]; Keep up the good work and sorry if someone has already said it!

[@TheCodingTrain]

Oh, thank you for this excellent correction!

[@renatomonroy9309]

thanks for your time Dan you are a great teacher , I coded this in pygame just using the same logic, it was really easy once you know the syntax, keep up this videos of classic games

[@hqs9585]

Awesome series of tutorials! Great speaker and great attitude, a 10+

[@TheCodingTrain]

Thank you!

[@o0DraastiK]

I've attempted to learn programming for the last 14 years. I'm finally at the point where I can at the very least understand what a line of code I'm typing is doing. I hope one day I will have knowledge like his in whatever language I'm proficient in.

[@JannisAdmek]

this is so entertaining that Im gonna show parts to people who aren't into coding!

[@malik641]

Infinite looping stack overflow easily explained at 46:26 "Hey, neighbor, reveal yourself." "No, YOU reveal yourself!" This guy's hilarious. The best is when he gets a bit frazzled by something. Entertaining for the full hour. I love it. You rock!

[@brocklebeau3007]

All I could think of was the spiderman meme; you! No You! NO YOU!

[@naut_nigel]

"You reveal yourself! No YOU REVEAL YOURSELF!" Omg I have fallen in love with you.

[@json_bourne3812]

Just came across this video, decided to do it myself before watching - took roughly the same time! Had a lot of fun, going to watch you do it now 😉

[@TheCodingTrain]

Curious to hear your impressions!

[@hychhayrith]

thanks sir for your nice code with all js and a very attracting reaction when you code. I really love the way you fix error and your creativeness.

[@lucaspetersen5074]

I don't undestand most of this 'cause I only code in Python (and pretty basic stuff lol), but I love to see your excitement making these videos. Love the channel :D

[@Kaixo]

In the three/ four weeks that I've been learning Javascript, i'd have never thought I'd make super mario in the fourth week... My programming teacher will get a heart attack if I show this to him... All thanks to the wonderful videos on this channel!! Keep up the amazing work :D My teacher showed me a mario project of someone who was a grade higher than me, and now, four weeks later, he will not believe what he's seeing xD can't wait to see his reaction tomorrow xD

[@periklisrips4355]

I'd like to let you know that this was one of your greatest videos.!! Keep it up!!!

[@TheCodingTrain]

Thank you so much!

[@ResanChea]

I tried to fix my problem while making the check neighbors things for like an hour and was unsuccessful, and you just figured it out on the fly, it's just amazing, I'm only watching to the part I haven't done or tried but failed at doing

[@MichaelJones-wb5dx]

This was great to watch! I'm quite new to JavaScript so couldn't follow all of it, but I'm sure when I watch this video again in a month or two this'll make more sense! I enjoyed the energetic way this was presented and you have yourself a new subscriber :)

[@TheCodingTrain]

Glad to hear, thank you!

[@gqoniefh]

Just sub'd your channel. Glad I found it. Why it's good for me: Coding has always been a curiosity of mine. My experience with coding = 1% I can learn and progress quickly through your channel. Thanks!

[@Superslayen151]

Can you do Tetris for the next challenge? I'm brand new to code. I love your channel and I'm learning a lot from it! Thanks!

[@TheCodingTrain]

I've been getting this request a lot, will consider it!

[@lardosian]

You will find a github project where a guy has made it with React..

[@AlgyCuber]

i might try

[@tehfatcoder667]

That checkNeighbors function helped me make chess Game thank you so much.

[@jamiedonaldson794]

Nice when I was programming chess I used it too.

[@BenjaminUliana]

So awesome a channel. You are like the Bob Ross of coding!

[@ノラ-h3q]

I want that transparent cap D:

[@aryamankejriwal5959]

ngai noriko forget the cap, I want the whiteboard paint! A huge white board!

[@loxiurasitz6248]

That transparent hair is also very cool.

[@parley5101]

This is great! What's funny is that I made this game before I even saw this video and it is actually pretty similar to yours. Also, there is this game called MasterMind (it is a board game) but I would really like it if it was put on a screen.

[@logic_xxmobxx9636]

I coded this myself and added a concept of shield to the game.. looked online to see how others coded the game. Was not disappointed

[@darkridge]

A one... two-- A one... two... three... four... Half a bee, philosophically, Must, ipso facto, half not be. But half the bee has got to be Vis a vis, its entity. D'you see? But can a bee be said to be Or not to be an entire bee When half the bee is not a bee Due to some ancient injury? Singing... La dee dee, one two three, Eric the half a bee. A B C D E F G, Eric the half a bee. Is this wretched demi-bee, Half-asleep upon my knee, Some freak from a menagerie? No! It's Eric the half a bee! Fiddle de dum, Fiddle de dee, Eric the half a bee. Ho ho ho, tee hee hee, Eric the half a bee. I love this hive, employee-ee, Bisected accidentally, One summer afternoon by me, I love him carnally. He loves him carnally, Semi-carnally. The end.

[@lokeshchandak3660]

I want to react amazed, but I am scared...

[@charliejulietdavies8715]

i was inspired when i first watched this video to try it myself, but since you went with the bees theme i tried to make beesweeper with hexagonal tiles. it's working now but it was a NIGHTMARE to get that grid behaving itself

[@staticvoidsolutions4998]

Following in this vein, the old classic, Battleship, would be interesting to implement as well.

[@Tracks777]

I enjoyed your video :) Keep it up!

[@tilmanahlers2095]

You are a great presenter & entertainer! Well done! There is just one little thing I would change instead of writing if( sth === true){ if(sthElse === true){ //do sth } } one could write: if(sth === wrong){ return; //in the loop continue; } if(sthElse === wrong){ return; //in the loop continue; } //do sth. The advantage of the second approach is that there isn't so much nested coding. But how I have said: Great Job!

[@AdriGomezD]

Best programming teacher ever💪

[@TheCodingTrain]

Thank you!

[@samanthacrothers7088]

I love how you do the what it does and then decide how it does it. I hit a road block in programming because I would always write the object and then write functions about that object and then implement those functions if and when it was needed. But to think of telling the object what needs done like ball.bounce and then write the function for bounce is a ton easier to think about in your mind. No judging people i'm self taught. Only wish I have is that you would show us some regualar javascript without the p5 thing.

[@Tracks777]

Awesome video,Keep it up!

[@mariohernandez6590]

You could turn the (x,y) coordinate into a string and map it to a cell object. This way you can use a Map data structure to check the click much faster!

[@veltedingel]

I love to listen to this in the background while i try to code the same in c#

[@maoryatskan6346]

I like the idea that you make mistake on purpose so students will learn, but in my opinion you should also educate to read the docs like in the scenario of the "splice" function. Keep up we love your content.

[@AndrewBlechinger]

I thought this was going to be about solving it efficiently (turns out Minesweeper is NP-complete!) but this is interesting too.

[@happylittlemonk]

at 20:50 line 38, you should return and exit the loop once you found the cell. It is more efficient

[@AnimilesYT]

Random programming thought: let's take this loop: for (int count = 0; count < size; count++) let's compact it: for (int c = 0; c < s; c++) And there you have it. The language C++ And which character do we get when we combine the ++ together? A # of course. Because C# is an evolved form of C++. Therefore, C# is another way of writing 'count++'

[@adud6764]

I take issue with the mousePressed() function at 20:13. Wouldnt it be better to get both mouse positions (relative to the grid) divide them by the width and use the resulting double (rounded down to an integer) as the index for the array? This should work, right? Suppose a mouse click at x=110 and y=90 with a cell width of 50. That would be : i(x) = 110/50 = 2. ... => 2 i(y) = 90/50 = 1, ... => 1 array[2][1] That should scale better with a larger grid as it cuts down on calculations.

[@doubledeltas]

0:47 Actually, in the most of Minesweepers, mines are created when you first click.

[@ArnoldsKtm]

@Hex96 what...

[@misterhiker]

@@ArnoldsKtm , 구본웅 is partially correct. The mines are created before you click, however if you click on a square that contains a mine on your first click, the program changes this to a non mine square.

[@eballeste]

not sure what the mechanics are but definitely first click will never be a bomb

[@mohitbhatia1994h]

never seen someone so happy while fixing the bugs

[@hurnaumkaushik1055]

Thank you so much for that little tip on the floodfill( ) error

[@seancpp]

It’s every programmers last words: “Okay we’re most of the way there!”

[@jollyyeholiver1578]

Should add a function that always returns empty cell for first pick.

[@RickMeasham]

I think this is how the original works. It only does the population after the first click

[@MrHumanwarrior]

Love your energy.

[@fraxinellla]

1:20 I love that transition...

[@phos4us]

I'm two years late to the party, but I made my own Minesweeper using python and the pygame module. Inspiration :)

[@spicybaguette7706]

those bees you've drawn on the whiteboard look more like baguettes, but really short ones

[@aitorperez6105]

"I don't know what's going to happen next, but I'm just gonna get started" Mr. Shiffman

[@TheNewGreenIsBlue]

@46:45 If I'm correct, Flood fill shouldn't fill NON-adjacent cells (diagonal cells). You COULD still do a loop, but do them as two loops separately for each plane... looping through x, and then through y. (x-1, y), (x,y), (x+1,y) and then (x,y-1),(x,y),(x,y+1)

[@camelcase9225]

It's cool you're attaching a class' methods to the prototype now, but maybe it's time to just move into ES6's arrow functions ^^

[@selimcalskan9442]

46:20 no need to check whether it is a bee because if the value of the cell is zero, that means that cell already has no bees around.

[@reading-with-dad7]

This guy is great!

[@chromosoze]

instead of creating a prototype function to check where the mouse is pressed, i just took the offset of the mouse on the canvas, divided it by the width of the grid, and rounded it down. Then, I used that number to get the specified square.

[@ethankwan6786]

17:11 Dan: We're really moving along here! Me: *looks at timeline*

[@flameofthephoenix8395]

0:37 Nice! To make things a little more visually interesting you could have each cell that's not a bee contain eight honeycombs then instead of a number of how many bees are nearby you just fill in honeycombs with honey for each cell nearby.

[@porwater95]

Daniel, I LOVE YOUR VIDEOS! I have learned so much from your videos. Thanks!! Do you have a playlist about object oriented programming? I want to learn that properly.

[@TheCodingTrain]

Yes, here is one for Java / Processing: kzbin.info/www/bejne/j5TFlJmhgd-arNU I also discuss this in the foundations of JS a bit: kzbin.info/www/bejne/bpuThnefg5ygr5Y And more on prototype: kzbin.info/www/bejne/noTCiKShrrqUnpo

[@porwater95]

Thanks, I'll look into them!!

[@ElTrabajo88]

The David Copperfield of JS. Awesome!

[@mullen1116]

I like the video but I can't help but think it would be more efficient if you took the x and y coordinates of the mouse press and used a function to map those coordinates to a cell in the grid instead of iterating through the whole 2D array each time. Just a thought! Cheers

[@ZickPranks]

Would love to see you code a roulette table!

[@erikgratz5539]

also, you could avoid the whole Options array by subtracting 1 from your loop iterator every time a cell already has a bee in it. Much cleaner.

[@ryan-heath]

Erik Gratz huh, I don’t follow it, care to explain?

[@erikgratz5539]

@@ryan-heath Sure! In the loop designed to designate random cells as having a bee in them, add a conditional that checks if the cell is already a bee, and subtract 1 from the iterator variable. For example: for (let n = 0; n < totalBees; n++){ [select a random cell] if( [cell is already a bee] ){ n = n-1; }else{ [make the cell a bee] } } My syntax isnt perfect because I dont remember this video perfectly, but thats the basic idea. You can change and effect the iterator (the variable declared in the for loop) inside the for loop, and by subtracting one from it when the randomly selected cell has already been touched by the loop, you ensure that the exact number of bees will be set, and no less.

[@ryan-heath]

Erik Gratz ah I see, but that loop might run forever (theoretically). Think about when you have a 10x10 grid and want to select 90 random bees. The chance you pick an already occupied cell, becomes almost 1.

[@erikgratz5539]

@@ryan-heath I think you're solving a nonexisttent problem with that one. Even on a 10x10 grid where you are selecting 99 bees, the system can run that loop ten million times a second. Even if the odds of finding an empty cell are incredibly small, this will always find it in 1-3 seconds of real time at most. For a truly infinite loop you would have to request more bombs than spaces, which should have its own error logic anyway. In conclusion, in the real world, its a nonissue, so I wouldn't spend time solving it.

[@ryan-heath]

Erik Gratz 1-3 secs is an awful lot of time in CPU land 😬 I’d rather don’t spent cpu cycles for nothing, when there is a simple solution to get the task accomplished. It might be an overkill for this simple app, yes, but it’s classic to randomly select items from a set in O(N) time.

[@Rumplestiltzchen]

I love these videos

[@mathistenberken1188]

OMG I love ur vids, nice inspirations for my allday stuff...

[@TheCodingTrain]

Thank you!

[@mathistenberken1188]

I don't know whether you did before, but if not, you could do Flipper in one of the next coding challenges to have a more challenging project

[@gizmosandgadgets5751]

very nice, but I beelieve that one of the caveats of minesweeper is that the generated map must start with a zero on first click (so long as that's possible)

[@indigoUanP]

it's comedic how even after watching someone MAKE minesweeper, i still have no idea how it works

[@oFoxo1]

46:46 check this frame there is a mistake in the flood fill function! the cell on the bottom left from where you clicked shouldn't be revealed..that's something tricky to achieve tho :/

[@TheCodingTrain]

Oh! I'll take a look. . .

[@alex95sang52]

Instead of revealing the 8 neighbors, you only reveal the 4 direct neighbors. I think this fix would work

[@thfreakinacage]

I guess you could add a check which makes sure the Abs() of the two offsets are not equal? This I believe would only then call the function on neighbours where one of the offsets is 0 (ie: above, below, left, right).

[@thfreakinacage]

I tried my own idea above and it sort of worked, but I realised a problem. If a diagonal is a number then it SHOULD be revealed. Only when a diagonal is empty (0 neighbors) should it be skipped in the flood fill. So instead, I tried this: if (abs(xoff) != abs(yoff) || (abs(xoff) == abs(yoff) && neighbor.neighborCount > 0)) { if (!neighbor.mine && !neighbor.revealed) { neighbor.reveal(); } } There might be a nicer way to add my extra if statement, but I'm basically saying "If the offsets are not equal (IE: Above, below, left, right) then reveal, or if they are not equal but the diagonal neighbor has more than 0 neighbors, reveal it". From a quick test it seems to be behaving correctly, but if anybody spots a problem, please let me know :D

[@jonasnicolaysen8019]

i understand that this is late. but the reveal in that frame is correct as far as I know mines....beesweeper

[@MrPhantomdc]

Great job man )

[@NonTwinBrothers]

That you! I've been waiting for a challenge like this.

[@TheCodingTrain]

Glad to hear!

[@williamgaze1262]

This is awesome subscribed.

[@shilpakhadela8856]

Bro is 50 and his coding skills are still so much more superior to mine. Respect ❤️🗿🗿 Love your vids ❤️❤️

[@toastyPredicament]

thank you now back to where I was an hour ago.

[@limeondisguise3114]

"We don't have much farther to go" He says, 35% of the way into the video

[@PauloSousa1]

Thanks, i get your neighbor code, to create my Minesweeper game project in Java. Thanks, keep the good work. Congrats from Fundão , Portugal. Academia de Código Rullz

[@TheCodingTrain]

Thank you!

[@davidm.johnston8994]

Hey man, I really like your channel, and although I always liked coding in general, this is what got me into actually opening an IDE again and code some stuff. I'm a student in CGI and as so I need to get myself more familiar with python, so I thought I could make some fun projects and games to do so. So much question is : I really enjoy your "challenge" format and was wondering if you would care to try and do a coding challenge in python. Maybe using pygame, or some other library... Or maybe from scratch (I don't know if this is feasible).

[@davidm.johnston8994]

So, does it mean that you could do it?

[@Skwiggs]

A super easy way to get the count of neighbouring bees on a cells would simply be to +=1 each neighbouring's cell count when placing a bee. That way you don't need to go through the array twice

[@TheCodingTrain]

Great tip!

[@mayrekirgis95]

great video!

[@mattd390]

Great video!

[@kevnar]

Don't worry about copyright violations, Daniel Shiffman. I don't think your singing is good enough to trigger KZbin's flagging bot.

[@TheCodingTrain]

😂I could not agree more.

[@VictorZamanian]

Yeah "new Array(cols)" doesn't give the array a certain number of elements to start. It just gives you a new array with a length of "cols", but all the elements are empty (not null or undefined, but empty). It merely sets the "length" property.

[@richardhawkes]

I have no interest in coding this but I stay because you're so fun to watch!

[@TheCodingTrain]

That's so nice, thank you!

[@truonghongnhung]

I wish this tutorial was in Python, :)))))))). Love the explanation so much, :x

[@oooSIDEooo]

Says now we do not need to go much further at 17:17 but the video is still 53:45 minutes! Good time management bro ^^

[@simonmellberg3869]

I think the flood reveal in this program reveals over diagonals. Which I don't think is in the original game. Nonetheless a very entertaining video. Thank you!

[@debdattamukherjee717]

i doubt i will be able to code like you even when I retire!