How To Build A Minesweeper Clone With JavaScript

how to make mines game

This is still one of those technical tests some companies do. It tests your knowledge on navigating bidimensional arrays, add/remove event listeners, cancelling default behaviour and propagation of events, has a mini status machine, .. and it's fun. Good one WDS!

I have always wanted to make a minesweeper game since early days of windows 3.1. I am really enjoying your videos. Thanks for sharing your knowledge.

Your advance course have this video

This is really good, I learned a lot. I am returning to dev after a very long hiatus and found you using methods I didn't even know existed. I appreciate you explained the more unusual ones like bind, stopImmediatePropagation and such.

I have trouble making those mines=0 opening

Ik worked

Create a tutorial How to make a browser game for dummies with build house and atack other players is not any tutorial to web:)

79th commemt😂

You do my 3 months project in less than 45 minutes I'm-

while (positions.length < numberOfMines ) is really smart.

I had the restriction that I only had as many loop iterations as there are numberOfMines
So I had to create a recursive random number function that doesn't allow a passed(exception) value:

function getRandomInt(min, max, exception) {
min = Math.ceil(min);
max = Math.floor(max);
const randomInt = Math.floor(Math.random() * (max - min)) + min
return (randomInt === exception) ? getRandomInt(0, max, exception) : randomInt
}

and is called like this:

mines[yPos][xPos] ?
//we don't want this combo of xPos and yPos when occupied ->
mines[getRandomInt(0, yLength, yPos)][getRandomInt(0, xLength, xPos)] = true :
//but usually we do ->
mines[yPos][xPos] = true

while re-building the game I'm really confused about something:

For some reason I'm only getting one row of tiles.
Even though my 'board' for sure is an array of arrays that is just like yours.
I'm iterating throguh it just like you:

board.forEach(row => {
row.forEach(tile => {
boardContainer.append(tile.element)

I tried this one a 1d array and draw on canvas... I'm not okay.

Thanks a lot for great work!

I’m not sure if you have a video addressing this, but I notice you are looking at another screen quite frequently. I’m guessing you’re looking at the code, because you don’t have it memorized. This is one thing I want to get out to people: YOU DONT MEMORIZE CODE!! You spend just as much time googling as you do coding. For videos sake, he obviously had already written it. This is something I struggled with, wondering why I could just sit in my IDE and write code for an hour straight

thanks for the vid! Was fun to follow along

Why don't you break your code down into objects / files - e.g. the "tile" should be an object and in a file called tile.js. Creating the tile object within a function just makes the code look messy and hard for maintenance.

Am i only one who come here to just learn how to play minesweeper

I have document its not defined error please help.

Should use math.round instead of floor, otherwise you'll never get mines on the last row or column

Why using forEach and not for of ?

awesome

Really wish i found your channel earlier, keep up the great work

Code "early" is not working for the course discount

This is by far the most well written piece of code I have come across.

If you're looking for a new video idea , you should definitely make a big 20-30 mins video explaining GitHub and git well (just like Tech with Tim's latest video). Your old git video is 2 years old and I feel like you could make a much better video now!

Code is cluttered, separate the functions into separate files inside a minesweeper directory

I've just spent two days trying to do this project on my own but I got stuck at the revealTiles() function. Just can't get the damned thing to work recursively. \_:(_/

Thanks , this is very interesting , thanks.
I whached this video so many times becouse there are some many inspiration. but, tell me the true: did you do it all by your self? if yes you are incredible!!
You are the best!!

can u make a video on how to make your own music streaming server

Wow I can't wait to watch this. I'm almost halfway through his course. It's so freaking amazing!

I was unaware that Johnny Bravo knew JavaScript!

nice video, thanks!

Wow, thank you, so much great information. I noticed the lack of 'else' statements like you suggested in a prior video. I would love to see a video explaining why you do not use semicolons.

Simplified as always

Nice and clear as always.

However, one small detail bothers me quite a bit. You say that you split the code into display and logic, but you still embed a div-element in your logic code basically mixing them anyways... Not by a lot, but still...

why don’t you just create a class called `Minesweeper`? So you could declare some private and public methods on it. Private methods are declared using ‘#’ as a prefix

Great video! Loved the clean way how you set up the nearbyTiles() function to also be able to call it recursively afterwards.
It was cool to see the .bind() trick, but in my opinion this makes the code less readable and adds unnecessary confusion for other developers that might not be as familiar with it. I just think explicitly passing the two parameters that are being processed is a little cleaner than passing null and the first parameter, while at the same time assuming everyone knows that the bind function will automatically add the iteration value to it.

Super cool. Not gonna lie, felt a bit complicated in the middle but made it through. Good video. Thanks ❤️

Minesweeper and Snake is probably the 2 best games to recreate for learning purposes. good video about Minesweeper, just as good as the Snake game! :D

Also, I love how you're saying the words "simple" and "easy" like REALLY often! x)

I finally unserstood how to play minesweeper today ! XD

Great guide man - I love that you're direct and concise enough that you convey a lot of information to those with slightly more than a basic knowledge of JS.

Couldn't you use a Set instead of an array for the mine positions? Instead of populating with objects, populating with indices from 0 to n^2-1

Do you have a TypeScript Tutorial? Please make one ^^

Thanks for the great effort, Looking for the day you build a chess game application with JS !