Build Minesweeper with JavaScript

We are going to build the Minesweeper game functionality with vanilla JavaScript using recursion
Ania's KZbin Channel:
/ aniakub%c3%b3w
Ania's Twitter:
/ ania_kubow
Code:
github.com/kubowania/minesweeper
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Course Links:
www.traversymedia.com
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia
Timestamps:
0:00 - Brad's Intro
0:50 - Ania's Intro
1:11 - Recursion explainer
04:06 - Setting up our HTML
04:10 - Styling our Grid in CSS
07:20 - Setting up our JavaScript usng the DOM EventListener
08:47 - Creating our Board using .createElement() and .appendChild()
16:57 - Adding numbers to the board using Modulus and .contains()
25:21 - Checking what is under a Square usng .getAttribute() .innerHTML and .add()
31:33 - Checking neighbouring squares using recursion and setTimeout
42:56 - Adding flags to squares with a left click
44:46 - Checking for wins

[@iKevin090]

wow she explains every single thing she writes so smoothly. great.

[@aniakubow]

Thanks Julio! I try make things as easy as possible to explain

[@MULTICODE]

@@aniakubow I subs to your channel. You got good contents too. Keep on growing 👍

[@peristiloperis7789]

@@aniakubow love you and your content!

[@TheNewton]

great speaker with good audio; I don't have to turn the volume to max and cover my ears to hear or try and read the captions and the code at speed.

[@whipstitchwebwork1383]

Except that minesweeper should never be built in JS.

[@awekeningbro1207]

Brad you should invite CJ from "coding garden" too.

[@suparnobhattacharya6345]

also the coding train too

[@TraversyMedia]

Im talking to him

[@UpTballA]

@@TraversyMedia Hey man any chance to get funfunfuction for one last video please? :(

[@TraversyMedia]

UpTballA i doubt it. Sadly I don’t think hes doing content anymore. I could ask him though.

[@prasadbroo]

@@TraversyMedia hey Brad plz invite coding train

[@brilliantatosam6882]

From absolute beginner to intermediate confident web developer, who is inspired to up the game. Thanks to Brad for his crash courses. I will be very sure to pay this kindness forward when the time comes.

[@DesignfulDev]

Hey Brad! Just a shout out to let you know the Guest content is great! Hope you and your family are doing well! Take care, stay safe! You're a legend!

[@TraversyMedia]

Thank you. Glad you like the content. We are ok. I am having some pretty bad balance problems, started a new medication so hopefully it works

[@popop72276]

@@TraversyMedia Take care.

[@king-manu2758]

@@TraversyMedia get better!

[@bmac-cz6rk]

@@TraversyMedia Praying for you Brad. We love you!

[@hamzajirah4856]

Having guest creators on this channel is by far one of the best things I have seen Mr Brad do. Thanks a bunch, Brad.

[@ovuokeaghwotu2389]

A different and engaging teaching style. Wow. Thank you 🙏 for taking the time to do this. I like the way the styling is explained line by line. Subscribed to her channel and turned on notifications.

[@Senshiii99]

Finally someone I know who knows how to play minesweeper. Loved the tutorial. ❤

[@danielawg]

Thank you Ania, and thank you Brad to introduce us to her! I've been looking for tutorials on making classic games in javascript for a long time and I never got to her. Great content !!

[@aniakubow]

Hope you enjoyed :D

[@DentedCode]

I never came across Ania's channel before. I like the way she presents and the content. I will definitely go through her channel.

[@joychisenga5821]

Wooow! It's amazing that all these wonderful coders are willing to create content for Brad, Thank you guys you ROCK!!!!

[@mattkratos]

I shared this video with all of my team of 4 just because of Children's Mode. We play it almost every day. It's wonderful. Keep up the great work Ania, and thank you Brad for your guests.

[@shwackthenoobsac]

You guys are awesome. When I was getting my nerve up to apply to dev jobs, Ania's videos really inspired me. I didn't find Traversy Media until after I was employed, but I'm glad I did. I really enjoy and learn from your content. Thank you.

[@alexandrurobert4600]

I discovered this channel about a week ago, when I came across a really nice vue + express.js tutorial. What I gladly remarked and love to see is the admirable amount of passion and care you put Brad into every single video I have watched so far from you. Despite your personal problems, you deliver excellent content which motivates me a lot as a college student. Thanks for that and keep on!

[@marshallgraphic]

I was inspired to modify this game from Ania's code: github.com/mgraphic/Javascript-Minesweeper-Game-Demo Features: * Retro Minesweeper look * Two ways to win, uncover all valid tiles and/or flag all bombs correctly * Timer added * Game restart button * Game settings to change game board size and bomb count * Customizable configuration in one place * Customizable SASS CSS options

[@Proviper666]

very nice. Bus is ur revealed cell color same as closed ones?

[@marshallgraphic]

@@Proviper666 they have the flag on it

[@andres12122]

Brad thank you for all the quality content you always deliver, I really hope you can get back soon!

[@OskarBravo]

Thanks for dropping in with a great tutorial! Look forward to seeing more JS games.

[@aniakubow]

Thanks for watching Oscar!

[@bmac-cz6rk]

Ania has truly grown so much as a content creator. I watched her older videos and she FLEW through everything, so if you weren't familiar with something you would miss it. But now she goes over everything she does, which is so amazing to see. Awesome to have her here on the channel, and I love the community of devs we have here. Hope everyone is staying safe!

[@avi12]

14:12 I gotta say, this is the coolest & simplest way I've seen to shuffle an array

[@softwarelivre2389]

I always thought it would freeze the JS runtime because the spec says that the sorting method must be stable, otherwise the sorting function would run forever. I could not be more wrong.

[@chubbyBunny94]

Mine doesn't really shuffle well - there's an obvious pattern

[@mickaelrichard7255]

if you check the js card game from web dev simplified, he explains why this is actually not the best way to do it and why we should avoid this method :)

[@FlorinPop]

Ania is great! Love her games in JavaScript! 😃

[@aniakubow]

Thanks Florin!

[@abdishakur2489]

Wow am amazed with her clean code techniques with Simple explanation & step by step procedures. U deserve my sub,loved it 😍.

[@fififinance7469]

This was exactly what I was seeking. I subscribed, and beyond that, will be searching for other videos on your channel that are relevant. Your style is excellent. Thanks!😀💪

[@sanghvian]

This tutorial is the reason I finally learned how to play this game. Amazing work !!!!!!

[@TheNerdyDev]

Awesome as always, Ania. I am waiting for The Net Ninja 💥

[@aniakubow]

Thanks so much!!!

[@Keridil1]

This tutorial is amazing, and I've learnt a lot with it, many thanks! Also, I don't know if this has been addressed before, but the way this code works makes it imposssible to check square 99. This happens because, in //add numbers, specifically at bomb checks 5, 7 and 8, "

[@mickaelrichard7255]

i think its because of this line : if (i < 89 && squares[i + width].classList.contains("bomb")) total++; => this line check the bottoms squares so i think its shoud be

[@maheshnahak9510]

I'm SOOO GLAD to see this video here! Thanks!!!

[@aniakubow]

yeaaaa! You are awesome, thanks Mahesh

[@ThalesTheDuck]

I literally can hear your intro in my dreams and inside my head at random moments of my day.

[@ahmad-murery]

Brad says he is taking a break, not us ;) You're doing invaluable efforts here by connecting us to all these great developers which sometimes it's hard to find. And thanks Ania, you did it very well

[@JuanMoisesTorrijos]

This is one of the best tutorial videos I have seen, just for the extrémele well explanation. Excellent!

[@aniakubow]

Thanks so much Juan!

[@subhamray1203]

Never knew there's a channel so good for game development! Maybe I never searched for them, thanks Brad for bringing in Ania to your channel. Watched it,loved it & subbed already❤

[@aniakubow]

Yeaaaa will look out for you Subham :)

[@JokerFey]

pls bring more brad so far I'm loving all this guest i haven't have this much fun since last month.

[@abhijithchandran5744]

I really love the way she talks. Thank you Brad for introducing such an amazing guest to us.

[@digigoliath]

I love Ania's British accent.

[@aniakubow]

Thanks so much Abhijith!

[@DailyIntern]

Thank you Brad for supporting other youtubers, you are one in the millions here on internet.

[@DennisIvy]

Awesome video Ania! Glad to see you here :)

[@aniakubow]

So great to be here!

[@mylesdavies9476]

So glad you pointed me in the direction of Ania's channel, really good content, good to see something a bit different!

[@salvadorroibon]

Awesome! Thank you Brad and Ania of course. Already subscribed to Ania's channel!

[@mtshgaming292]

Hi brad just want to say that your guest creators were amazing like you i love your vids

[@rameshsrivastavachandra]

Best game teacher ever, great work @Traversy Media

[@neeraj1bh]

This is a new teaching style I learned. 😅☮️ Subscribed love the style. 👍🏻

[@aniakubow]

Thanks for subbing Neeraj - I will look out for you

[@neeraj1bh]

@@aniakubow Anytime 👍🏻

[@devvx-fe-gu1d3d0g6]

You know why the Indian names are leaving hearts right? Pls response 😂

[@DonsTileAndStone]

Yes Brad, this is really a treat to have Guest Speakers, Thanks from a new a new web dev learner

[@davidw5556]

It's so interesting to be able to understand and see how else you can implement our javascript besides the normal web dev stuff!

[@vijaynavale3919]

We are actually loving your guests coming videos.

[@RufusVidS]

That square shuffling technique blew my mind!

[@mohamudsharif8119]

Good to have you here and learning a lot.

[@alexkey9372]

Love your work and the guest creators Brad! She really explained everything so smoothly. You may also approach William Candillon from "can it be done in react-native"

[@abbasmohamedwalaal5753]

brad is really building technology community, he is helping every person to develop his career as a developer

[@rdavid369]

I'm enjoying the guest content alot. Nice work you guys!

[@michaeljudge5063]

Sweet never knew about her channel and I was litterly just searching for video games in javascript right before you uploaded this

[@aniakubow]

no waaay! It's FATE!

[@jetzemeilink]

Thanks so much awesome tutorial. For the ones interested I created a method to add color classes to the squares so you can then give them different colors in your css file. I recommend placing the function after you fill the innerHTML with the total. Here is the code for the function: function addColorNumber(square) { const colors = { 1: "green", 2: "blue", 3: "light-blue", 4: "yellow", 5: "orange", 6: "red", 7: "purple", 8: "black" } currentNumber = square.getAttribute('data') if (currentNumber !== null) { square.classList.add(colors[currentNumber]) } }

[@ricardoneri4861]

Explaining recursion with ice cream, brilliant :)

[@lardosian]

Never knew of this channel before, thanks!

[@Guybrush369]

Great explanation and amazing visualization. I've yet to see a better explanation of code. A small criticism though: I think the total function could be improved. Especially you shouldn't use the numbers in the if statements, since they are dependent on the assumption of playing on a 10x10 board. Instead they should be calculcated using the width and widthSquared variables. Cheers

[@rajeshbudhathoki7888]

I was expecting her! 😍😍 Thanks Brad! 🙏🙏

[@aniakubow]

nice to see you here Rajesh :)

[@rajeshbudhathoki7888]

@@aniakubow I am honored with the reply. 😇

[@bunnybloods768]

I already saw this tutorial on her channel.Thanks for guest

[@briandesign]

the OG game to play when you're bored

[@322ss]

Thanks for the video! Not that I know JavaScript much at all, but IIRC win condition for original Windows Minesweeper doesn't require flags, only that amount of unopened tiles matches mine count = you have opened all the tiles not containing mines.

[@SageTravels]

Awesome. Thanks for bringing her.

[@IacopoCutino00]

Wow this is great tutorial. Everything is explained very well!!

[@MissKetchum14]

This was so much fun, thank you!

[@codewithkg9096]

I just thought that from tomorrow I should move towards react js. But Brad is like hold On...I have another project for you🤣🤣🤣❤❤❤

[@GoBeyondCode]

she helped alot with a project i was struggling with

[@shlemekian]

Ania is a legend. So cool to see her on this channel, doing her thing.

[@awekeningbro1207]

She is a great content creator. I have been watching her js game vids for months now..

[@makeithappen5846]

Excellent video. You explain things very well!

[@sushmita-365]

She is explaining everything. Great!!

[@Danachew]

Fellow coding gal ftw! I've always wondered about what sort of games you could make with JS, so this super interesting. Also I can definitely use a in depth lesson on recursion ;)

[@aniakubow]

YEAAAAAA! Im thinking of doing more funny algo ones, have a Binary Search one on my channel

[@kaushikgarkoti9357]

Thank you Ania for such a great tutorial, and thank you brad @Traversy Media , because of you i am able to understand this code and have the ability to customize it further .. without your tutorials all of this would have made no sense.... Hope everything is fine with you and your family.. take care.

[@anshitmishra]

Thank you so much for these types of videos

[@ali8mubarak]

I like the way she explained. Thanks Brad

[@RufusVidS]

I enjoyed the video very much, and was happy to see using the "width" variable instead of a constant value, but then I realized all the cell analysis logic depended on the 10x10 grid, so the rest of the program won't work properly with a change of width. (Which should probably be called 'size' because a square array is assumed).

[@obi-wankenobi8237]

Are you referring to if

[@RufusVidS]

@@obi-wankenobi8237 Yes, they are all what I would call "magic" numbers. I've actually taken this code as a basis, but made a lot of changes to allow changing the height width and bomb count dynamically (plus some mouse-click changes) I'll try to post it somewhere accessible.

[@obi-wankenobi8237]

@@RufusVidS Yeah, I noticed that too. It would be nice seeing your code! Btw do you know why she said setTimeout is really important and what does return do at 27:48? I really appreciate your help.

[@RufusVidS]

@@obi-wankenobi8237 The timeout prevents those actions from happening immediately, and effectively schedules it after the other events in the event loop, so the current event will complete and exit. It may be just responsiveness, or it might actually effect the logic evaluation. And the return you ask about causes the function to complete immediately because we are done with that cell, otherwise it will execute the code after it in the function that are not needed/wanted for the current cell.

[@obi-wankenobi8237]

@@RufusVidS I see. I understand the setTimeout now. I still have one question about that return statement from earlier. Isn't the rest of the code in an else statement, so it wouldn't execute anyway? Or do we still need that return statement?

[@Uniqflav]

I love Ania’s tutorials, she’s the best

[@aniakubow]

Thanks Flavia!

[@yokingdom9936]

There is also Steve Griffith, i don't know if this guy would be interested in making a video but his content is pure gold regarding javascript.

[@JamesQQuick]

yooooooo!!! What?!?! this is amazing!

[@letsplaythegame3]

Wow just seeing her in your channel I already decided to subscribe and I was not disappointed when I saw her channel.

[@aniakubow]

Happy to have you there :)

[@nishchithrao7135]

Its great to see how you can build great games without using canvas!!! Yay!!

[@microwavecoffee]

Never thought I'd see comedy in a coding tutorial. Great vid.

[@cesarperalta4959]

Damn!! That's some ninja vanilla javascript coding skills

[@abhinav.sharma]

Hey Brad! Really enjoying this new direction this channel has taken. All these awesome dev creators! Hats Off! I nominate Jeff from Fireship.io, Kevin Powell, John Smilga, Colt Steele! 💕💕💕💕💕💕💕💕💕💕💕💕💕

[@algeriennesaffaires7017]

I never heard about her ill subscribe to her channel now, i love British accent, Hi from Algeria

[@CatDadPlaysGames]

Great tutorial! My only nitpick is that I'm pretty sure you can win minesweeper without marking any flags. I think the actual win condition (traditionally, at least) is uncovering all the squares that are not bombs. But that's a tiny nitpick. This could just be a preference choice as well.

[@JoseMartinez-md4if]

Wow, she is impressive! You won't kidding when you said you had hidden gems in these feature series.

[@chntrks]

Thank you Brand , thank you Ania

[@11vag]

Hey, glad to see you here Ana!

[@aniakubow]

Happy to be here! Thanks for the warm welcome

[@TheJoshgol]

Smart way to shuffle the array!

[@soulseller1838]

Love you both!!

[@bhatnagarcapital]

Brad , we need an Omeggle clone.It would be so so cool .Also , this one is great.

[@AlbertEinstein-um3vq]

Thank you Mrs, We need many more people like you in our high-scools to teach students... Thank you again ! It was a pleasure to follow that course. In french i'll say "Bravo !" All my best regards to you! Alan ps. i'm auxiliary teacher. Do you have conditions to use parts of your video inside my courses? (For sure it will only be for educationnal purpose only) let free to contact me !

[@FatsFalafel]

If anyone else has an issue with square 99 not registering in the recursion loop, you can add specific conditionals to the checkSquare function. If currentId == 98 specifically look for currentId + 1. If currentId == 89 look for currentId + 10.

[@jaydave791]

Woah I had never came across her channel and it is great tutorial

[@aniakubow]

Thanks so much Jay! It was really fun making it

[@MrTomer157]

Brad and Ania you are the greatest!

[@nikhilpokharel3682]

i had never seen her video , she is really unique all thanks to brad traversy

[@aniakubow]

Heya Nikhil!

[@nikhilpokharel3682]

@@aniakubow love from nepal 😘

[@markrobbins2441]

Changing your grid size will break all your bomb count code, and assigning bombs randomly does not take two arrays, two fills, a join, a shuffle and an array read - it's a one-liner.

[@firstthessalonian6889]

challenge accepted

[@rahulraidas9481]

❤️❤️❤️❤️❤️ Great tutorial by inspiring mentor

[@subhamaydatta2413]

Best as always

[@matteyahmed6470]

Arigato sensei for collaborating with other grt senseis 😁

[@PremierMatthew]

This video taught me how to play Minesweeper.

[@willrapforcomics3884]

Cool! I'm also watching her 12hr bootcamp.

[@Metruzanca]

Brad supporting small channels. Awesome!

[@hassaneoutouaya]

THANK YOU SO MUCH !

[@avi12]

10:35 To improve performance, you should actually append all the squares into a fragment wrapper, and at the end append that fragment into the DOM, so you end up modifying it once instead of 100 times

[@raimondssamsanovics5893]

i tried the code. the bombs seem to generate not correctly. only in one side of the board often times. is there something i can do for ez fix?

[@audi_2654]

I already love your channel. But man, your this initiative of guest content is🔥 Looking forward to more of this 🤩