Coding Challenge #71: Minesweeper
In this challenge, I attempt to code the classic game Minesweeper in JavaScript with the p5.js library. Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #70: ...
🎥 Next video: • Coding Challenge #72: ...
🎥 All videos: • Coding Challenges
References:
📑 Minesweeper on Wikipedia: en.wikipedia.org/wiki/Mineswe...)
🌊 Floodfill on Wikipedia: en.wikipedia.org/wiki/Flood_fill
🐱 Minesweeper suggestion on GitHub: github.com/CodingTrain/Rainbo...
Videos:
🎥 Prototypes in JavaScript: • 9.19: Prototypes in Ja...
🎥 Inheritance with Prototype in JS: • 9.20: Look away! Inher...
🔴 Coding Train Live 92: • Live Stream #92: Mines...
Related Coding Challenges:
🚂 #3 The Snake Game: • Coding Challenge #3: T...
🚂 #46 Asteroids: • Coding Challenge #46.1...
🚂 #67 Pong!: • Coding Challenge #67: ...
🚂 #91 Snakes & Ladders: • Coding Challenge #91: ...
🚂 #115 Snake Game Redux: • Coding Challenge #115:...
Timestamps:
0:00 Welcome!
1:26 All aboard!
2:36 Explaining the logic of the game
4:31 Defining the cells
11:03 Let's make a show() function using object protypes!
17:30 Checking if mouse is inside a grid
20:15 Revealing the cells after clicking
22:58 Checking how many bees are neighboring a particular cell
34:20 Starting to work on the game mechanic!
41:50 Let's implement floodfill!
48:45 Defining when the game is over
51:11 Minesweeper!
53:12 Thanks for watching!
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: kzread.infojoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#games #prototypes #floodfill #javascript #p5js
Пікірлер: 529
When starting a new game and clicking on a random tile: To bee or not to bee. That's the question
@Bunny99s
6 жыл бұрын
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
4 жыл бұрын
I'm gonna ask you to get out
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!
"You reveal yourself! No YOU REVEAL YOURSELF!" Omg I have fallen in love with you.
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
7 жыл бұрын
Thanks for the nice feedback!
@MrCmon113
5 жыл бұрын
Every human is equally a human.
17:14 "We don't have too much farther to go" **video is 53 minutes long**
@ashish2628
5 жыл бұрын
came looking for this comment at 17:14 haha
@ridlr9299
4 жыл бұрын
just came down here to say the same thing lol
@LaviArzi
4 жыл бұрын
Same, one year later
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!
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
7 жыл бұрын
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
7 жыл бұрын
Great point!
@narkocat
7 жыл бұрын
Nice advice! Thanks!
@skylerockspecial
6 жыл бұрын
David was looking through the comments to see if someone noticed, looping through all cells to check if it was clicked...
@drewchie
6 жыл бұрын
i️ dont speak code please translate
Dude, your my fav channel for coding i have come across. This would be my channel if i dod KZread. 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!
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
7 жыл бұрын
Yes, I really should have done this!
@Chayat0freak
7 жыл бұрын
The Coding Train that's how real minesweeper does it
@trouncerrredits
2 жыл бұрын
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.
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
8 ай бұрын
can you make a agario liek game im fan
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
2 жыл бұрын
All I could think of was the spiderman meme; you! No You! NO YOU!
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].
Man making learning new stuff fun again. Thanks and not just coding but thought prep.
17:15 "we don't have too much further to go" *length of video*: 53:45
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!
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!
You are the most fun way to learn coding. Thank you for your free and fun videos
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
Such good ideas for coding challenges. Thanks for the inspiration!
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)
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.
this is so entertaining that Im gonna show parts to people who aren't into coding!
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.
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
Awesome video,Keep it up!
Awesome series of tutorials! Great speaker and great attitude, a 10+
@TheCodingTrain
6 жыл бұрын
Thank you!
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
7 жыл бұрын
Glad to hear, thank you!
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
So awesome a channel. You are like the Bob Ross of coding!
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
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!
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
7 жыл бұрын
Oh, thank you for this excellent correction!
I'd like to let you know that this was one of your greatest videos.!! Keep it up!!!
@TheCodingTrain
7 жыл бұрын
Thank you so much!
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
2 жыл бұрын
Curious to hear your impressions!
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
7 жыл бұрын
Glad to hear!
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!
I enjoyed your video :) Keep it up!
Love your energy.
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.
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
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!
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
7 жыл бұрын
I've been getting this request a lot, will consider it!
@lardosian
5 жыл бұрын
You will find a github project where a guy has made it with React..
@AlgyCuber
5 жыл бұрын
i might try
I want that transparent cap D:
@aryamankejriwal5959
7 жыл бұрын
ngai noriko forget the cap, I want the whiteboard paint! A huge white board!
@loxiurasitz6248
6 жыл бұрын
That transparent hair is also very cool.
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
4 жыл бұрын
I want to react amazed, but I am scared...
Great job man )
It’s every programmers last words: “Okay we’re most of the way there!”
I love these videos
This is awesome subscribed.
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
This guy is great!
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!
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.
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.
I love to listen to this in the background while i try to code the same in c#
Thank you so much for that little tip on the floodfill( ) error
at 20:50 line 38, you should return and exit the loop once you found the cell. It is more efficient
Great video!
That checkNeighbors function helped me make chess Game thank you so much.
@jamiedonaldson794
4 жыл бұрын
Nice when I was programming chess I used it too.
"I don't know what's going to happen next, but I'm just gonna get started" Mr. Shiffman
never seen someone so happy while fixing the bugs
Following in this vein, the old classic, Battleship, would be interesting to implement as well.
great video!
I thought this was going to be about solving it efficiently (turns out Minesweeper is NP-complete!) but this is interesting too.
OMG I love ur vids, nice inspirations for my allday stuff...
@TheCodingTrain
7 жыл бұрын
Thank you!
@mathistenberken1188
7 жыл бұрын
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
it's comedic how even after watching someone MAKE minesweeper, i still have no idea how it works
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
6 жыл бұрын
So, does it mean that you could do it?
I'm two years late to the party, but I made my own Minesweeper using python and the pygame module. Inspiration :)
How would you handle maximum recursion limits when scaling really big?
I currently don't have a computer but I want to get some code time in. Is there a specific android application that you would suggest to code?
17:11 Dan: We're really moving along here! Me: *looks at timeline*
"We don't have much farther to go" He says, 35% of the way into the video
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
7 жыл бұрын
Yes, here is one for Java / Processing: kzread.info/dash/bejne/i5eWxcikfN3NptY.html I also discuss this in the foundations of JS a bit: kzread.info/dash/bejne/ap5kt6aifprTqZc.html And more on prototype: kzread.info/dash/bejne/moeTudOkqbjHmJs.html
@porwater95
7 жыл бұрын
Thanks, I'll look into them!!
Can someone explain why I can't do non-square grid? it doesn't work, canvas is rectangle form but squares do not draw there. Why I have proper loops everywhere
I am trying to do this too but when i create the array from what ive seen in the first 12 minutes the grid is in the topleft corner and i cant see if every square has 4 lines
1:20 I love that transition...
Best programming teacher ever💪
@TheCodingTrain
7 жыл бұрын
Thank you!
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 ^^
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.
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 ^^
The David Copperfield of JS. Awesome!
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.
When i click on a video my mind just instantly goes: "👏now what i👏 need to 👏 do"
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.
Notisquad! :D
Nice! Can we perform floodfill without using a recursive function?
Have you coded some pratical application like this using linked lists or trees as data structures?
Should add a function that always returns empty cell for first pick.
@RickMeasham
4 жыл бұрын
I think this is how the original works. It only does the population after the first click
thanks alot
Hi I'm new to this why can i not see the graph in my browser? I tried chrome and safari. if I console.log and inspect I can see my text in the console. I am using vs code. thank you
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
7 жыл бұрын
Thank you!
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
can you code for all the possible permutations of a given string?
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.
I am getting an error that says "Uncaught TypeError: grid[i][j].show is not a function (sketch: line 36)." I am new to p5.js, so I am not sure how to fix this. Please help.
Is 3D texturing on 3D objects possible with p5.js?
why i click once and almost every empty cells would be open. it would easy to know the bees. how to deal with that? change the number of the bees or using other codes?
those bees you've drawn on the whiteboard look more like baguettes, but really short ones
@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)
thank you now back to where I was an hour ago.
Why write the Cell.prototype methods separately and not as a part of the Cell object constructor? Is it because you get more neat looking code? I've been trying to figure this out... And even after looking at the separate prototypes video I don't quite get it.
@MrKraignos
6 жыл бұрын
The prototype chain in JS is the closer you can get for inheritance you find in OOP, before ES6 at least. By declaring your function on the prototype, you make it available for all instances in one shot. It's kinda cached. If you do it in the constructor, it will create a new one each time you call the constructor (obviously). It will still work though, but it can impact performance, especially in this case where he makes a 2D grid (imagine a bigger grid). There's a lot to understand about prototypes, but I hope that kinda helps.